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é)
- 上一篇: 道阻且长溯游从之(道阻且长)
- 下一篇: 阳光同学和黄冈小状元哪个好一些(阳光同学