絕對不可錯過的超實用HTML5代碼片段

HTML5絕對是一個流行元素，受到如此多的公司組織的追捧，作為極客來說，豈能錯過呢？在今天這篇文章中，我們將分享一些超實用的HTML5的代碼片段，相信大家一定會喜歡！

HTML5視頻和fallback

實用HTML5的一個好處就是簡化了視頻和音頻的嵌入代碼量，不過呢，如何兼容老版本的瀏覽器絕對是一個令人頭疼的問題，特別是在天朝，老版本的瀏覽器絕對處于優勢地位，下面代碼或者能夠幫你忙：

<video width="640" height="360" controls>
    <source src="__VIDEO__.MP4"  type="video/mp4" />
    <source src="__VIDEO__.OGV"  type="video/ogg" />
    <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&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
        <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
             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://gbtags.com/gb/networks/themes/img/logo_small_hover.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" />

來源：絕對不可錯過的超實用HTML5代碼片段