支持HTML5的各主流浏览器的最低版本

发布网友 发布时间：2022-04-22 23:53

我来回答

共4个回答

热心网友 时间：2022-04-07 12:26

热心网友 时间：2022-04-07 13:44

热心网友 时间：2022-04-07 15:19

HTML5浏览器支持-https://21xrx.com/full_stack/Html/html5_support.html

热心网友 时间：2022-04-07 17:10

HTML5主要新标签属性有以下几个

视频播放标记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标记的出现使开发人员不再依赖于特定第三方技术

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标准引入的元素，下面的代码播放了一段音频，带有控制按钮：

<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</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在页面上绘制线条、图形、添加文字和图像等。

由于HTML5引入的表单控件、属性比较多，这里选取了部分进行了测试，如表5所示。

表5 部分表单元素测试结果

几点说明：

Firefox 4.0将开始支持email、url等表单元素；

自动填充已经作为许多浏览器的一项基本功能存在，与HTML5标准的autocomplete属性需要区别开。

本地客户端存储

Web开发人员经常通过cookie管理客户信息，但是当数据量比较大时，这种方法相对低效，一方面是因为cookie存在大小*，另一方面每次都通过网络请求来传递。HTML5引入两种新的存储方式：

localStorage——没有时间*的数据存储

sessionStorage——针对session的数据存储

下面的例子分别使用LocalStorage和SessionStorge实现了简单计数器，结果如表6所示。

表6 本地客户单存储测试结果

这项功能对Web开发人员来说非常强大，我们来看一下浏览器对sessionStorage和所有测试的浏览器都实现了HTML5的本地客户端存储标记！ 不过，这里要提一下安全性，Web开发人员在使用这些元素时，要时刻谨记存储在客户端的数据可能会被授权使用浏览器的其他人查看甚至修改，所以需要注意保存敏感信息。