【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>
<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>
<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>
data="your-flash-file.swf"
width="0" height="0">
<param name="movie" value="your-flash-file.swf" />
<param name="quality" value="high"/>
</object>
