HTML5 新特性
HTML5想必大家都很熟悉了。然而，你能準(zhǔn)確地說出HTML5帶來了哪些新特性嗎？本文總結(jié)了HTML5帶來的幾項(xiàng)你必須知道的新特性。
1.新的文檔類型 (New Doctype)
目前許多網(wǎng)頁還在使用XHTML 1.0 并且要在第一行像這樣聲明文檔類型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在HTML5中，上面那種聲明方式將失效。下面是HTML5中的聲明方式：
<!DOCTYPE html>
2.腳本和鏈接無需type
(No More Types for Scripts and Links)在HTML4或XHTML中，你需要用下面的幾行代碼來給你的網(wǎng)頁添加CSS和JavaScript文件。
<link rel="stylesheet" href="style/stylesheet.css" type="text/css" />
<script type="text/javascript" src="js/script.js"></script>
而在HTML5中，你不再需要指定類型屬性。因此，代碼可以簡化如下：
<link rel="stylesheet" href="style/stylesheet.css" />
<script src="js/script.js"></script>
3.語義Header和Footer (The Semantic Header and Footer)
在HTML4或XHTML中，你需要用下面的代碼來聲明"Header"和"Footer"。
<div id="header"></div>
<div id="footer"></div>
在HTML5中，有兩個(gè)可以替代上述聲明的元素，這可以使代碼更簡潔。
<header></header>
<footer></footer>
4.Hgroup
在HTML5中，有許多新引入的元素，hgroup就是其中之一。假設(shè)我的網(wǎng)站名下面緊跟著一個(gè)子標(biāo)題，我可以用<h1>和<h2>標(biāo)簽來分別定義。然而，這種定義沒有說明這兩者之間的關(guān)系。而且，h2標(biāo)簽的使用會(huì)帶來更多問題，比如該頁面上還有其他標(biāo)題的時(shí)候。在HTML5中，我們可以用hgroup元素來將它們分組，這樣就不會(huì)影響文件的大綱。
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
5.標(biāo)記元素 (Mark Element)
你可以把它當(dāng)做高亮標(biāo)簽。被這個(gè)標(biāo)簽修飾的字符串應(yīng)當(dāng)和用戶當(dāng)前的行動(dòng)相關(guān)。比如說，當(dāng)我在某博客中搜索“Open your Mind”時(shí)，我可以利用一些JavaScript將出現(xiàn)的詞組用<mark>修飾一下。
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark> </p>
6.圖形元素 (Figure Element)
在HTML4或XHTML中，下面的這些代碼被用來修飾圖片的注釋。
<img src="image/image" alt="About image" />
<p>Image of Mars </p>
然而，上述代碼沒有將文字和圖片內(nèi)在聯(lián)系起來。因此，HTML5引入了<figure>元素。當(dāng)和<figcaption>結(jié)合起來后，我們可以語義化地將注釋和相應(yīng)的圖片聯(lián)系起來。
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting.</p>
</figcaption>
</figure>
7.重新定義small (Small Element redefined)
在HTML4或XHTML中，small元素已經(jīng)存在。然而，卻沒有如何正確使用這一元素的完整說明。在HTML5中，small被用來定義小字。試想下你網(wǎng)站底部的版權(quán)狀態(tài)，根據(jù)對(duì)此元素新的HTML5定義，small可以正確地詮釋這些信息。
8.占位符 (Placeholder)
在HTML4或XHTML中，你需要用JavaScript來給文本框添加占位符。比如，你可以提前設(shè)置好一些信息，當(dāng)用戶開始輸入時(shí)，文本框中的文字就消失。
而在HTML5中，新的“placeholder”就簡化了這個(gè)問題。
9.必要屬性 (Required Attribute)
HTML5中的新屬性“required”指定了某一輸入是否必需。有兩種方法聲明這一屬性。
<input type="text" name="someInput" required>
<input type="text" name="someInput" required="required">
當(dāng)文本框被指定必需時(shí)，如果空白的話表格就不能提交。下面是一個(gè)如何使用的例子。
<form method="post" action="">
<label for="someInput"> Your Name: </label>
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit">Go</button>
</form>
在上面那個(gè)例子中，如果輸入內(nèi)容空且表格被提交，輸入框?qū)⒈桓吡溜@示。
10.Autofocus 屬性 (Autofocus Attribute)
同樣，HTML5的解決方案消除了對(duì)JavaScript的需要。如果一個(gè)特定的輸入應(yīng)該是“選擇”或聚焦，默認(rèn)情況下，我們現(xiàn)在可以利用自動(dòng)聚焦屬性。
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
11.Audio 支持 (Audio Support)
目前我們需要依靠第三方插件來渲染音頻。然而在HTML5中，<audio>元素被引進(jìn)來了。
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>
當(dāng)使用<audio>元素時(shí)請(qǐng)記得包含兩種音頻格式。FireFox想要.ogg格式的文件，而Webkit瀏覽器則需要.mp3格式的。和往常一樣，IE是不支持的，且Opera 10及以下版本只支持.wav格式。
12.Video 支持 (Video Support)
HTML5中不僅有<audio>元素，而且還有<video>。然而，和<audio>類似，HTML5中并沒有指定視頻解碼器，它留給了瀏覽器來決定。雖然Safari和Internet Explorer9可以支持H.264格式的視頻，F(xiàn)irefox和Opera是堅(jiān)持開源Theora 和Vorbis格式。因此，指定HTML5的視頻時(shí)，你必須提供這兩種格式。
<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p> Your browser is old. <.a href="cohagenPhoneCall.mp4">.Download this video instead.</a> </p>
</video>
13.視頻預(yù)載 (Preload attribute in Videos element)
當(dāng)用戶訪問頁面時(shí)這一屬性使得視頻得以預(yù)載。為了實(shí)現(xiàn)這個(gè)功能，可以在<video>元素中加上preload="preload"或者只是preload。
<video preload >
14.顯示控制條 (Display Controls)
如果你使用過上面的每一個(gè)提到的技術(shù)點(diǎn)，你可能已經(jīng)注意到，使用上面的代碼，視頻僅僅顯示的是張圖片，沒有控制條。為了渲染出播放控制條，我們必須在video元素內(nèi)指定controls屬性。
<video preload controls>
15.正規(guī)表達(dá)式 (Regular Expressions)
在HTML4或XHTML中，你需要用一些正規(guī)表達(dá)式來驗(yàn)證特定的文本。而HTML5中新的pattern屬性讓我們能夠在標(biāo)簽處直接插入一個(gè)正規(guī)表達(dá)式。
<form action="" method="post">
<label for="username">.Create a Username: </label>
<input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required>
<button type="submit">.Go </button>
</form>
16.Range Input
HTML5引用的range類型可以創(chuàng)建滑塊，它接受min, max, step和value屬性 可以使用css的:before和:after來顯示min和max的值
<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=”">
input[type=range]:before { content: attr(min); padding-right: 5px;
}
input[type=range]:after { content: attr(max); padding-left: 5px;}
新增接口
HTML5為了幫助創(chuàng)建Web App，引入了一些新的接口：
媒體標(biāo)簽video和audio的播放流程控制、同步多個(gè)媒體標(biāo)簽、字幕等接口
表單限制驗(yàn)證接口（如setCustomValidity）
引入應(yīng)用緩存機(jī)制，允許Web App離線的API
允許Web App注冊(cè)為對(duì)應(yīng)協(xié)議或媒體類型的處理應(yīng)用的APP的API。（即registerProtocolHandler和registerContentHandler）
引入contenteditable屬性，允許編輯任意元素的接口
暴露會(huì)話歷史、允許使用腳本無刷新更新頁面URL（History接口）
base64轉(zhuǎn)換API（atob()及btoa()）
處理搜索服務(wù)提供方的接口（AddSearchProvider()及IsSearchProviderInstalled()）
External接口
打印文檔的接口（print()）（譯注：下列接口是很早就有，屬于BOM中的共識(shí)部分，直到HTML5才加入標(biāo)準(zhǔn)）
暴露文檔URL、允許使用腳本切換、刷新頁面的接口（Location接口）
基于時(shí)間的回調(diào)接口（setTimeout()及setInterval()）
提供給用戶的提示接口（alert()，confirm()，prompt()）
Window接口
Navigator接口
修改的接口
如下DOM 2的接口已被改動(dòng)：
document.title的返回值將會(huì)折疊多個(gè)空格符
document.domain允許賦值，因此可以改變文檔的script origin
document.open()可以清空文檔（如果調(diào)用時(shí)僅有兩個(gè)或以下參數(shù)），或像是window.open()一樣表現(xiàn)（如果調(diào)用時(shí)有三個(gè)或四個(gè)參數(shù)）。在前種調(diào)用方式下，拋出一個(gè)XML異常
document.close()、document.write()、document.writeln()拋出一個(gè)XML異常。后兩者允許可變參數(shù)，他們可以在文檔解析階段往文檔流中加入文本，并隱式調(diào)用document.open()。在一些情形下，他們都可能會(huì)被忽略
document.getElementsByName()將返回滿足name符合參數(shù)的所有HTML元素
HTMLFormElement的elements接口將返回HTMLFormControlsCollection，包括button, fieldset, input,keygen, object, output, select及textarea
HTMLSelectElement的add()接口允許第二個(gè)參數(shù)為數(shù)字
HTMLSelectElement的remove()接口在參數(shù)越界的時(shí)候，將刪除集合中第一個(gè)元素
在所有的HTML元素中都可以調(diào)用click()、focus()及blur()接口了
a及areastringify為它們的href屬性（譯注：意味著HTMLAnchorElement和HTMLAreaElement對(duì)應(yīng)的toString方法返回它們的href屬性）
Document擴(kuò)展
DOM Level 2中有個(gè)HTMLDocument接口，繼承自Document接口，并提供了文檔內(nèi)部的元素（僅局限于HTML范疇內(nèi)）訪問接口。HTML5將這些成員移動(dòng)到了Document接口中，并在特定方向上拓展了它。由于各類文檔（譯注：XML、HTML5、SVG等等文檔）都使用了Document接口，而HTML5范疇內(nèi)的元素在所有類別的文檔中都可用，因此這些接口在SVG等文檔中都可以很好的運(yùn)作。
此外，Document接口還有一些新成員：
location、lastModified及readyState：用于幫助管理文檔的元數(shù)據(jù)(metadata)
dir、head、embeds、plugins、scripts：用于獲取DOM樹的不同部分
activeElement及hasFocus接口，用于判斷一個(gè)元素是否獲得了焦點(diǎn)
文檔編輯接口：designMode、execCommand()、queryCommandEnabled()、queryCommandIndeterm()、queryCommandState()、queryCommandSupported()、queryCommandValue()
所有的IDL事件處理屬性。此外，onreadystatechange是唯一一個(gè)在Document上才有效的接口在腳本中修改了HTMLDocument原型的那部分還是可以正常運(yùn)轉(zhuǎn)的，由于window.HTMLDocument也將返回Document接口。
HTMLElement擴(kuò)展
HTMLElement接口也在HTML5中得到了擴(kuò)展：
用于得到data-*的屬性的接口dataset
click()、focus()、blur()接口允許腳本模擬用戶點(diǎn)擊與切換焦點(diǎn)
accessKeyLabel給予UA賦予該元素的快捷鍵，開發(fā)可以通過accesskey屬性來影響UA的該行為
isContentEditable返回元素是否可以編輯
全部的IDL事件處理屬性
得到元素屬性的接口如translate、hidden、tabIndex、accessKey、contentEditable、spellcheck、style（譯注：DOM Level 2僅建議采用Element接口上的setAttribute和getAttribute來獲取或設(shè)置HTML Attribute，HTML5的這些定義擴(kuò)展了HTML Attribute的范圍，讓它們可以像DOM Property一樣set和get——UA早已廣泛支持）
有些之前在HTMLElement上定義接口被移動(dòng)到了Element接口中：id、className、classList、getElementsByClassName()（譯注：擴(kuò)展了DOM Level 2上的Element接口定義，可以直接set/get id等屬性值了——UA早已廣泛支持）
其它接口擴(kuò)展
DOM Level 2中的其它接口也得到了擴(kuò)展。
接口 新增接口
HTMLOptionsCollection legacy caller、setter creator、add()、remove()、selectedIndex
HTMLFormElement 通過name或index索引的getter、checkValidity()
HTMLSelectElementgetter、setter creator、item()、namedItem()、labels、selectedOptions及各種validate接口函數(shù)
HTMLOptionElement 構(gòu)造器new Option()
HTMLInputElementfiles、height、indeterminate、list、valueAsDate、valueAsNumber、width、stepUp()、stepDown()、labels、文本選取區(qū)域API及各種validate接口函數(shù)
HTMLTextAreaElementtextLength、labels、文本選取區(qū)域API及各種validate接口函數(shù)
HTMLButtonElementlabels及各種validate接口函數(shù)
HTMLLabelElementcontrol
HTMLFieldSetElement type、elements及各種validate接口函數(shù)
HTMLAnchorElement relList、text
HTMLLinkElementrelList
HTMLAreaElementrelList
HTMLImageElement 構(gòu)造器new Image()、naturalWidth、naturalHeight、complete
HTMLObjectElementcontentWindow、legacy caller及各種validate接口函數(shù)
HTMLMapElementimages
HTMLTableElementcreateTBody()
HTMLIFrameElement contentWindow
此外：
HTMLLinkElement和HTMLStyleElement實(shí)現(xiàn)了CSSOM中的LinkStyle接口
HTMLAnchorElement、HTMLLinkElement和HTMLAreaElement實(shí)現(xiàn)了URLUtils接口
廢棄接口
在HTML5中已被廢棄的屬性，其對(duì)應(yīng)IDL屬性接口也將被廢棄。如bgColor已被廢棄，那么HTMLBodyElement之上的IDL屬性接口bgcolor也被廢棄
在HTML5中已被廢棄的元素，其對(duì)應(yīng)接口也被廢棄，包括HTMLAppletElement, HTMLFrameSetElement,HTMLFrameElement, HTMLDirectoryElement及HTMLFontElement、HTMLBaseFontElement
由于HTML解析器將isindex替代為其他元素了，HTMLIsIndexElement接口被廢棄
一些成員屬性從HTMLDocument接口移動(dòng)到了Document接口，因此在原來的HTMLDocument下被廢棄：anchors和applets
轉(zhuǎn)自：https://segmentfault.com/a/1190000007215988
作者：xiaoqi77
總結(jié)
- 上一篇： 道阻且长溯游从之（道阻且长）
- 下一篇： 阳光同学和黄冈小状元哪个好一些（阳光同学