文章源自:http://www.gbtags.com/gb/share/2268.htm
绝对应当收藏的HTML5代码片段
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地图
这里有一段非常简单的代码,通过用户输入地点,获取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>
Base64编码的1x1大小的空白GIF文件
个人不推荐使用这个透明的空白gif,但是即使在2013年,很多人仍旧使用。可能你也喜欢使用这种方式。
<img src="https://img-blog.csdnimg.cn/2022010616291856290.gif">
正则表单式验证电子邮件
HTML5中允许使用正则表单式来做输入验证:
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
正确的嵌入flash
如果你经常需要在网页中插入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>
视频并且支持flash的fallback
另外一个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 call & sms links
iphone中苹果介绍了一个非常方便的方式来创建电话和短信链接。代码如下:
<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>
HTML5的数据自动补齐功能
使用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>
HTML5直接添加项目到浏览器的右键菜单
使用HTML5可以直接添加菜单选项到你的浏览器右键菜单中,代码如下:
<section contextmenu="mymenu">
<p>右键点击这里</p>
</section>
<menu type="context" id="mymenu">
<menuitem label="极客社区" icon="http://gbtags.com/gb/networks/themes/img/logo_small_hover.jpg"></menuitem>
<menu label="极客应用">
<menuitem label="在线教程" οnclick="window.location.href = http://www.gbtags.com/gb/postgroups.htm"> </menuitem>
</menu>
</menu>
元素的自动focus
无须使用javascript,代码很简单:
<input autofocus="autofocus" />