HTML5絕對是一個流行元素，受到如此多的公司組織的追捧，作為極客來說，豈能錯過呢？在今天這篇文章中，我們將分享一些超實用的HTML5的代碼片段，相信大家一定會喜歡！
HTML5視頻和fallback
實用HTML5的一個好處就是簡化了視頻和音頻的嵌入代碼量，不過呢，如何兼容老版本的瀏覽器絕對是一個令人頭疼的問題，特別是在天朝，老版本的瀏覽器絕對處于優勢地位，下面代碼或者能夠幫你忙：
<video width=“640” height=“360” controls>
<source src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif">
<source src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif">
<object width=“640” height=“360” type=“application/x-shockwave-flash” data=“__FLASH__.SWF”>
<param name=“movie” value=“__FLASH__.SWF” />
<param name=“flashvars” value=“controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4” />
<img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif">
title=“No video playback capabilities， please download the video below” />
</object>
</video>
HTML5中新的Input類型及其驗證
在HTML5出現之前，我們一般使用input來處理email，url，或者其它輸入，然后使用Javascript來驗證正確性，在HTML5中，我們使用如下代碼即可：
輸入一個URL地址：<input type=“url” value=“”>
輸入一個郵件地址：<input type=“email” pattern=“［^ @］*@［^ @］*” value=“”>
注意：這里我們可以使用pattern屬性來格式化輸入內容
另外我們也可以使用一些HTML5的標簽來處理表單驗證，省去了javascript，如下：
<input title=“至少8位并且至少包含1個數字一個小寫字母和一個大寫字母” type=“text” pattern=“（？=.*\d）（？=.*［a-z］）（？=.*［A-Z］）。{8，}” required />
<input type=“text” required pattern=“（\+？\d［- 。］*）{7，13}” title=“國際，國家和本地電話號碼”/>
以上分別定義了輸入的內容正確性原則。
HTML5直接添加項目到瀏覽器的右鍵菜單
使用HTML5可以直接添加菜單選項到你的瀏覽器右鍵菜單中，代碼如下：
<section contextmenu=“mymenu”>
<p>右鍵點擊這里</p>
</section>
<menu type=“context” id=“mymenu”>
<menuitem label=“極客社區” icon=“http://upload.chinaz.com/2013/0319/1363683484639.jpg”></menuitem>
<menu label=“極客應用”>
<menuitem label=“在線教程” onclick=“window.location.href = http://www.gbtags.com/gb/postgroups.htm”> </menuitem>
</menu>
</menu>
右鍵點擊網頁中文字處， 可以看到如下的菜單：
在線調試
HTML5的datalist實現自動補齊功能
自動補齊功能大家應該都很熟悉，包括jQueryUI中，或者第三方的自動補齊插件也很多，在HTML5中我們使用datalist來實現，如下：
<input name=“frameworks” list=“frameworks” />
<datalist id=“frameworks”>
<option value=“Foundation”>
<option value=“Bootstrap”>
<option value=“Dojo Toolkit”>
<option value=“jQuery”>
<option value=“YUI”>
</datalist>
在線調試
元素的自動focus
無須使用javascript，代碼很簡單：
<input autofocus=“autofocus” />
希望大家喜歡，如果你有任何問題，請訪問極客標簽提問或者討論，謝謝閱讀！
via 極客標簽
來源：絕對不可錯過的超實用HTML5代碼片段