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>