標籤：ansi base64 著作權 eth 影響 修改 nts 提交 applet
HTML5想必大家都很熟悉了。然而，你能準確地說出HTML5帶來了哪些新特性嗎？本文總結了HTML5帶來的幾項你必須知道的新特性。
1.新的文件類型 (New Doctype)
目前許多網頁還在使用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中，你需要用下面的幾行代碼來給你的網頁添加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中，有兩個可以替代上述聲明的元素，這可以使代碼更簡潔。
<header></header>
<footer></footer>
4.Hgroup
在HTML5中，有許多新引入的元素，hgroup就是其中之一。假設我的網站名下面緊跟著一個子標題，我可以用<h1>和<h2>標籤來分別定義。然而，這種定義沒有說明這兩者之間的關係。而且，h2標籤的使用會帶來更多問題，比如該頁面上還有其他標題的時候。在HTML5中，我們可以用hgroup元素來將它們分組，這樣就不會影響檔案的大綱。
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
5.標記元素 (Mark Element)
你可以把它當做高亮標籤。被這個標籤修飾的字串應當和使用者當前的行動相關。比如說，當我在某部落格中搜尋“Open your Mind”時，我可以利用一些JavaScript將出現的片語用<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>
然而，上述代碼沒有將文字和圖片內在聯絡起來。因此，HTML5引入了<figure>元素。當和<figcaption>結合起來後，我們可以語義化地將注釋和相應的圖片聯絡起來。
<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元素已經存在。然而，卻沒有如何正確使用這一元素的完整說明。在HTML5中，small被用來定義小字。試想下你網站底部的著作權狀態，根據對此元素新的HTML5定義，small可以正確地詮釋這些資訊。
8.預留位置 (Placeholder)
在HTML4或XHTML中，你需要用JavaScript來給文字框添加預留位置。比如，你可以提前設定好一些資訊，當使用者開始輸入時，文字框中的文字就消失。
而在HTML5中，新的“placeholder”就簡化了這個問題。
9.必要屬性 (Required Attribute)
HTML5中的新屬性“required”指定了某一輸入是否必需。有兩種方法聲明這一屬性。
<input type="text" name="someInput" required>
<input type="text" name="someInput" required="required">
當文字框被指定必需時，如果空白的話表格就不能提交。下面是一個如何使用的例子。
<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>
在上面那個例子中，如果輸入內容空且表格被提交，輸入框將被高亮顯示。
10.Autofocus 屬性 (Autofocus Attribute)
同樣，HTML5的解決方案消除了對JavaScript的需要。如果一個特定的輸入應該是“選擇”或聚焦，預設情況下，我們現在可以利用自動聚焦屬性。
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
11.Audio 支援 (Audio Support)
目前我們需要依靠第三方外掛程式來渲染音頻。然而在HTML5中，<audio>元素被引進來了。
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>
當使用<audio>元素時請記得包含兩種音頻格式。FireFox想要.ogg格式的檔案，而Webkit瀏覽器則需要.mp3格式的。和往常一樣，IE是不支援的，且Opera 10及以下版本只支援.wav格式。
12.Video 支援 (Video Support)
HTML5中不僅有<audio>元素，而且還有<video>。然而，和<audio>類似，HTML5中並沒有指定視頻解碼器，它留給了瀏覽器來決定。雖然Safari和Internet Explorer9可以支援H.264格式的視頻，Firefox和Opera是堅持開源Theora 和Vorbis格式。因此，指定HTML5的視頻時，你必須提供這兩種格式。
<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.視頻預載 (Preload attribute in Videos element)
當使用者訪問頁面時這一屬性使得視頻得以預載。為了實現這個功能，可以在<video>元素中加上preload="preload"或者只是preload。
<video preload >
14.顯示控制條 (Display Controls)
如果你使用過上面的每一個提到的技術點，你可能已經注意到，使用上面的代碼，視頻僅僅顯示的是張圖片，沒有控制條。為了渲染出播放控制條，我們必須在video元素內指定controls屬性。
<video preload controls>
15.正規運算式 (Regular Expressions)
在HTML4或XHTML中，你需要用一些正規運算式來驗證特定的文本。而HTML5中新的pattern屬性讓我們能夠在標籤處直接插入一個正規運算式。
<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類型可以建立滑塊，它接受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為了協助建立Web App，引入了一些新的介面：
媒體標籤video和audio的播放流程式控制制、同步多個媒體標籤、字幕等介面
表單限制驗證介面（如setCustomValidity）
引入應用緩衝機制，允許Web App離線的API
允許Web App註冊為對應協議或媒體類型的處理應用的APP的API。（即registerProtocolHandler和registerContentHandler）
引入contenteditable屬性，允許編輯任意元素的介面
暴露會話曆史、允許使用指令碼無重新整理更新頁面URL（History介面）
base64轉換API（atob()及btoa()）
處理搜尋服務提供者的介面（AddSearchProvider()及IsSearchProviderInstalled()）
External介面
列印文檔的介面（print()）（譯註：下列介面是很早就有，屬於BOM中的共識部分，直到HTML5才加入標準）
暴露文檔URL、允許使用指令碼切換、重新整理頁面的介面（Location介面）
基於時間的回調介面（setTimeout()及setInterval()）
提供給使用者的提示介面（alert()，confirm()，prompt()）
Window介面
Navigator介面
修改的介面
如下DOM 2的介面已被改動：
document.title的傳回值將會摺疊多個空格符
document.domain允許賦值，因此可以改變文檔的script origin
document.open()可以清空文檔（如果調用時僅有兩個或以下參數），或像是window.open()一樣表現（如果調用時有三個或四個參數）。在前種調用方式下，拋出一個XML異常
document.close()、document.write()、document.writeln()拋出一個XML異常。後兩者允許可變參數，他們可以在文檔解析階段往文檔流中加入文本，並隱式調用document.open()。在一些情形下，他們都可能會被忽略
document.getElementsByName()將返回滿足name符合參數的所有HTML元素
HTMLFormElement的elements介面將返回HTMLFormControlsCollection，包括button, fieldset, input,keygen, object, output, select及textarea
HTMLSelectElement的add()介面允許第二個參數為數字
HTMLSelectElement的remove()介面在參數越界的時候，將刪除集合中第一個元素
在所有的HTML元素中都可以調用click()、focus()及blur()介面了
a及areastringify為它們的href屬性（譯註：意味著HTMLAnchorElement和HTMLAreaElement對應的toString方法返回它們的href屬性）
Document擴充
DOM Level 2中有個HTMLDocument介面，繼承自Document介面，並提供了文檔內部的元素（僅局限於HTML範疇內）提供者。HTML5將這些成員移動到了Document介面中，並在特定方向上拓展了它。由於各類文檔（譯註：XML、HTML5、SVG等等文檔）都使用了Document介面，而HTML5範疇內的元素在所有類別的文檔中都可用，因此這些介面在SVG等文檔中都可以很好的運作。
此外，Document介面還有一些新成員：
location、lastModified及readyState：用於協助管理文檔的中繼資料(metadata)
dir、head、embeds、plugins、scripts：用於擷取DOM樹的不同部分
activeElement及hasFocus介面，用於判斷一個元素是否獲得了焦點
文檔編輯介面：designMode、execCommand()、queryCommandEnabled()、queryCommandIndeterm()、queryCommandState()、queryCommandSupported()、queryCommandValue()
所有的IDL事件處理屬性。此外，onreadystatechange是唯一一個在Document上才有效介面在指令碼中修改了HTMLDocument原型的那部分還是可以正常運轉的，由於window.HTMLDocument也將返回Document介面。
HTMLElement擴充
HTMLElement介面也在HTML5中得到了擴充：
用於得到data-*的屬性的介面dataset
click()、focus()、blur()介面允許指令碼類比使用者點擊與切換焦點
accessKeyLabel給予UA賦予該元素的快速鍵，開發可以通過accesskey屬性來影響UA的該行為
isContentEditable返回元素是否可以編輯
全部的IDL事件處理屬性
得到元素屬性的介面如translate、hidden、tabIndex、accessKey、contentEditable、spellcheck、style（譯註：DOM Level 2僅建議採用Element介面上的setAttribute和getAttribute來擷取或設定HTML Attribute，HTML5的這些定義擴充了HTML Attribute的範圍，讓它們可以像DOM Property一樣set和get——UA早已廣泛支援）
有些之前在HTMLElement上定義介面被移動到了Element介面中：id、className、classList、getElementsByClassName()（譯註：擴充了DOM Level 2上的Element介面定義，可以直接set/get id等屬性值了——UA早已廣泛支援）
其它介面擴充
DOM Level 2中的其它介面也得到了擴充。
介面 新增介面
HTMLOptionsCollection legacy caller、setter creator、add()、remove()、selectedIndex
HTMLFormElement 通過name或index索引的getter、checkValidity()
HTMLSelectElement getter、setter creator、item()、namedItem()、labels、selectedOptions及各種validate介面函數
HTMLOptionElement 構造器new Option()
HTMLInputElementfiles、height、indeterminate、list、valueAsDate、valueAsNumber、width、stepUp()、stepDown()、labels、文本選取地區API及各種validate介面函數
HTMLTextAreaElementtextLength、labels、文本選取地區API及各種validate介面函數
HTMLButtonElement labels及各種validate介面函數
HTMLLabelElementcontrol
HTMLFieldSetElement type、elements及各種validate介面函數
HTMLAnchorElement relList、text
HTMLLinkElementrelList
HTMLAreaElementrelList
HTMLImageElement 構造器new Image()、naturalWidth、naturalHeight、complete
HTMLObjectElement contentWindow、legacy caller及各種validate介面函數
HTMLMapElementimages
HTMLTableElementcreateTBody()
HTMLIFrameElement contentWindow
此外：
HTMLLinkElement和HTMLStyleElement實現了CSSOM中的LinkStyle介面
HTMLAnchorElement、HTMLLinkElement和HTMLAreaElement實現了URLUtils介面
廢棄介面
在HTML5中已被廢棄的屬性，其對應IDL屬性介面也將被廢棄。如bgColor已被廢棄，那麼HTMLBodyElement之上的IDL屬性介面bgcolor也被廢棄
在HTML5中已被廢棄的元素，其對應介面也被廢棄，包括HTMLAppletElement, HTMLFrameSetElement,HTMLFrameElement, HTMLDirectoryElement及HTMLFontElement、HTMLBaseFontElement
由於HTML解析器將isindex替代為其他元素了，HTMLIsIndexElement介面被廢棄
一些成員屬性從HTMLDocument介面移動到了Document介面，因此在原來的HTMLDocument下被廢棄：anchors和applets
轉自： 1190000007215988
xiaoqi77
HTML5 新特性
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
