HTML5 瀏覽器支持

可以讓一些較早的瀏覽器（不支持HTML5）支持 HTML5。

HTML5 瀏覽器支持

現(xiàn)代的瀏覽器都支持 HTML5。

此外，所有瀏覽器，包括舊的和最新的，對(duì)無法識(shí)別的元素會(huì)作為內(nèi)聯(lián)元素自動(dòng)處理。

正因?yàn)槿绱耍憧梢?"教會(huì)" 瀏覽器處理 "未知" 的 HTML 元素。

	甚至你可以教會(huì) IE6 (Windows XP 2001) 瀏覽器處理未知的 HTML 元素。

將 HTML5 元素定義為塊元素

HTML5 定了 8 個(gè)新的 HTML 語義（semantic） 元素。所有這些元素都是 塊級(jí) 元素。

為了能讓舊版本的瀏覽器正確顯示這些元素，你可以設(shè)置 CSS 的 display 屬性值為 block:

實(shí)例

header, section, footer, aside, nav, main, article, figure{display:block; }

為 HTML 添加新元素

你可以為 HTML 添加新的元素。

該實(shí)例向 HTML 添加的新的元素，并為該元素定義樣式，元素名為 <myHero> ：

實(shí)例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>為 HTML 添加新元素</title><script>

document.createElement("myHero")

</script><style>

myHero{display:block; background-color:#ddd; padding:50px; font-size:30px;}

</style></head><body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p><myHero>我的第一個(gè)新元素</myHero></body></html>

JavaScript 語句 document.createElement("myHero") 是為 IE 瀏覽器添加新的元素。

Internet Explorer 瀏覽器問題

你可以使用以上的方法來為 IE 瀏覽器添加 HTML5 元素，但是：

	Internet Explorer 8 及更早 IE 版本的瀏覽器不支持以上的方式。

我們可以使用 Sjoerd Visscher 創(chuàng)建的 "HTML5 Enabling JavaScript", " shiv" 來解決該問題:

<!--[if lt IE 9]>

<![endif]-->

以上代碼是一個(gè)注釋，作用是在 IE 瀏覽器的版本小于 IE9 時(shí)將讀取 html5.js 文件，并解析它。

注意：國內(nèi)用戶請(qǐng)使用本站靜態(tài)資源庫（Google 資源庫在國內(nèi)不穩(wěn)定）：

<!--[if lt IE 9]>

<![endif]-->

針對(duì)IE瀏覽器html5shiv 是比較好的解決方案。html5shiv主要解決HTML5提出的新的元素不被IE6-8識(shí)別，這些新元素不能作為父節(jié)點(diǎn)包裹子元素，并且不能應(yīng)用CSS樣式。

完美的 Shiv 解決方案

實(shí)例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>渲染 HTML5</title></head><body><h1>我的第一篇文章</h1><article>菜鳥教程 —— 學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！</article></body></html>

html5shiv.js 引用代碼必須放在 <head> 元素中，因?yàn)?IE 瀏覽器在解析 HTML5 新元素時(shí)需要先加載該文件。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

、易用性及代碼簡潔性

HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。新的HTML標(biāo)簽像<header>, <footer>，<nav>，<section>， <aside>等等，使得閱讀者更加容易去訪問內(nèi)容。使用新的語義學(xué)的定義標(biāo)簽，你可以更好的了解HTML文檔，并且創(chuàng)建一個(gè)更好的使用體驗(yàn)。

ARIA是一個(gè)W3C的標(biāo)準(zhǔn)主要用來對(duì)HTML文章中的元素指定“角色“，通過角色屬性來創(chuàng)建重要的頁面地形例如,header，footer，navigation或者aritcle很有必要。這一點(diǎn)曾經(jīng)被忽略掉了并且沒有被廣泛使用，因?yàn)槭聦?shí)上并不驗(yàn)證。然而，HTML5將會(huì)驗(yàn)證這樣屬性。同時(shí)，HTML5將會(huì)內(nèi)建這些角色并且無法不覆蓋。

二、本地存儲(chǔ)特性

HTML5中最酷的特性就是本地存儲(chǔ)。有一點(diǎn)像比較老的技術(shù)cookie和客戶端數(shù)據(jù)庫的融合。它比cooke更好用因?yàn)橹С侄鄠€(gè)windows存儲(chǔ)，它擁有更好的安全和性能，即使瀏覽器關(guān)閉后也可以保存。

因?yàn)樗莻€(gè)客戶端的數(shù)據(jù)庫，你不用擔(dān)心用戶刪除任何cookie，并且所有主流瀏覽器都支持。

本地存儲(chǔ)對(duì)于很多情況來說都不錯(cuò)，它是HTML5工具中一個(gè)不需要第三方插件實(shí)現(xiàn)的。能夠保存數(shù)據(jù)到用戶的瀏覽器中意味你可以簡單的創(chuàng)建一些應(yīng)用特性例如：保存用戶信息，緩存數(shù)據(jù)，加載用戶上一次的應(yīng)用狀態(tài)。如果你對(duì)本地存儲(chǔ)有興趣，你可以看看這些文章

三、設(shè)備兼容特性（跨瀏覽器）

從Geolocation功能的API文檔公開以來，HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗(yàn)功能的優(yōu)勢(shì)

這里有很多的meta標(biāo)簽允許你優(yōu)化移動(dòng)：

viewport: 允許你定義viewport寬度和縮放設(shè)置
全屏瀏覽器： ISO指定的數(shù)值允許Apple設(shè)備全屏模式顯示
Home screen icons: 就像桌面收藏，這些圖標(biāo)可以用來添加收藏到IOS和Android移動(dòng)設(shè)備的首頁

四、網(wǎng)頁媒體特性更好的支持音、視頻

支持網(wǎng)頁端的Audio、Video等多媒體功能；在發(fā)布HTML5之前你需要使用<embed>和<object>標(biāo)簽，并且為了它們能正確播放必須賦予一大堆的參數(shù)。你的媒體標(biāo)簽將會(huì)非常復(fù)雜，大堆得令人迷惑的代碼。而且HTML5視頻和音頻標(biāo)簽基本將他們視為圖片：<video src=""/>。但是其它參數(shù)例如寬度和高度或者自動(dòng)播放呢？不必?fù)?dān)心，只需要像其它HTML標(biāo)簽一樣定義：<video src=”url” width=”640px” height=”380px” autoplay/>。

<video src="movie.ogg" controls="controls">
您的瀏覽器不支持 video 標(biāo)簽。
</video>

五、三維、圖形及特效特性

基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會(huì)驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果，用戶使用<canvas>可以開發(fā)游戲。<canvas>元素本身不具備繪制能力，依靠腳本來完成

當(dāng)然HTML5還有諸多特性，以上簡單的總結(jié)了一些。更多特效及用法參考w3school提供的手冊(cè)；現(xiàn)在網(wǎng)絡(luò)上HTML5相關(guān)的視頻教程數(shù)不勝數(shù)。極客還有慕課都是很不錯(cuò)的

需要幫助可以關(guān)注公眾號(hào)：伙拼學(xué)習(xí)

TML5是HTML最新的修訂版本，由萬維網(wǎng)聯(lián)盟（W3C）于2014年10月完成標(biāo)準(zhǔn)制定。目標(biāo)是取代1999年所制定的HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)，以期能在網(wǎng)際網(wǎng)路應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)路標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)路需求。廣義論及HTML5時(shí)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少網(wǎng)頁瀏覽器對(duì)于需要外掛程式的豐富性網(wǎng)路應(yīng)用服務(wù)（Plug-in-Based Rich Internet Application，RIA），例如：Adobe Flash、Microsoft Silverlight與Oracle JavaFX的需求，并且提供更多能有效加強(qiáng)網(wǎng)路應(yīng)用的標(biāo)準(zhǔn)集。

HTML5添加了許多新的語法特征，其中包括<video>、<audio>和<canvas>元素，同時(shí)整合了SVG內(nèi)容。這些元素是為了更容易的在網(wǎng)頁中添加和處理多媒體和圖片內(nèi)容而添加的。其它新的元素如<section>、<article>、<header>和<nav>則是為了豐富文檔的數(shù)據(jù)內(nèi)容。新的屬性的添加也是為了同樣的目的。同時(shí)也有一些屬性和元素被移除掉了。一些元素，像<a>、<cite>和<menu>被修改，重新定義或標(biāo)準(zhǔn)化了。同時(shí)APIs和DOM已經(jīng)成為HTML5中的基礎(chǔ)部分了。HTML5還定義了處理非法文檔的具體細(xì)節(jié)，使得所有瀏覽器和客戶端程序能夠一致地處理語法錯(cuò)誤。

發(fā)展歷史

網(wǎng)頁超文本技術(shù)工作小組（WHATWG）于2004年開始制定新標(biāo)準(zhǔn)。在當(dāng)時(shí)，HTML 4.01自2000年來沒有更新，以及全球資訊網(wǎng)協(xié)會(huì)（W3C）正在將未來的發(fā)展重點(diǎn)放在XHTML 2.0。2009年，W3C允許XHTML 2.0工作組章程結(jié)束過期并且決定不再續(xù)訂。W3C與WHATWG合作共同為發(fā)展HTML5而努力。

2004年6月，Mozilla基金會(huì)和Opera軟體公司在全球資訊網(wǎng)協(xié)會(huì)（W3C）所主辦的研討會(huì)上提出了一份立場文件，其重點(diǎn)是開發(fā)與現(xiàn)有瀏覽器向后相容的技術(shù)，包括Web Forms 2.0最初草案規(guī)范。研討會(huì)最后以——8票贊成，14票反對(duì)——否決繼續(xù)對(duì)HTML的開發(fā)工作。這引起一些人的不滿，在研討會(huì)之后，網(wǎng)頁超文本技術(shù)工作小組（WHATWG）立即根據(jù)該立場文件成立，第二個(gè)草案，Web Applications 1.0也公布了。后來這兩種規(guī)范合并形成HTML5。2007年，獲得W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。2008年1月22日，第一份公開工作草案發(fā)布。

盡管HTML5已經(jīng)在網(wǎng)絡(luò)開發(fā)人員中非常出名了，但是它成為主流媒體的一個(gè)話題是在2010年的4月，當(dāng)時(shí)蘋果公司的CEO喬布斯發(fā)表一篇題為“對(duì)Flash的思考”的文章，指出隨著HTML5的發(fā)展，觀看影片或其它內(nèi)容時(shí)，Adobe Flash將不再是必須的。這引發(fā)了開發(fā)人員間的爭論，包括HTML5雖然提供了加強(qiáng)的功能，但開發(fā)人員必須考慮到不同瀏覽器對(duì)標(biāo)準(zhǔn)不同部分的支持程度的不同，以及HTML5和Flash間的功能差異。

特點(diǎn)

標(biāo)記

HTML5提供了一些新的元素和屬性，反映典型的現(xiàn)代用法網(wǎng)站。其中有些是技術(shù)上類似<div>和<span>標(biāo)簽，但有一定含義，例如<nav>（網(wǎng)站導(dǎo)航塊）和<footer>。這種標(biāo)簽將有利于搜索引擎的索引整理、小螢?zāi)谎b置和視障人士使用。同時(shí)為其他瀏覽要素提供了新的功能，通過一個(gè)標(biāo)準(zhǔn)接口，如<audio>和<video>標(biāo)記。一些過時(shí)的HTML 4.01標(biāo)記將取消，其中包括純粹用作顯示效果的標(biāo)記，如<font>和<center>，因?yàn)樗鼈円呀?jīng)被CSS取代。還有一些透過DOM的網(wǎng)絡(luò)行為。

盡管和SGML在標(biāo)記上的相似性，HTML5的句法并不再基于它了，而是被設(shè)計(jì)成向后兼容對(duì)老版本的HTML的解析。它有一個(gè)新的開始列看起來就像SGML的文檔類型聲明，<!DOCTYPE HTML>，這會(huì)觸發(fā)和標(biāo)準(zhǔn)兼容的渲染模式。在2009年1月5日，HTML5添加了Web Form 2.0的內(nèi)容，HTML5開始發(fā)展起來。

新的API

HTML5相關(guān)APIs

除了原先的DOM接口，HTML5增加了更多樣化的應(yīng)用程序接口（API）：

Canvas

定時(shí)媒體播放

離線

可編輯內(nèi)容

拖放

歷史

MIME和協(xié)議處理程序時(shí)表頭登記

微數(shù)據(jù)

網(wǎng)路訊息

網(wǎng)路存儲(chǔ)

以上技術(shù)盡管是WHATWG HTML說明文檔的內(nèi)容，但并沒有全部包括在W3C HTML5的說明文檔里。一些相關(guān)的技術(shù)，像下面所列的，并沒有包括在這2份文檔中的任何一份中。W3C給這些技術(shù)單獨(dú)出版了說明文檔。

地理位置

網(wǎng)頁SQL數(shù)據(jù)庫 ─ 本地SQL數(shù)據(jù)庫（不再維護(hù)）

IndexedDB

文件─ 處理文件上傳和操縱文件

目錄和文件系統(tǒng) ─ 這個(gè)API是為了滿足客戶端在沒有好的數(shù)據(jù)庫支持情況下存儲(chǔ)要求

文件寫入 ─ 從網(wǎng)絡(luò)應(yīng)用程序向文件里寫內(nèi)容

網(wǎng)路音頻

ClassList

網(wǎng)路加密

WebRTC

一個(gè)普遍的誤解是HTML5能夠在網(wǎng)頁中提供動(dòng)畫效果，這是不對(duì)的，動(dòng)畫效果是需要配合JavaScript和CSS。然而靜態(tài)HTML5配合CSS可以表示出覆雜的排版結(jié)構(gòu)而且原生支援與影片的混合與控制（控制一般由JavaScript執(zhí)行），因此簡單可以把HTML5單位時(shí)間的狀態(tài)理解為動(dòng)畫的關(guān)鍵影格。

XHTML5（XML-serialized HTML5）

XHTML5是對(duì)HTML5的XML序列化。XML文檔必須被設(shè)置為XML互聯(lián)網(wǎng)文件類型，像application/xhtml+xml或者application/xml。XHTML5要求像XML一樣嚴(yán)格的格式化的語法。在XHTML5中，HTML5的<!DOCTYPE HTML>可有可無的。

XHTML5并非XHTML的第5版，沒有自己獨(dú)立的標(biāo)準(zhǔn)規(guī)范，而是HTML5的一種序列化方式。XHTML1.x和2.0使用的名字是Extensible HyperText Markup Language，不同于XHTML5。

異常處理

HTML5在設(shè)計(jì)時(shí)保證舊的瀏覽器能夠安全地忽略掉新的HTML5代碼。與HTML4.01相比，HTML5給出了解析的完整規(guī)則，讓不同的瀏覽器即使在發(fā)生語法錯(cuò)誤時(shí)也能返回完全相同的結(jié)果。

普及率

根據(jù)2011年9月30日發(fā)布的一份報(bào)告，全球排名前100的網(wǎng)站中有34個(gè)網(wǎng)站使用HTML5──主要是搜尋引擎與社群網(wǎng)站。2013年8月發(fā)布的另一份報(bào)告顯示，財(cái)富美國500強(qiáng)企業(yè)中已有多達(dá)153家采用HTML5。

HTML 4.01和XHTML 1.x的差異

以下為大略的不同之處，與例子：

文件類型聲明（<!DOCTYPE>）僅有一型：<!DOCTYPE HTML>。

新的解析順序：不再基于SGML。

新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。

input元素的新類型：date, email, url等等。

新的屬性：ping（用于a與area）, charset（用于meta）, async（用于script）。

全域?qū)傩裕篿d, tabindex, repeat。

新的全域?qū)傩裕篶ontenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。

移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。

在線咨詢

上一篇：如何使用郵件存檔？郵件備份功能講解
下一篇：「代碼分享」創(chuàng)建HTML文件

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5 瀏覽器支持

您的項(xiàng)目需求