在網站製做中隨時可用的10個 HTML5 代碼片斷

HTML 很容易寫,但建立網頁時,您常常須要重複作一樣的任務,如建立表單。在這篇文章中,我收集了10個超有用的 HTML 代碼片斷,有 HTML5 啓動模板、空白圖片、打電話和發短信、自動完成等等,幫助你提升開發速度。javascript

 

  HTML5 啓動模板

  當啓動一個新的項目的時候,你須要一個啓動模板。這裏是一個簡潔乾淨的模板,能夠做爲 HTML5 項目的基礎。html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
     <head>
         <meta charset= "utf-8" >
         <title>Untitled</title>
         <!--[ if lt IE 9]>
         <script src= "http://html5shim.googlecode.com/svn/trunk/html5.js" ></script>
         <![endif]-->
     </head>
     <body>
         
     </body>
</html>

  獲取方位的表單 (Google Maps)

  這裏是一個簡單但功能強大的表單代碼,用戶能夠輸入他的位置指示到特定的地方。對於聯繫頁面很是有用。前端

?
1
2
3
4
5
6
<form action= "http://maps.google.com/maps" method= "get" target= "_blank" >
    <label for = "saddr" >Enter your location</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>

  Base64 編碼的空白 GIF 圖片

  我不推薦使用透明的 GIF,但我知道,即便在2013年,不少人都還在使用他們。若是你是其中之一,你可能會享受這個 Base64 編碼的 1 * 1px的空白 GIF。這種方式比使用的圖像更好。html5

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

  Email 校驗的正則表達式

  HTML5 對錶單功能進行了很大的正確,例如容許使用正則表達式模式來驗證電子郵件。java

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

  嵌入 Flash

  你是否常常須要再 HTML 頁面中嵌入 Flash 文件?若是是的話,你會更好地保存下面的 Flash 嵌入代碼以供未來使用。正則表達式

?
1
2
3
4
5
6
<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 video with Flash fallback

  新的 HTML5 規範的另外一大特色是 Video 標籤,讓您輕鬆嵌入視頻文件。但不幸的是,一些瀏覽器不能處理嵌入式 HTML5 視頻。所以,這裏兼容舊的瀏覽器的代碼,在不支持 HMTL5 視頻的瀏覽器使用 Flash。瀏覽器

?
1
2
3
4
5
6
7
8
9
10
<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&image=__POSTER__.JPG&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>

  打電話和發短信

  在移動網頁中,有一種快速的方法來創建呼叫和短信連接。下面是一個示例代碼,記得收藏在您的代碼片斷庫裏。app

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

  自動完成功能

  使用 dataList 元素,HTML5 容許你建立一個輸入字段自動完成數據的列表。超級有用的!這裏是一個示例代碼。ide

?
1
2
3
4
5
6
7
8
9
<input name= "frameworks" list= "frameworks" />
 
<datalist id= "frameworks" >
     <option value= "MooTools" >
     <option value= "Moobile" >
     <option value= "Dojo Toolkit" >
     <option value= "jQuery" >
     <option value= "YUI" >
</datalist>

  可下載的文件

  HTML5 容許使用 download 屬性強制下載文件。這裏是一個標準連接到一個可下載的文件。svn

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

  Crash IE6

  在 2013 年,帶給前端開發人員惡夢的 Internet Explorer 6 市場份額已經降了不少了。但一些人仍然在使用它。若是你想擺脫這種舊的瀏覽器,這裏是一個很是有趣的代碼,包括在你的 HTML 頁面,讓 IE6 崩潰。

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

  英文連接:Hyper useful, ready to use HTML5 snippets

相關文章
相關標籤/搜索