HTML5是WEB技術發展中的比較重要的裡程碑，對于從事前端開發的大家來說以下這些代碼是值得收藏的，可以反複使用的重要代碼片段。
HTML5中比較簡單的模闆
如果你需要建立一個新的HTML5項目，那麼你就需要用到一個簡單的模闆，下面的這個HTML5模闆相信大家應該很喜歡！
<!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>
web的主要内容
</body>
</html>
表單擷取Google地圖
這裡提供一段非常簡單的代碼，可以通過使用者輸入的位址來擷取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>
Base64編碼的1x1大小的空白GIF檔案
對于喜歡的人來說這段代碼有用，但是就我個人而言并不喜歡這段代碼。
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRA
正規表單式驗證電子郵件
HTML5中允許使用正規表單式來做輸入驗證。
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}"
正确嵌入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>
視訊支援flash的fallback
在HTML5中比較常用的非常實用的特性是video标簽，而且有了這段代碼能夠讓你很友善的嵌入video檔案。這段代碼隻支援新版本的浏覽器。
<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>
iPhone call & sms links
iphone蘋果中介紹了一個非常友善的用來建立電話和短信連結的方式。
<a href="tel:1-408-555-5555" target="_blank" rel="external nofollow" >1-408-555-5555</a>
<a href="sms:1-408-555-1212" target="_blank" rel="external nofollow" >New SMS Message</a>
HTML5的資料自動補齊功能實作的代碼
使用datalist元素，在HTML5中是允許你使用一組資料來生成自動補齊功能，有了這段代碼你無需再使用第三方的 js 代碼或者類庫了！
<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>
直接下載下傳檔案代碼
這段代碼能夠幫你實作直接下載下傳檔案。
<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" target="_blank" rel="external nofollow"
download="expenses.pdf">Download Your Expense Report</a>
Crash老版本浏覽器IE6
不知道現在是否有人在使用老版本的IE6浏覽器，如果有那麼以下這段代碼可以幫你實作web應用或網站來支援IE6。
<style>*{position:relative}</style><table><input></table>
以上這些代碼段對于HTML5的初學者可能比較實用，希望能夠帶給大家幫助吧。
![蚪俠-遠端泛目錄[泛域名+泛目錄+泛内頁]-[代碼+漢字]幹擾-字型繁簡切換-蜘蛛欺騙-主動推送_鏡像版-V25版[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)