6.HTML 5视频兼容
HTML 5的一大亮点就是其可以让你很轻松的嵌入视频文件的标签。但有一点,目前一些浏览器还无法识别HTML 5视频,这个时候你就需要对这些老的浏览器进行兼容性的修改。
<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>
<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="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>
<a href="sms:1-408-555-1212">New SMS Message</a>
8.HTML5 datalists
在HTML 5中,你可以使用datalists标签,来创建一个数据列表,并自动输入字段。这段代码片段非常有用,建议前端开发者收藏。
<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>
<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允许你强制下载一个具有可下载属性的文件,下面这段代码可以帮助到你。
<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>
11.使IE 6崩溃
微软Internet Explorer 6是太多前端开发者的噩梦。但让人无奈的是,目前仍有很多人在使用IE 6,怎么办才好?下面这段代码很有意思,它可以让IE 6直接崩溃。
<style>*{position:relative}</style><table><input></table>