【IT168 技術】相信開發者們都知道，HTML頁面非常容易寫。但當你創建網頁時，你會經常做類似於創建表單這種重複的工作，既浪費時間又讓人厭煩。在這篇文章中，我們準備了11個非常不錯的HTML 5代碼片段，可以大大簡化工作量，豐富你的前端代碼。
1.HTML 5初始模板
當開始一個新的項目時，你可能需要一個初始的模板。下面這段代碼， 是一個極為簡潔且乾淨的、基於HTML 5的項目模板。
<!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>
2.獲取方向指引表單(Google Maps)
我們經常會用到類似於方向指引的功能，下面就是這樣一個表單，既簡單又強大。用戶可以在其中輸入自己的位置，而後其會得到一些指示，以到達一個特定的地方。
<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>
3. 基於Base64編碼的1X1像素「間隔」 Gif
儘管我不太推薦使用透明的「間隔」 Gif，但目前仍有許多人還在時不時的使用它。如果你是其中之一，那麼相信下面這段代碼片段你一定有用，這比單純的使用一張圖片要好很多。
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
4.電子郵件驗證
在編寫表單時，驗證電子郵件是非常常用的。下面這組代碼，則使用了正則表達式來驗證。
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
5.嵌入視頻文件
在HTML頁面中嵌入視頻文件是非常常見的，如果你經常這樣做的話，那麼下面這組代碼片段對你一定有幫助。
<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>
6.HTML 5視頻兼容
HTML 5的一大亮點就是其可以讓你很輕鬆的嵌入視頻文件的標籤。但有一點，目前一些瀏覽器還無法識別HTML 5視頻，這個時候你就需要對這些老的瀏覽器進行兼容性的修改。
<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>
7.iPhone通話/簡訊連結
隨著蘋果公司推出了iPhone，其發明了一種快速建立通話和簡訊的連結，請參考下面這段代碼片段：
<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>
8.HTML5 datalists
在HTML 5中，你可以使用datalists標籤，來創建一個數據列表，並自動輸入欄位。這段代碼片段非常有用，建議前端開發者收藏。
<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>
9.選擇」國家「下拉列表
在網頁的表單中，我們經常會遇到選擇」國家「的選項，這裡有一段代碼，可以讓你節省很多時間。由於代碼量的問題，請您直接看源碼。
源地址：http://snipplr.com/view/4792/country-drop-down-list-for-web-forms/
10.下載文件
HTML 5允許你強制下載一個具有可下載屬性的文件，下面這段代碼可以幫助到你。
<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>
11.使IE 6崩潰
微軟Internet Explorer 6是太多前端開發者的噩夢。但讓人無奈的是，目前仍有很多人在使用IE 6，怎麼辦才好?下面這段代碼很有意思，它可以讓IE 6直接崩潰。
<style>*{position:relative}</style><table><input></table>