html5对各浏览器的支持情况
考虑到HTML5标准的制定原则：新特性基于HTML、CSS、DOM 以及 JavaScript；减少对外部插件的需求（比如Flash）；独立于设备等，我们选取了HTML 5的几项主要特性来评价浏览器系统。
- 视频播放标记video
- 音频播放标记audio
- 绘图标记canvas
- 表单控件标记url、email等
- 本地客户端存储
浏览器（版本）选取
由于目前市面上的浏览器品牌和版本繁多，我们难以覆盖全部产品，因此在这里设定测试浏览器的选择原则为：主流品牌、主流版本和最新版本（正式发布）。依据StatCounter发布的2011年2~3月份浏览器市场占有率统计分布情况，主流品牌如图1所示。
从图1 中可以看出， 微软的I n t e r n e tExplorer以其混搭的IE6、IE7、IE8、IE9等多个版本占据了榜首，开源浏览器Firefox紧随其后，其开放的体系结构也吸引了众多优秀插件，并成为Web开发人员的主要开发调试平台。Google主推的Chrome后来居上，占据了第三名的位置。
浏览器主流版本分布情况如图2所示。
图2 浏览器主流版本分布图
再加上部分最新浏览器版本，我们选取的全部浏览器（版本）如表1所示。
表1 测试浏览器
HTML5兼容性分析
视频播放标记video
在HTML5技术出现之前，大部分Web视频播放是通过浏览器插件如Adobe Flash来实现，这要求客户在观看视频之前安装相应的组件。video标记的出现使开发人员不再依赖于特定第三方技术，下面的代码片段播放了一个视频文件，设定了画面的尺寸，并带有控制按钮（暂停/进度条等）：
1 <!DOCTYPE HTML>
2 <html>
3 <body>
4
5 <video width="320" height="240" controls="controls">
6 <source src="movie.ogg" type="video/ogg" />
7 <source src="movie.mp4" type="video/mp4" />
8 <source src="movie.webm" type="video/webm" />
9 Your browser does not support the video tag.
10 </video>
11
12 </body>
13 </html>
video元素潜在地支持多种视频格式，包括：
- Ogg——采用Theora视频编码和Vorbis音频编码的Ogg视频文件；
- MPEG4——采用H.264视频编码和AAC音频编码的MPEG 4视频文件；
- WebM——采用VP8视频编码和Vorbis音频编码的WebM视频文件
这些视频格式在HTML5最终标准的接纳程度目前还在各方博弈之中，不过浏览器已经开始选择性地支持Video标记了。表2是兼容性测试结果。
表2 视频标记video测试结果
这里有几点需要注意：
- 最新发布的IE9默认只支持MPEG4（H.264编码）格式文件（支持硬件加速），如果安装了WebM/VP8插件，可以支持WebM视频格式。
- Safari浏览器依靠QuickTime做视频播放，所以Safari支持的视频格式与QuickTime一致。请注意：QuickTime在Mac机上是预装的，其默认支持的视频格式是MPEG4，但在Windows系统上QuickTime需要手动安装，也就是说在Windows上默认情况下Safari是不支持所有视频格式的，这一点需要Web开发人员了解。
- Firefox 4.0还将支持WebM格式。
- Chrome已经宣布不再支持MPEG格式的视频。
- Video元素有一个preload属性，可能的值包括Auto——当页面加载后载入整个视频；Meta——当页面加载后只载入元数据；None——当页面加载后不载入视频。
Web开发人员应该根据网页的实际环境来选择合适的预加载属性以达到较好的前端性能。
音频播放标记audio
与视频标记vidio类似，音频播放标记audio也是HTML5标准引入的元素，下面的代码播放了一段音频，带有控制按钮：
1 <audio controls="controls">
2 <source src="song.ogg" type="audio/ogg" />
3 <source src="song.mp3" type="audio/mpeg" />
4 Your browser does not support the audio element.
5 </audio>
audio潜在地支持多种音频格式，包括Oggvorbis、MP3、AAC、wav等，不同浏览器对audio标记的支持程度表3所示。
表3 音频标记audio测试结果
有几点需要说明：
- 因为存在包含关系，所以音频标记auido的情况基本与video的结果保持一致；
- IE8对video和audio标记都不支持，IE9刚刚引入这些元素；
- audio元素同样具有preload属性，注意正确设置属性值。
绘图标记canvas
在Web 2.0的世界里，炫目的图形是必不可少的组成部分。HTML5引入的canvas元素支持Web开发人员通过JavaScript在页面上绘制线条、图形、添加文字和图像等。下面的代码片段在页面上简单绘制了一个蓝色矩形：
1 <canvas id="myCanvas" width="200" height="100"></canvas>
2
3 <script type="text/javascript">
4 var c=document.getElementById("myCanvas");
5 var cxt=c.getContext("2d");
6 cxt.fillStyle="#0000FF";
7 cxt.fillRect(0,0,150,75);
8 </script>
Canvas的测试结果如表4所示。
表4 绘图标记canvas测试结果
我们欣喜地看到，各种浏览器对canvas的支持度非常高，对于IE8的限制，可以通过开源项目ExplorerCanvas来解决，只需要两步操作：
包含js文件
<head><!--[if IE]><script src="excanvas.js"></script><![endif]--></head>
直接包含canvas元素或者动态创建它：
1 var el=document.createElement('canvas');
2 G_vmlCanvasManager.initElement(el);
3 var ctx=el.getContext('2d');
Form 2.0表单元素
对于企业级Web应用来说，表单控件是最重要的页面元素之一。在HTML 5之前，各种类型的表单只能由开发人员通过复杂的属性设置和限制条件（通过脚本计算）来完成。制定中的HTML 5标准引入了一系列分类清晰、功能完善的表单控件标记，包括email、url、number、range、search、color等，还有表单属性autocomplete、autofocus等。这里提供一个简单例子，用户填写电子邮箱（自动检测格式正确与否）和个人主页（自动检测格式正确与否）等，然后提交给后台系统：
1 <form action="form_action.asp">
2 First name: <input type="text" name="fname" value="Mickey" /><br />
3 Last name:<input type="text" name="lname" value="Mouse" /><br />
4 <input type="submit" value="Submit" />
5 </form>
由于HTML5引入的表单控件、属性比较多，这里选取了部分进行了测试，如表5所示。
表5 部分表单元素测试结果
几点说明：
Firefox 4.0将开始支持email、url等表单元素；
自动填充已经作为许多浏览器的一项基本功能存在，与HTML5标准的autocomplete属性需要区别开。
本地客户端存储
Web开发人员经常通过cookie管理客户信息，但是当数据量比较大时，这种方法相对低效，一方面是因为cookie存在大小限制，另一方面每次都通过网络请求来传递。HTML5引入两种新的存储方式：
localStorage——没有时间限制的数据存储
sessionStorage——针对session的数据存储
1 <!DOCTYPE HTML>
2 <html>
3 <body>
4
5 <script type="text/javascript">
6
7 if (sessionStorage.pagecount)
8 {
9 sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
10 }
11 else
12 {
13 sessionStorage.pagecount=1;
14 }
15 document.write("这是session存储里的计数：" + sessionStorage.pagecount + "time(s) this session.重启浏览器，本次计数将清零");
16 if (localStorage.pagecount)
17 {
18 localStorage.pagecount=Number(localStorage.pagecount) +1;
19 }
20 else
21 {
22 localStorage.pagecount=1;
23 }
24 document.write("这是local存储里的计数："+ localStorage.pagecount + " time(s).重启浏览器，将继续计数");
25
26 </script>
27
28 <p>Refresh the page to see the counter increase.</p>
29
30 <p>Close the browser window, and try again, and the counter has been reset.</p>
31 </body>
32 </html>
下面的例子分别使用LocalStorage和SessionStorge实现了简单计数器，结果如表6所示。
表6 本地客户单存储测试结果
这项功能对Web开发人员来说非常强大，我们来看一下浏览器对sessionStorage和所有测试的浏览器都实现了HTML5的本地客户端存储标记！ 不过，这里要提一下安全性，Web开发人员在使用这些元素时，要时刻谨记存储在客户端的数据可能会被授权使用浏览器的其他人查看甚至修改，所以需要注意保存敏感信息。
html5对各浏览器的支持情况的更多相关文章
- 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况
对比audio标签 和 Web Audio API 各平台浏览器的支持情况: audio element Web Audio API desktop browsers Chrome 14 Yes ...
- HTML5：判断浏览器是否支持date类型
在某些情况下,我们需要判断当前浏览器是否支持date类型,如果支持的话,可以让用户用原生的datepicker来选取日期.如果不支持,则我们需要用自己实现的datepicker类库,来提供给用户. 在 ...
- CSS3(各UI元素状态伪类选择器受浏览器的支持情况)
选择器 Firefox Safari Opera IE Chrome E:hover Y Y Y Y Y E:active Y Y Y N Y E:focus Y Y Y Y Y E:enabled ...
- 检测浏览器对HTML5和CSS3支持情况的利器——Modernizr
Modernizr是什么? Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库. 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 ...
- Web存储(Web Storage)的浏览器支持情况
所有很酷的功能特征的出现最关键的就是浏览器的支持情况,幸运的是,所有的现代浏览器都支持HTML5 Web存储(Web Storage),从IE8开始也支持它.HTML5 Web存储(Web Stora ...
- WebSocket API使用篇检测浏览器是否支持WebSocket(4)
WebSocket API是下一代客户端-服务器的异步通信方法.前面有三篇文章已经对WebSocket有了一些介绍,这里我总结了一下.我在使用WebSockets API过程中遇到的问题. 1.检测浏 ...
- HTML5 API 浏览器支持情况检测
HTML5发展到现在,虽说没有大规模的普及,但在我们日常生活中,也很容易见到了,HTML5的游戏.网站.应用也是层出不穷.而作为前端人员,也应该多了解这些API为以后应用打基础,下面我将给大家介绍 H ...
- 检测 HTML5\CSS3\JAVASCRIPT 在浏览器的适应情况
CSS3 Selectors Test : 这是CSS3.INFO网站提供的css选择器测试页面,它能够详细显示当前浏览器对所有CSS3选择器的支持情况.启动测试,浏览器会自动测验,并已列表的方式显示 ...
- 关于windows phone 8.1系统手机对html5触摸事件的支持情况
近日购入一部微软Lumia 640手机,目的主要就是为了测试年中开发完成的响应式移动web项目,同时也为了将来升级win10 mobile系统.由于我们的项目目前只考虑支持IOS与Android系统, ...
随机推荐
- PAT (Basic Level) Practise （中文）-1036. 跟奥巴马一起编程(15)
PAT (Basic Level) Practise (中文)-1036. 跟奥巴马一起编程(15) http://www.patest.cn/contests/pat-b-practise/103 ...
- CentOS 6.6 安装nfs网络文件系统
http://www.linuxidc.com/Linux/2015-06/119370.htm ####搭建 http://blog.csdn.net/liumiaocn/article/det ...
- ios retain copy assign相关
assign: 简单赋值,不更改索引计数copy: 建立一个索引计数为1的对象,然后释放旧对象retain:释放旧的对象,将旧对象的值赋予输入对象,再提高输入对象的索引计数为1 Copy其实是建立了一 ...
- JS中Null与Undefined的区别--2015-06-26
在JavaScript中存在这样两种原始类型:Null与Undefined.这两种类型常常会使JavaScript的开发人员产生疑惑,在什么时候是Null,什么时候又是Undefined? Undef ...
- python面向对象编程（OOP）
python作为一种解释性语言,其主要的编程方式就是面向对象,而且python的框架django也是主要面向对象的编程. 类(class)和对象(object) 类(class)是用来描述具有相同属性 ...
- 【Gradle】Downloading https://services.gradle.org/distributions/gradle-3.3-bin.zip 失败
提示连接超时 Downloading https://services.gradle.org/distributions/gradle-3.3-bin.zip 失败 这时候需要单独去官网下载包,然后放 ...
- CSS3-盒模型-resize属性
作用:用来改变元素尺寸大小. 1.resize:none|both|horizontal|vertical|inherit none:不能拖动修改尺寸大小 both:可以拖动元素,修改元素宽高 hor ...
- css3的border-radius属性使用方法
1.border-radius可以包含两个参数值,第一个水平圆角半径,第二个为垂直半径,并且两个参数值用“/”分开. 2.border-radius:设置一个值为四个角都相同,两个值为左上和右下相同, ...
- json数据格式 与 for in
格式一: var json1={ name:'json', age:'23' }; json1.name='金毛'; 格式二: (比较安全) 属性名字里有空格或者有连字符‘-’或者有保留字例如‘fo ...
- PowerShell-第3章 变量与对象
3.1 在变量中存储信息 假如说变量存储了大量数据,且不用了,可以赋值为$null,则可以释放变量占用的内存空间. 3.2 访问环境变量 获得所有环境变量 Get-ChildItem env: 获得某 ...