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