絕對應當收藏的10個實用HTML5代碼片斷（轉）

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

正確的嵌入flash

若是你常常須要在網頁中插入flash的話，這段代碼你應該用的上：

<object type="application/x-shockwave-flash" 
  data="your-flash-file.swf" 
  width="0" height="0">
  <param name="movie" value="your-flash-file.swf" />
  <param name="quality" value="high"/>
</object>

HTML5視頻和fallback——而且支持flash

實用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>

表單獲取Google地圖

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">輸入地點</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
   <input type="submit" value="Get directions" />
</form>

一段很是簡單的代碼，經過用戶輸入地點，獲取google地圖地點，很是適合生成聯繫人表單

Base64編碼的1x1大小的空白GIF文件

我的不推薦使用這個透明的空白gif，可是即便在2013年，不少人仍舊使用。可能你也喜歡使用這種方式。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

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中容許使用正則表單式來作輸入驗證：

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

iPhone call & sms links

iphone中蘋果介紹了一個很是方便的方式來建立電話和短信連接。代碼以下：

<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>

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" />無須使用javascript，代碼很簡單：

可直接下載文件

<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>

Crash老版本瀏覽器IE6

要知道IE6在國內使用量可不小，若是在你的web應用或者網站中不支持IE6的話，加上這段代碼吧，相信你的用戶都會升級IE6滴，嘿嘿！

<style>*{position:relative}</style><table><input></table>

裝載自： 

• http://www.gbtags.com/gb/share/538.htm
• http://www.gbin1.com/technology/html/20131101-html5-snippets/