【IT168 技术】相信开发者们都知道，HTML页面非常容易写。但当你创建网页时，你会经常做类似于创建表单这种重复的工作，既浪费时间又让人厌烦。在这篇文章中，我们准备了11个非常不错的HTML 5代码片段，可以大大简化工作量，丰富你的前端代码。
1.HTML 5初始模板
当开始一个新的项目时，你可能需要一个初始的模板。下面这段代码， 是一个极为简洁且干净的、基于HTML 5的项目模板。
<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)
我们经常会用到类似于方向指引的功能，下面就是这样一个表单，既简单又强大。用户可以在其中输入自己的位置，而后其会得到一些指示，以到达一个特定的地方。
<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，但目前仍有许多人还在时不时的使用它。如果你是其中之一，那么相信下面这段代码片段你一定有用，这比单纯的使用一张图片要好很多。
4.电子邮件验证
在编写表单时，验证电子邮件是非常常用的。下面这组代码，则使用了正则表达式来验证。
5.嵌入视频文件
在HTML页面中嵌入视频文件是非常常见的，如果你经常这样做的话，那么下面这组代码片段对你一定有帮助。
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视频，这个时候你就需要对这些老的浏览器进行兼容性的修改。
<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="sms:1-408-555-1212">New SMS Message</a>
8.HTML5 datalists
在HTML 5中，你可以使用datalists标签，来创建一个数据列表，并自动输入字段。这段代码片段非常有用，建议前端开发者收藏。
<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允许你强制下载一个具有可下载属性的文件，下面这段代码可以帮助到你。
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>
11.使IE 6崩溃
微软Internet Explorer 6是太多前端开发者的噩梦。但让人无奈的是，目前仍有很多人在使用IE 6，怎么办才好?下面这段代码很有意思，它可以让IE 6直接崩溃。
