技术开发 频道

不得不看的11条HTML5代码 告别简单重复

  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&amp;image=__POSTER__.JPG&amp;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>

  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>

  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>

  11.使IE 6崩溃

  微软Internet Explorer 6是太多前端开发者的噩梦。但让人无奈的是,目前仍有很多人在使用IE 6,怎么办才好?下面这段代码很有意思,它可以让IE 6直接崩溃。

<style>*{position:relative}</style><table><input></table>
3
相关文章