HTML5是WEB技術發展的重要的里程碑，對於前端開發來說，如果能夠找到一些未來大家開發中可能需要經常重複使用的代碼的話，相信大家一定不會拒絕，下面是我們精心收集的10多個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地圖地點，非常適合生成聯繫人表單
<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>
個人不推薦使用這個透明的空白gif，但是即使在2013年，很多人仍舊使用。可能你也喜歡使用這種方式。
<img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7>
HTML5中允許使用正則表單式來做輸入驗證：
<input type=text style="margin-top: 0px; margin-bottom: 15px; padding: 0px; border: 1px solid rgb(43, 153, 230); font-family: inherit; line-height: 27px; vertical-align: baseline; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255); width: 1000px; z-index: 1000;"><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標籤，允許你很方便的嵌入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 style="margin-top: 0px; margin-bottom: 15px; padding: 0px; border: 1px solid rgb(43, 153, 230); font-family: inherit; line-height: 27px; vertical-align: baseline; color: rgb(0, 0, 0); background-color: rgb(245, 250, 255); width: 1000px; z-index: 1000;"><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允許使用一組數據來生成自動補齊功能，現在你不需要使用第三方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 download=expenses.pdf>Download Your Expense Report</a>
要知道IE6在國內使用量可不小，如果在你的web應用或者網站中不支持IE6的話，加上這段代碼吧，相信你的用戶都會升級IE6滴，嘿嘿！
<style>*{position:relative}</style><table><input></table>