长按关注：@H_301_371@《UI设计自学平台》
大佬教程收集整理的这篇文章主要介绍了值得收藏的HTML5代码片段，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
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" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
如果你经常需要在网页中插入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>
另外一个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中苹果介绍了一个非常方便的方式来创建电话和短信链接。代码如下：
<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>
想认识志同道合的朋友一起学习web
丰富的学习资源，周一到周四免费直播公开课
你可能感兴趣的精彩内容
长按关注：@H_301_371@《UI设计自学平台》
以上是大佬教程为你收集整理的值得收藏的HTML5代码片段全部内容，希望文章能够帮你解决值得收藏的HTML5代码片段所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。