html5對各瀏覽器的支持狀況

時間 2019-11-11

原文原文鏈接

考慮到HTML5標準的制定原則：新特性基於HTML、CSS、DOM 以及 JavaScript；減小對外部插件的需求（好比Flash）；獨立於設備等，咱們選取了HTML 5的幾項主要特性來評價瀏覽器系統。javascript

視頻播放標記video
音頻播放標記audio
繪圖標記canvas
表單控件標記url、email等
本地客戶端存儲

瀏覽器（版本）選取html

因爲目前市面上的瀏覽器品牌和版本繁多，咱們難以覆蓋所有產品，所以在這裏設定測試瀏覽器的選擇原則爲：主流品牌、主流版本和最新版本（正式發佈）。依據StatCounter發佈的2011年2~3月份瀏覽器市場佔有率統計分佈狀況，主流品牌如圖1所示。前端

從圖1 中能夠看出，微軟的I n t e r n e tExplorer以其混搭的IE六、IE七、IE八、IE9等多個版本佔據了榜首，開源瀏覽器Firefox緊隨其後，其開放的體系結構也吸引了衆多優秀插件，併成爲Web開發人員的主要開發調試平臺。Google主推的Chrome後來居上，佔據了第三名的位置。java

瀏覽器主流版本分佈狀況如圖2所示。web

圖2 瀏覽器主流版本分佈圖canvas

再加上部分最新瀏覽器版本，咱們選取的所有瀏覽器（版本）如表1所示。瀏覽器

表1 測試瀏覽器安全

HTML5兼容性分析cookie

視頻播放標記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、MP三、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文件

直接包含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開發人員在使用這些元素時，要時刻謹記存儲在客戶端的數據可能會被受權使用瀏覽器的其餘人查看甚至修改，因此須要注意保存敏感信息。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。