1. 爱易网页
  2. HTML教程
  3. 【html5】5分钟学会HTML5！（二）

【html5】5分钟学会HTML5！（二）

日期：2014-05-17　 浏览次数：20651 次

【html5】五分钟学会HTML5！（二）
html5开发与旧式浏览器的兼容

我们已经讨论了HTML5许多很酷的新功能，包括新的语义元素、为画图而生的canvas标签，以及音频与视频支持。

你可能会想：这些东西是很好，但当用户的浏览器不兼容HTML5时，可能就没法使用它们了。更不用说一些所谓的“支持”HTML5的浏览器，实际上只支持它的一部分功能而已。并不是所有HTML5新功能都会被所有浏览器所支持，而且许多HTML5特性在不同浏览器上也许使用了不同的实现方式。

不过，有一种方法可以使用新的特性，同时不影响旧版浏览器对你的站点的访问。你可以使用polyfill。

根据Paul Irish的说法，polyfill是模拟未来API的shim，它向旧版浏览器提供后备的功能。当旧版浏览器不支持站点中的某项HTML5功能时，polyfill会补充其中的空隙。学会使用这些polyfill，你就不必为了使用HTML5而抛弃那些使用旧版浏览器的用户。

获得polyfill支持的一种方法是使用JavaScript库——Modernizr（当然可用的不止这一种）。它会带来特性侦测能力，这样你就能检查浏览器究竟是否支持某种功能（比如canvas元素）。如果不支持，就提供一个备用的选择。

让我们研究一个示例。还记得吗？在介绍语义元素与页面布局时，我们已经使用过这个例子了。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>Title</title>
  6.     <link href="css/html5reset.css" rel="stylesheet" />
  7.     <link href="css/style.css" rel="stylesheet" />
  8. </head>
  9. <body>
  10.     <header>
  11.         <hgroup>
  12.             <h1>Header in h1</h1>
  13.             <h2>Subheader in h2</h2>
  14.         </hgroup>
  15.     </header>
  16.     <nav&

相关资料更多>

  1. 请教这种形式能否实现
  2. 请教哪里可以找到w3c标准的完整文档？ 越全越好！ W3C W3C W3C!
  3. 用Emacs MUSE生成HTML汇报时包含数学公式
  4. HTML的内置判断函数为啥没有执行
  5. 请教当背景图片不够宽时,如何时其拉伸以填满?
  6. 障蔽HTML中的BackSpace后退但不屏蔽输入框中的删除
  7. html抓取网页链接的例证
  8. HTML表单元素掩盖样式元素效果及其弥补
  9. css中repeat-x与repeat-y什么意思。组合例子说明一下