H5 App已勢不可擋，希望本文幫助大(dà)家更了解移動應用開(kāi)發。全文如下(xià)：
前端的發展如此之迅猛，一(yī)不留神，大(dà)俠你可能就會被遠遠地甩在後面了。如果你不想被HTML5的改變/更新攪得不知(zhī)所措的話(huà)，可以把本文的内容作爲必須了解的熱身課程。
一(yī)、新的Doctype
”doctype”中(zhōng)文意思指“文檔類型”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
使用新的HTML5文檔類型代替吧。你會活得更久<!DOCTYPE html> 您可能會對這段代碼究竟靠不靠譜表示懷疑。不用擔心，如今這是可行的，隻有老的浏覽器需要一(yī)個特定的doctype（文檔類型）。浏覽器如果不知(zhī)道doctype，就會很簡單的以标準模式對包含的标簽進行渲染。
二、圖形元素(The Figure Element )
看看下(xià)面給圖片添加的标示：
<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>
文字裹在p标簽裏，與img标簽各行其道，很難讓人聯想到這就是标題。
HTML5通過采用<figure>元素對此進行了改正。當合<figcaption>元素組合使用時，我(wǒ)(wǒ)們就可以語義化地聯想到
這就是圖片相對應的标題
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
三、<small>重新定義
還在不久前，<small>元素被用來創建靠近logo且相關的副标題。這是個很有用的表現元素，但是，現在，這種用法可能就不正确了。<small>元素已經被重新定義了，指小(xiǎo)字，因而更具可用性。試想下(xià)你網站底部的版權狀态，根據對此元素新的HTML5定義，<small>可以正确地包裹這些信息。
四、腳本(scripts)和鏈接(links)無需type
您可能現在仍在給link和script标簽增加type屬性。
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>
這已經是老黃花菜，非必需品了。這意味着，這些标簽都各自指向樣式表和腳本。因此，我(wǒ)(wǒ)們可以把type屬性一(yī)起幹掉。
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
五、引号還是不要引号
…這确實是個問題。記住，HTML5不是XHTML，要是你不願意，你沒有必要非得用引号标記包裹你的屬性，沒有必要非得閉合元素。換句話(huà)說，隻要你自己覺得舒服，就沒有什麽對錯之分(fēn)。對于我(wǒ)(wǒ)自己來說就是如此。
<p class=myClass id=someId> Start the reactor.
對此取舍你還得自己拿主意。如果你更傾向于結構化的文檔，就算天塌下(xià)來，也要把引号牢牢拽在懷裏。
六、内容可編輯
最新的浏覽器有個很贊的新屬性可以應用到元素上，叫做contenteditable。顧名思義，就是允許用戶編輯元素内容包含的任意文本，包括子元素。類似的用途還有很多，像是簡單的待辦事項清單應用程序，可大(dà)大(dà)利用其本地存儲的優勢。
<ul contenteditable="true">
<li>反手摸到肚臍身材好</li>
<li>最帥售票員(yuán)</li>
<li>帶着婚紗去(qù)蜜月</li>
</ul>
或者，根據前面所學到的一(yī)些技巧，我(wǒ)(wǒ)們可以把它寫成：
<ul contenteditable=true>
七、Email輸入(Inputs)
如果我(wǒ)(wǒ)們給表單輸入框應用名爲”email”的type屬性，我(wǒ)(wǒ)們可以命令浏覽器隻允許符合有效的電子郵件地址結構的字符串。沒錯，内置表單驗證即将到來，由于一(yī)些顯而易見的原因，我(wǒ)(wǒ)們還不能100%依賴内置驗證，較舊(jiù)的浏覽器不認識這個”email”型，它們會簡單地退回到普通文本框。
<form action="" method="get">
<label for="email">郵箱:</label><input id="email" name="email" type="email" />
<button type="submit">确定</button>
</form>
還應當指出，當談到哪些元素和屬性支持和不支持時，當前所有的浏覽器都有點靠不住的。例如Opera似乎支持電子郵件驗證，但僅在name屬性被指定的時候。而且，它不支持占位符屬性，這個我(wǒ)(wǒ)們将會在後面學到。底線是不依賴于這種形式的驗證…但你仍然可以使用它！
八、占位符(Placeholders)
Placeholders什麽意思呢，就是文本框/文本域空間默認會有個文字提示，獲得焦點時，此提示文字消失；失去(qù)焦點時如果内容爲空，提示文字又(yòu)出現。
這些表單控件裏面顯示的些提示性的文字就是占位符。按照以往的做法，我(wǒ)(wǒ)們需要使用一(yī)點JavaScript代碼實現占位符效果，
當然，你需要設定一(yī)個初始的默認的value值，然後根據輸入内容進行判斷，從而決定文本框值的改變與否。如果您使用占位符(placeholders)屬性，一(yī)切就輕松了。
<label for="email">郵箱:</label>
<input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" />
根據我(wǒ)(wǒ)的測試，目前至少webkit核心的浏覽器是支持placeholders屬性的，像Chrome，Safari.
九、本地存儲(Local Storage)
多虧了本地存儲，我(wǒ)(wǒ)們可以讓高級浏覽器記住我(wǒ)(wǒ)們的編輯後的内容，即使浏覽器被關掉或是頁面刷新。關于本地存儲（離(lí)線存儲）可以參見WEX5微信中(zhōng)提到的文章“吓哭原生(shēng)App的HTML5離(lí)線存儲技術，卻出乎意料的容易！”。
十、語義的Header和Footer
那些過往的日子：
<div id="header">
...
</div>
<div id="footer">
...
</div>
div嘛，很自然的，沒有語義化的結構——即使在應用了id後。現在，通過HTML5，我(wǒ)(wǒ)們可以使用<header>和<footer>元素。以上的代碼可以替換成：
<header>
...
</header>
<footer>
...
</footer>
它完全适合您有多個頁眉和頁腳的項目。
盡量不要混淆”header”和”footer”這些元素。他們隻是指他們的容器。因此，将博客底部的，例如，元信息放(fàng)在footer元素内部是說得通的。這同樣也适用于header。
十一(yī)、IE和HTML5(Internet Explorer and HTML5)
不幸的是，讨厭(yàn)的IE浏覽器需要動點小(xiǎo)手術才能理解新的HTML5元素。
所有元素，默認的，都有個inline的display
爲了确保所有新的HTML5元素能以block水平的元素正确地渲染，有必要對其做如下(xià)定義：
header, footer, article, section, nav, menu, hgroup {
display: block;
}
不幸的是，IE仍舊(jiù)忽略這些樣式，因爲它不知(zhī)道這些标簽從哪裏來的，好比是header元素。爲了更簡單将此應用到每個新的應用過程中(zhōng)，雷米夏普(Remy Sharp)創建了一(yī)個腳本，通常稱爲HTML5 shiv。該腳本同樣修複了些顯示問題。
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
十二、文檔某一(yī)部分(fēn)的信息(hgroup)
想象一(yī)下(xià)，在我(wǒ)(wǒ)的網站的标題，我(wǒ)(wǒ)有我(wǒ)(wǒ)的站點的名稱，随後立即由一(yī)個副标題。雖然我(wǒ)(wǒ)們可以使用一(yī)個<h1>和<h2>标簽，爲其分(fēn)别創造标記，但是依舊(jiù)沒有（因爲HTML4）一(yī)個簡單的方法來語義上說明了兩者之間的關系。此外(wài)，一(yī)個h2标記的使用提出了更多的問題，在層次結構上，當涉及到其他網頁上顯示的标題時。通過使用不影響文檔的大(dà)綱流hgroup元素，我(wǒ)(wǒ)們可以将這些标題組合在一(yī)起。
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
十三、必要的屬性(Required Attribute )
表單允許新的必要屬性，用來指定是否需要特殊的input。這取決于你的代碼偏好，你可以以下(xià)面兩種方式之一(yī)申明此屬性。
<input type="text" name="someInput" required>
或者，使用更結構化的方法：
<input type="text" name="someInput" required="required">
兩種方法都行。
下(xià)面是一(yī)個簡單的例子，我(wǒ)(wǒ)們還将添加占位符屬性，因爲沒有理由不這樣做。
<form action="" method="get">
<label for="name">姓名:</label>
<input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" />
<button type="submit">提交</button>
</form>
十四、Autofocus屬性
同樣，HTML5的解決方案消除了對JavaScript的需要。如果一(yī)個特定的輸入應該是“選擇”，或有重點的，默認情況下(xià)，我(wǒ)(wǒ)們現在可以利用自動獲取焦點屬性。
<input type="text" name="someInput" placeholder="zhangxinxu" required autofocus>
有趣的是，雖然我(wǒ)(wǒ)個人更傾向于喜歡XHTML的方法（用引号，等等），寫作“autofocus=autofocus”讓人感到有點怪。因此，我(wǒ)(wǒ)們将堅持使用單一(yī)關鍵字的方法。
十五、Audio支持
我(wǒ)(wǒ)們無需再依賴第三方插件區渲染音頻(pín)。HTML5提供了<audio>元素，嗯，至少，最終，我(wǒ)(wǒ)們将不必擔心這些插件。就目前，隻有最近期的的浏覽器提供HTML5音頻(pín)支持。在這個時候，它仍然是一(yī)個很好的做法提供一(yī)些向後兼容的形式。
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>
十六、Video支持
與<audio>元素很類似，在新的浏覽器中(zhōng)也存在Video！事實上，就在最近，YouTube宣告了新的HTML5視頻(pín)嵌入，當然，是爲支持此功能浏覽器。
因爲HTML5的規範沒有指定特定的視頻(pín)編解碼器，它留給了浏覽器來決定。雖然Safari和Internet Explorer9可以預期支持H.264格式的視頻(pín)（其中(zhōng)Flash播放(fàng)器可以播放(fàng)），Firefox和Opera是堅持開(kāi)源Theora 和Vorbis格式。因此，當顯示HTML5的視頻(pín)，您必須提供這兩種格式。
<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>
無論是”ogg”格式還是”mp4″格式的視頻(pín)Chrome浏覽器都能正确編碼
還有一(yī)個值得注意的一(yī)些事情：
我(wǒ)(wǒ)們技術上不需要來設置type屬性，但是，如果我(wǒ)(wǒ)們不這樣做，浏覽器不得不自己去(qù)尋找類型。節省一(yī)些帶寬，還是你自己聲明下(xià)吧。
十七、視頻(pín)預載(Preload Videos)
預載屬性不完全是你想的那個樣子，雖然，你應該先決定是否要在浏覽器預裝的視頻(pín)。是否有必要？或許吧。如果訪問者訪問一(yī)個專門展示了一(yī)個視頻(pín)的頁面，你一(yī)定要預載的視頻(pín)，節約參觀者等待的一(yī)部分(fēn)時間。影片可以通過設置 preload=”preload”或是簡單地添加preload進行預載。我(wǒ)(wǒ)更喜歡後者的解決方案，它少了一(yī)點多餘的東西。<video preload>
十八、顯示控制條
如果你使用過上面的每一(yī)個提到的技術點，你可能已經注意到，使用上面的代碼，視頻(pín)僅僅顯示的是張圖片，沒有控制條。爲了渲染出播放(fàng)控制條，我(wǒ)(wǒ)們必須在video元素内指定controls屬性。<video preload controls>請注意，不同浏覽器渲染出來的進度條的模樣都是不一(yī)樣的。
十九、正則表達式
你發現自己多久匆匆編寫一(yī)些正則表達式驗證一(yī)個特定的文本。多虧了新的pattern屬性，我(wǒ)(wǒ)們可以在标簽處直接插入一(yī)個正則表達式。
<form action="" method="get">
<label for="username">姓名:</label>
<input id="username" name="username" type="text" placeholder="4-10個英文字母"
pattern="[A-Za-z]{4,10}" required="required" autofocus />
<button type="submit">提交</button>
</form>
如果你熟悉正則表達式，那麽應該清楚[A-Za-z]{4,10}表示接受4-10位不區分(fēn)大(dà)小(xiǎo)寫的英文字母。如果浏覽器支持pattern屬性，則提交表單時，如果文本框中(zhōng)的内容不符合其正則表達式，文本框會高亮顯示。
二十、屬性支持檢測
如果我(wǒ)(wǒ)們沒有方法檢測浏覽器是否支持這些屬性，這些就不能稱之爲好的屬性。恩，不錯的觀點，事實上我(wǒ)(wǒ)們是有幾種方法的，這裏我(wǒ)(wǒ)們讨論2個。第一(yī)個是利用優秀的Modernizr庫，或者，我(wǒ)(wǒ)們可以創建和分(fēn)析這些元素，以确定浏覽器的能力。例如，在我(wǒ)(wǒ)們前面的例子，如果我(wǒ)(wǒ)們要确定浏覽器是否能使用pattern的屬性，我(wǒ)(wǒ)們可以添加一(yī)小(xiǎo)段JavaScript到我(wǒ)(wǒ)們的頁面上：
alert( 'pattern' in document.createElement('input') );
事實上，這是一(yī)種确定浏覽器兼容的常用方法。jQuery庫了利用這種伎倆。在上面，我(wǒ)(wǒ)們創建了一(yī)個新的input元素，并确定了裏面的pattern屬性浏覽器是否認得。如果是，浏覽器則支持此功能。否則，當然就不支持了。
<script>
if (!'pattern' in document.createElement('input') ) { }
</script>
謹記此方法依賴于JavaScript。
前端的發展如此之迅猛，一(yī)不留神，大(dà)俠你可能就會被遠遠地甩在後面了。如果你不想被HTML5的改變/更新攪得不知(zhī)所措的話(huà)，可以把本文的内容作爲必須了解的熱身課程。
一(yī)、新的Doctype
”doctype”中(zhōng)文意思指“文檔類型”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
使用新的HTML5文檔類型代替吧。你會活得更久<!DOCTYPE html> 您可能會對這段代碼究竟靠不靠譜表示懷疑。不用擔心，如今這是可行的，隻有老的浏覽器需要一(yī)個特定的doctype（文檔類型）。浏覽器如果不知(zhī)道doctype，就會很簡單的以标準模式對包含的标簽進行渲染。
二、圖形元素(The Figure Element )
看看下(xià)面給圖片添加的标示：
<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>
文字裹在p标簽裏，與img标簽各行其道，很難讓人聯想到這就是标題。
HTML5通過采用<figure>元素對此進行了改正。當合<figcaption>元素組合使用時，我(wǒ)(wǒ)們就可以語義化地聯想到
這就是圖片相對應的标題
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
三、<small>重新定義
還在不久前，<small>元素被用來創建靠近logo且相關的副标題。這是個很有用的表現元素，但是，現在，這種用法可能就不正确了。<small>元素已經被重新定義了，指小(xiǎo)字，因而更具可用性。試想下(xià)你網站底部的版權狀态，根據對此元素新的HTML5定義，<small>可以正确地包裹這些信息。
四、腳本(scripts)和鏈接(links)無需type
您可能現在仍在給link和script标簽增加type屬性。
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>
這已經是老黃花菜，非必需品了。這意味着，這些标簽都各自指向樣式表和腳本。因此，我(wǒ)(wǒ)們可以把type屬性一(yī)起幹掉。
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
五、引号還是不要引号
…這确實是個問題。記住，HTML5不是XHTML，要是你不願意，你沒有必要非得用引号标記包裹你的屬性，沒有必要非得閉合元素。換句話(huà)說，隻要你自己覺得舒服，就沒有什麽對錯之分(fēn)。對于我(wǒ)(wǒ)自己來說就是如此。
<p class=myClass id=someId> Start the reactor.
對此取舍你還得自己拿主意。如果你更傾向于結構化的文檔，就算天塌下(xià)來，也要把引号牢牢拽在懷裏。
六、内容可編輯
最新的浏覽器有個很贊的新屬性可以應用到元素上，叫做contenteditable。顧名思義，就是允許用戶編輯元素内容包含的任意文本，包括子元素。類似的用途還有很多，像是簡單的待辦事項清單應用程序，可大(dà)大(dà)利用其本地存儲的優勢。
<ul contenteditable="true">
<li>反手摸到肚臍身材好</li>
<li>最帥售票員(yuán)</li>
<li>帶着婚紗去(qù)蜜月</li>
</ul>
或者，根據前面所學到的一(yī)些技巧，我(wǒ)(wǒ)們可以把它寫成：
<ul contenteditable=true>
七、Email輸入(Inputs)
如果我(wǒ)(wǒ)們給表單輸入框應用名爲”email”的type屬性，我(wǒ)(wǒ)們可以命令浏覽器隻允許符合有效的電子郵件地址結構的字符串。沒錯，内置表單驗證即将到來，由于一(yī)些顯而易見的原因，我(wǒ)(wǒ)們還不能100%依賴内置驗證，較舊(jiù)的浏覽器不認識這個”email”型，它們會簡單地退回到普通文本框。
<form action="" method="get">
<label for="email">郵箱:</label><input id="email" name="email" type="email" />
<button type="submit">确定</button>
</form>
還應當指出，當談到哪些元素和屬性支持和不支持時，當前所有的浏覽器都有點靠不住的。例如Opera似乎支持電子郵件驗證，但僅在name屬性被指定的時候。而且，它不支持占位符屬性，這個我(wǒ)(wǒ)們将會在後面學到。底線是不依賴于這種形式的驗證…但你仍然可以使用它！
八、占位符(Placeholders)
Placeholders什麽意思呢，就是文本框/文本域空間默認會有個文字提示，獲得焦點時，此提示文字消失；失去(qù)焦點時如果内容爲空，提示文字又(yòu)出現。
這些表單控件裏面顯示的些提示性的文字就是占位符。按照以往的做法，我(wǒ)(wǒ)們需要使用一(yī)點JavaScript代碼實現占位符效果，
當然，你需要設定一(yī)個初始的默認的value值，然後根據輸入内容進行判斷，從而決定文本框值的改變與否。如果您使用占位符(placeholders)屬性，一(yī)切就輕松了。
<label for="email">郵箱:</label>
<input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" />
根據我(wǒ)(wǒ)的測試，目前至少webkit核心的浏覽器是支持placeholders屬性的，像Chrome，Safari.
九、本地存儲(Local Storage)
多虧了本地存儲，我(wǒ)(wǒ)們可以讓高級浏覽器記住我(wǒ)(wǒ)們的編輯後的内容，即使浏覽器被關掉或是頁面刷新。關于本地存儲（離(lí)線存儲）可以參見WEX5微信中(zhōng)提到的文章“吓哭原生(shēng)App的HTML5離(lí)線存儲技術，卻出乎意料的容易！”。
十、語義的Header和Footer
那些過往的日子：
<div id="header">
...
</div>
<div id="footer">
...
</div>
div嘛，很自然的，沒有語義化的結構——即使在應用了id後。現在，通過HTML5，我(wǒ)(wǒ)們可以使用<header>和<footer>元素。以上的代碼可以替換成：
<header>
...
</header>
<footer>
...
</footer>
它完全适合您有多個頁眉和頁腳的項目。
盡量不要混淆”header”和”footer”這些元素。他們隻是指他們的容器。因此，将博客底部的，例如，元信息放(fàng)在footer元素内部是說得通的。這同樣也适用于header。
十一(yī)、IE和HTML5(Internet Explorer and HTML5)
不幸的是，讨厭(yàn)的IE浏覽器需要動點小(xiǎo)手術才能理解新的HTML5元素。
所有元素，默認的，都有個inline的display
爲了确保所有新的HTML5元素能以block水平的元素正确地渲染，有必要對其做如下(xià)定義：
header, footer, article, section, nav, menu, hgroup {
display: block;
}
不幸的是，IE仍舊(jiù)忽略這些樣式，因爲它不知(zhī)道這些标簽從哪裏來的，好比是header元素。爲了更簡單将此應用到每個新的應用過程中(zhōng)，雷米夏普(Remy Sharp)創建了一(yī)個腳本，通常稱爲HTML5 shiv。該腳本同樣修複了些顯示問題。
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
十二、文檔某一(yī)部分(fēn)的信息(hgroup)
想象一(yī)下(xià)，在我(wǒ)(wǒ)的網站的标題，我(wǒ)(wǒ)有我(wǒ)(wǒ)的站點的名稱，随後立即由一(yī)個副标題。雖然我(wǒ)(wǒ)們可以使用一(yī)個<h1>和<h2>标簽，爲其分(fēn)别創造标記，但是依舊(jiù)沒有（因爲HTML4）一(yī)個簡單的方法來語義上說明了兩者之間的關系。此外(wài)，一(yī)個h2标記的使用提出了更多的問題，在層次結構上，當涉及到其他網頁上顯示的标題時。通過使用不影響文檔的大(dà)綱流hgroup元素，我(wǒ)(wǒ)們可以将這些标題組合在一(yī)起。
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
十三、必要的屬性(Required Attribute )
表單允許新的必要屬性，用來指定是否需要特殊的input。這取決于你的代碼偏好，你可以以下(xià)面兩種方式之一(yī)申明此屬性。
<input type="text" name="someInput" required>
或者，使用更結構化的方法：
<input type="text" name="someInput" required="required">
兩種方法都行。
下(xià)面是一(yī)個簡單的例子，我(wǒ)(wǒ)們還将添加占位符屬性，因爲沒有理由不這樣做。
<form action="" method="get">
<label for="name">姓名:</label>
<input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" />
<button type="submit">提交</button>
</form>
十四、Autofocus屬性
同樣，HTML5的解決方案消除了對JavaScript的需要。如果一(yī)個特定的輸入應該是“選擇”，或有重點的，默認情況下(xià)，我(wǒ)(wǒ)們現在可以利用自動獲取焦點屬性。
<input type="text" name="someInput" placeholder="zhangxinxu" required autofocus>
有趣的是，雖然我(wǒ)(wǒ)個人更傾向于喜歡XHTML的方法（用引号，等等），寫作“autofocus=autofocus”讓人感到有點怪。因此，我(wǒ)(wǒ)們将堅持使用單一(yī)關鍵字的方法。
十五、Audio支持
我(wǒ)(wǒ)們無需再依賴第三方插件區渲染音頻(pín)。HTML5提供了<audio>元素，嗯，至少，最終，我(wǒ)(wǒ)們将不必擔心這些插件。就目前，隻有最近期的的浏覽器提供HTML5音頻(pín)支持。在這個時候，它仍然是一(yī)個很好的做法提供一(yī)些向後兼容的形式。
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>
十六、Video支持
與<audio>元素很類似，在新的浏覽器中(zhōng)也存在Video！事實上，就在最近，YouTube宣告了新的HTML5視頻(pín)嵌入，當然，是爲支持此功能浏覽器。
因爲HTML5的規範沒有指定特定的視頻(pín)編解碼器，它留給了浏覽器來決定。雖然Safari和Internet Explorer9可以預期支持H.264格式的視頻(pín)（其中(zhōng)Flash播放(fàng)器可以播放(fàng)），Firefox和Opera是堅持開(kāi)源Theora 和Vorbis格式。因此，當顯示HTML5的視頻(pín)，您必須提供這兩種格式。
<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>
無論是”ogg”格式還是”mp4″格式的視頻(pín)Chrome浏覽器都能正确編碼
還有一(yī)個值得注意的一(yī)些事情：
我(wǒ)(wǒ)們技術上不需要來設置type屬性，但是，如果我(wǒ)(wǒ)們不這樣做，浏覽器不得不自己去(qù)尋找類型。節省一(yī)些帶寬，還是你自己聲明下(xià)吧。
十七、視頻(pín)預載(Preload Videos)
預載屬性不完全是你想的那個樣子，雖然，你應該先決定是否要在浏覽器預裝的視頻(pín)。是否有必要？或許吧。如果訪問者訪問一(yī)個專門展示了一(yī)個視頻(pín)的頁面，你一(yī)定要預載的視頻(pín)，節約參觀者等待的一(yī)部分(fēn)時間。影片可以通過設置 preload=”preload”或是簡單地添加preload進行預載。我(wǒ)(wǒ)更喜歡後者的解決方案，它少了一(yī)點多餘的東西。<video preload>
十八、顯示控制條
如果你使用過上面的每一(yī)個提到的技術點，你可能已經注意到，使用上面的代碼，視頻(pín)僅僅顯示的是張圖片，沒有控制條。爲了渲染出播放(fàng)控制條，我(wǒ)(wǒ)們必須在video元素内指定controls屬性。<video preload controls>請注意，不同浏覽器渲染出來的進度條的模樣都是不一(yī)樣的。
十九、正則表達式
你發現自己多久匆匆編寫一(yī)些正則表達式驗證一(yī)個特定的文本。多虧了新的pattern屬性，我(wǒ)(wǒ)們可以在标簽處直接插入一(yī)個正則表達式。
<form action="" method="get">
<label for="username">姓名:</label>
<input id="username" name="username" type="text" placeholder="4-10個英文字母"
pattern="[A-Za-z]{4,10}" required="required" autofocus />
<button type="submit">提交</button>
</form>
如果你熟悉正則表達式，那麽應該清楚[A-Za-z]{4,10}表示接受4-10位不區分(fēn)大(dà)小(xiǎo)寫的英文字母。如果浏覽器支持pattern屬性，則提交表單時，如果文本框中(zhōng)的内容不符合其正則表達式，文本框會高亮顯示。
二十、屬性支持檢測
如果我(wǒ)(wǒ)們沒有方法檢測浏覽器是否支持這些屬性，這些就不能稱之爲好的屬性。恩，不錯的觀點，事實上我(wǒ)(wǒ)們是有幾種方法的，這裏我(wǒ)(wǒ)們讨論2個。第一(yī)個是利用優秀的Modernizr庫，或者，我(wǒ)(wǒ)們可以創建和分(fēn)析這些元素，以确定浏覽器的能力。例如，在我(wǒ)(wǒ)們前面的例子，如果我(wǒ)(wǒ)們要确定浏覽器是否能使用pattern的屬性，我(wǒ)(wǒ)們可以添加一(yī)小(xiǎo)段JavaScript到我(wǒ)(wǒ)們的頁面上：
alert( 'pattern' in document.createElement('input') );
事實上，這是一(yī)種确定浏覽器兼容的常用方法。jQuery庫了利用這種伎倆。在上面，我(wǒ)(wǒ)們創建了一(yī)個新的input元素，并确定了裏面的pattern屬性浏覽器是否認得。如果是，浏覽器則支持此功能。否則，當然就不支持了。
<script>
if (!'pattern' in document.createElement('input') ) { }
</script>
謹記此方法依賴于JavaScript。
475003427