不得不知道的H5的六大特性

首先感谢王二麻的传授,对H5有了一定的了解,下面步入正题

一、DNS Prefetching

DNS prefetching 是一个不算新的技术,谷歌和火狐都已经支持了。
DNS prefetching 就是是 “DNS预获取”,假如你的网站是 a.com,但是你的网站内页含有大量的 b.com的引用,例如图片调用,那么,你可以使用下面的方法预先获知 b.com 的DNS,减少 打开下个页面的 获取DNS所需要的时间。其实都是毫秒级的,压力不大。本着技术讨论的角度简单说下。代码如下:

  1. <link rel="dns-prefetch" href="//fonts.googleapis.com">
  2. <link rel="dns-prefetch" href="//google-analytics.com">
  3. <link rel="dns-prefetch" href="//www.google-analytics.com">
  4. <link rel="dns-prefetch" href="//platform.twitter.com">

二、Link Prefetching

Link Prefetching 是 HTML 5的一个标准, 最早是由Mozilla 发布的一个互联网标准草案,link prefetching 现在是 W3C和WHATWG关于HTML 5中的一部分。网页可以嵌入 prefetching 标记,当浏览器加载完当前页面即结束加载网页,在浏览器闲置的时候会触发prefetching 标记的link,浏览器会在后台静默prefeching指定的documents, 并存储在cache中。 当用户访问到prefetched documents时, cache中的内容会迅速被使用,加速网页展现。

  1. <link rel="prefetch" href="http://chuck-blog.com/2013/05/hello-world.html" />
  2. <link rel="prefetch" href="http://chuck-blog.com/assets/images/avatar.png" />

三、Download属性

凭借HTML5的Download属性,开发者可以不必到特定页面下载文件,而是直接进行下载。这一操作不必依赖服务器端代码便能够执行。代码如下:

  1. <a href="download_pdf.php?id=15" download="myfile.pdf">Download PDF</a>

四、Regular Expressions

在HTML4或XHTML中,你需要用一些正规表达式来验证特定的文本。而HTML5中新的pattern属性让我们能够在标签处直接插入一个正规表达式。

  1. <form action="" method="post">
  2. <label for="username">
  3. Create a Username:
  4. </label>
  5. <input type="text" name="username" id="username"
  6. placeholder="4 <> 10"
  7. pattern="[A-Za-z]{4,10}"
  8. autofocus
  9. required>
  10. <button type="submit">
  11. Go
  12. </button>
  13. </form>

五、视频预载Preload attribute in Videos element

当用户访问页面时这一属性使得视频得以预载。为了实现这个功能,可以在

六、显示控制条 (Display Controls)

如果你使用过上面的每一个提到的技术点,你可能已经注意到,使用上面的代码,视频仅仅显示的是张图片,没有控制条。为了渲染出播放控制条,我们必须在video元素内指定controls属性。

0
未经许可,不得转载,否则将受到作者追究,博主联系方式见首页右上角

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论
取消评论
代码 贴图 加粗 链接 删除线 签到