英文原文：15-html5-new-features-you-must-know，翻譯：CSDN
HTML5想必大家都很熟悉了，因為太多的媒體在討論這一技術。然而，你能準確地說出HTML5帶來了哪些新特性嗎？本文總結了HTML5帶來的15項你必須知道的新特性。
一起來看下：1.新的文件型別 (New Doctype)
目前許多網頁還在使用XHTML 1.0 並且要在第一行像這樣
宣告文件型別：
|
1 2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
在HTML5中，上面那種宣告方式將失效。下面是HTML5中的宣告方式：
|
1 |
<!DOCTYPE html> |
2.指令碼和連結無需type (No More Types for Scripts and Links)
在HTML4或XHTML中，你需要用下面的幾行程式碼來給你的網頁新增CSS和JavaScript檔案。
|
1 2 |
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script> |
而在HTML5中，你不再需要指定型別屬性。因此，程式碼可以簡化如下：
|
1 2 |
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script> |
3.語義Header和Footer (The Semantic Header and Footer)
在HTML4或XHTML中，你需要用下面的程式碼來宣告“Header”和“Footer”。
|
1 2 3 4 5 6 7 |
<div id="header"> ... </div> .......... <div id="footer"> ... </div> |
在HTML5中，有兩個可以替代上述宣告的元素，這可以使程式碼更簡潔。
|
1 2 3 4 5 6 |
<header> ... </header> <footer> ... </footer> |
4.Hgroup
在HTML5中，有許多新引入的元素，hgroup就是其中之一。假設我的網站名下面緊跟著一個子標題，我可以用<h1>和<h2>標籤來分別定義。然而，這種定義沒有說明這兩者之間的關係。而且，h2標籤的使用會帶來更多問題，比如該頁面上還有其他標題的時候。
在HTML5中，我們可以用hgroup元素來將它們分組，這樣就不會影響檔案的大綱。
|
1 2 3 4 5 6 |
<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>修飾一下。
|
1 2 |
<h3> Search Results </h3> <p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p> |
6.圖形元素 (Figure Element)
在HTML4或XHTML中，下面的這些程式碼被用來修飾圖片的註釋。
|
1 2 |
<img src="path/to/image" alt="About image" /> <p>Image of Mars. </p> |
然而，上述程式碼沒有將文字和圖片內在聯絡起來。因此，HTML5引入了<figure>元素。當和<figcaption>結合起來後，我們可以語義化地將註釋和相應的圖片聯絡起來。
|
1 2 3 4 5 6 |
<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”指定了某一輸入是否必需。有兩種方法宣告這一屬性。
|
1 2 |
<input type="text" name="someInput" required> <input type="text" name="someInput" required="required"> |
當文字框被指定必需時，如果空白的話表格就不能提交。下面是一個如何使用的例子。
|
1 2 3 4 5 |
<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的需要。如果一個特定的輸入應該是“選擇”或聚焦，預設情況下，我們現在可以利用自動聚焦屬性。
|
1 |
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus> |
11.Audio 支援 (Audio Support)
目前我們需要依靠第三方外掛來渲染音訊。然而在HTML5中，<audio>元素被引進來了。
|
1 2 3 4 5 |
<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的視訊時，你必須提供這兩種格式。
|
1 2 3 4 5 |
<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。
|
1 |
<video preload> |
14.顯示控制條 (Display Controls)
如果你使用過上面的每一個提到的技術點，你可能已經注意到，使用上面的程式碼，視訊僅僅顯示的是張圖片，沒有控制條。為了渲染出播放控制條，我們必須在video元素內指定controls屬性。
|
1 |
<video preload controls> |
15.正規表示式 (Regular Expressions)
在HTML4或XHTML中，你需要用一些正規表示式來驗證特定的文字。而HTML5中新的pattern屬性讓我們能夠在標籤處直接插入一個正規表示式。
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
結論
事實上，還有很多新元素和特性，上面提到的只是一些我認為網站開發中常用的，剩下的就由你們自己去摸索啦。