网站导航免费论文 原创论文 论文搜索 原创论文 网学软件 学术大家 资料中心 会员中心 问题解答 原创论文 大学论文导航 设计下载 最新论文 下载排行 原创论文 论文源代码
返回网学首页
网学联系
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 编程文档 > 网络知识 > 正文

绝对不可错过的超实用HTML5代码片段

来源:http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 14/07/16

鉴于大家对网络知识十分关注,我们编辑小组在此为大家搜集整理了“绝对不可错过的超实用HTML5代码片段”一文,供大家参考学习

HTML5绝对是一个流行元素,受到如此多的公司组织的追捧,作为极客来说,岂能错过呢?在今天这篇文章中,我们将分享一些超实用的HTML5的代码片段,相信大家一定会喜欢!

HTML5视频和fallback
实用HTML5的一个好处就是简化了视频和音频的嵌入代码量,不过呢,如何兼容老版本的浏览器绝对是一个令人头疼的问题,特别是在天朝,老版本的浏览器绝对处于优势地位,下面代码或者能够帮你忙:
  1. <video width="640" height="360" controls>
  2.     <source src="__VIDEO__.MP4"  type="video/mp4" />
  3.     <source src="__VIDEO__.OGV"  type="video/ogg" />
  4.     <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
  5.         <param name="movie" value="__FLASH__.SWF" />
  6.         <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
  7.         <img src=/uploadfile/201407/16/86222020319.JPG" width="640" height="360" alt="__TITLE__"
  8.              title="No video playback capabilities, please download the video below" />
  9.     </object>
  10. </video>
复制代码HTML5中新的Input类型及其验证

在HTML5出现之前,我们一般使用input来处理email,url,或者其它输入,然后使用Javascript来验证正确性,在HTML5中,我们使用如下代码即可:

  1. 输入一个URL地址:<input type="url" value="">
  2. 输入一个邮件地址:<input type="email" pattern="[^ @]*@[^ @]*" value="">
复制代码注意:这里我们可以使用pattern属性来格式化输入内容
另外我们也可以使用一些HTML5的标签来处理表单验证,省去了javascript,如下:
  1. <input title="至少8位并且至少包含1个数字一个小写字母和一个大写字母" type="text" pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />
  2. <input type="text" required pattern="(+?d[- .]*){7,13}" title="国际,国家和本地电话号码"/>
复制代码

以上分别定义了输入的内容正确性原则。


HTML5直接添加项目到浏览器的右键菜单

使用HTML5可以直接添加菜单选项到你的浏览器右键菜单中,代码如下:

  1. <section contextmenu="mymenu">
  2. <p>右键点击这里</p>
  3. </section>
  4.  
  5. <menu type="context" id="mymenu">
  6.   <menuitem label="极客社区" icon="/uploadfile/201407/16/58222020328.jpg"></menuitem>
  7.   <menu label="极客应用">
  8.   <menuitem label="在线教程" onclick="window.location.href = http://www.gbtags.com/gb/postgroups.htm">   </menuitem>
  9.   </menu>
  10. </menu>
复制代码HTML5的datalist实现自动补齐功能

自动补齐功能大家应该都很熟悉,包括jQueryUI中,或者第三方的自动补齐插件也很多,在HTML5中我们使用datalist来实现,如下:

  1. <input name="frameworks" list="frameworks" />
  2.  
  3. <datalist id="frameworks">
  4.     <option value="Foundation">
  5.     <option value="Bootstrap">
  6.     <option value="Dojo Toolkit">
  7.     <option value="jQuery">
  8.     <option value="YUI">
  9. </datalist>
复制代码元素的自动focus

无须使用javascript,代码很简单:

  1. <input autofocus="autofocus" />
  2.  
复制代码
  • 上一篇资讯: Web前端浏览器兼容初探
  • 网学推荐

    免费论文

    原创论文

    设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
    版权所有 QQ:3710167 邮箱:3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
    Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号