HTML5 学习笔记（一）——HTML5概要与新增标签 - SeeYouBug(7)_H5之家

用来嵌入内容(包括各种媒体)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例：<embed src="flash.swf" />
HTML4中代码示例<object data="flash.swf" type="application/x-shockwave-flash"><object>

四、HTML5兼容性

时至今日多数现代浏览器对HTML5的支持已经很高了，特别是移动端，但HTML5还是存在某些标签的兼容性问题的，只要世界上还有1个以上的浏览器就会存在兼容问题，

4.1、兼容性测试

1、当前浏览器HTML5支持情况在线测试：

IE8浏览器，得分33分，共555分

Chrome浏览器，54版，共555分，得分499分

2、当前浏览器对HTML5、CSS3的支持情况：

3、各个浏览器对HTML5、CSS3支持情况大全：

可以用于测试指定的HTML，CSS3，JavaScript新技术，以Web SQL Database的支持情况为例：

4.2、HTML5向下兼容

4.2.1、兼容测试

为的测试兼容性，做一个简单的示例，脚本如下：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5兼容</title> <style type="text/css"> #section1{ height: 200px; background: blue; } </style> </head> <body> <section></section> </body> </html>

IE8浏览效果：

为什么不显示，因为IE8不认识section这个HTML5标签，浏览器测试结果如下：

从IE9开始才部分支持HTML5中的标签。

4.2.2、html5shiv

html5shiv可以通过很简单的JavaScript让IE6-IE9浏览器都支持HTML5中的元素
HTML5 Shiv这可以让具有考古价值的Internet Explorer支持HTML5相关元素，同时为IE6-9, Safari 4.x (以及iPhone 3.x), 以及Firefox 3.x提供基本的HTML5样式。
项目地址：https://github.com/aFarkas/html5shiv

下载后在页面中引入插件，代码如下：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5兼容</title>  <style type="text/css"> #section1 { height: 200px; background: blue; } </style> </head> <body> <section></section> </body> </html>

运行效果：

可以看到在IE8下就能正常使用section了，但是建议在不支持HTML5的浏览器中避免使用HTML5标签，可以用div替代；

另外不要以为使用了这个简单的插件后所有的HTML5功能在不支持HTML5的浏览器中都有了，它只是做了简单的兼容功能，如

video标签在IE8中不能使用，使用了该插件后仍然不能播放视频。

4.2.3、Modernizr

Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。目前，通过检验浏览器对一系列测试的处理情况，Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。它比传统检测浏览器名称（浏览器嗅探）的方式更为可靠。一整套测试的执行时间仅需几微秒。此外，Modernizr 网站通过定制脚本只对你感兴趣的元素进行检测，从而实现效率优化。
https://modernizr.com/

这里以CSS3中的线性渐变为例子，在支持CSS3的浏览器使用渐变，如果不支持则使用图片，先生成检测的js：

引入插件后的脚本如下：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5兼容</title> <style type="text/css"> #div1 { height: 100px; background:linear-gradient(#36f,#9cf); } .no-cssgradients #div1{ background:url(content/bg.png) repeat-x; } </style> </head> <body> <div></div> <script src="js/modernizr-custom.js" type="text/javascript" charset="utf-8"></script> </body> </html>