什麼是HTML5

時間 2019-12-02

標籤什麼 html5 html 欄目 HTML5 简体版

原文原文鏈接

設計目的

HTML5的設計目的是爲了在移動設備上支持多媒體。新的語法特徵被引進以支持這一點，如video、audio和canvas 標記。HTML5還引進了新的功能，能夠真正改變用戶與文檔的交互方式，包括：

· 新的解析規則加強了靈活性

· 新屬性

· 淘汰過期的或冗餘的屬性

· 一個HTML5文檔到另外一個文檔間的拖放功能

· 離線編輯

· 信息傳遞的加強

· 詳細的解析規則

· 多用途互聯網郵件擴展（MIME）和協議處理程序註冊

· 在SQL數據庫中存儲數據的通用標準（Web SQL）

HTML5在2007年被萬維網聯盟(W3C)新的工做組採用。這個工做組在2008年1月發佈了HTML 5的首個公開草案。眼下，HTML5處於「呼籲審查」狀態，W3C預期它將在2014年年末達到其最終狀態。

特性

語義特性（Class：Semantic）

HTML5賦予網頁更好的意義和結構。更加豐富的標籤將隨着對 RDFa的，微數據與微格式等方面的支持，構建對程序、對用戶都更有價值的數據驅動的Web。

本地存儲特性（Class: OFFLINE & STORAGE）

基於HTML5開發的網頁 APP擁有更短的啓動時間，更快的聯網速度，這些全得益於HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術之一）和 API說明文檔。

設備兼容特性 (Class: DEVICE ACCESS)

從 Geolocation功能的API文檔公開以來，HTML5爲網頁應用開發者們提供了更多功能上的優化選擇，帶來了更多體驗功能的優點。HTML5提供了史無前例的數據與應用接入開放接口。使外部應用能夠直接與瀏覽器內部的數據直接相連，例如視頻影音可直接與microphones及攝像頭相聯。

鏈接特性（Class: CONNECTIVITY）

更有效的鏈接工做效率，使得基於頁面的實時聊天，更快速的網頁遊戲體驗，更優化的在線交流獲得了實現。HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性可以幫助咱們實現服務器將數據「推送」到客戶端的功能。

網頁 多媒體 特性(Class: MULTIMEDIA)

支持網頁端的Audio、Video等多媒體功能，與網站自帶的APPS，攝像頭，影音功能相得益彰。

三維、圖形及特效特性（Class: 3D, Graphics & Effects）

基於SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚歎於在瀏覽器中，所呈現的驚人視覺效果。

性能與集成特性（Class: Performance & Integration）

沒有用戶會永遠等待你的Loading——HTML5會經過 XMLHttpRequest2等技術，解決之前的跨域等問題，幫助您的Web應用和網站在多樣化的環境中更快速的工做。

CSS3特性(Class: CSS3)

在不犧牲性能和語義結構的前提下， CSS3中提供了更多的風格和更強的效果。此外，較之之前的Web排版，Web的開放字體格式（ WOFF）也提供了更高的靈活性和控制性。

沿革

HTML5提供了一些新的元素和屬性，例如<nav>（網站導航塊）和<footer>。這種標籤將有利於搜索引擎的索引整理，同時更好的幫助小屏幕裝置和視障人士使用，除此以外，還爲其餘瀏覽要素提供了新的功能，如<audio>和<video>標記。

一、取消了一些過期的 HTML4標記

其中包括純粹顯示效果的標記，如< font>和<center>，它們已經被CSS取代。

HTML5 吸收了 XHTML2 一些建議，包括一些用來改善文檔結構的功能，好比，新的HTML 標籤 header, footer, dialog, aside, figure 等的使用，將使內容創做者更加語義地建立文檔，以前的開發者在實現這些功能時通常都是使用 div。

二、將內容和展現分離

b 和 i 標籤依然保留，但它們的意義已經和以前有所不一樣，這些標籤的意義只是爲了將一段文字標識出來，而不是爲了爲它們設置粗體或斜體式樣。u，font，center，strike 這些標籤則被徹底去掉了。

三、一些全新的表單輸入對象

包括日期，URL，Email 地址，其它的對象則增長了對非拉丁字符的支持。HTML5 還引入了微數據，這一使用機器能夠識別的標籤標註內容的方法，使語義Web 的處理更爲簡單。總的來講，這些與結構有關的改進使內容建立者能夠建立更乾淨，更容易管理的網頁，這樣的網頁對搜索引擎，對讀屏軟件等更爲友好。

四、全新的，更合理的Tag

多媒體對象將再也不所有綁定在 object或 embed Tag 中，而是視頻有視頻的Tag，音頻有音頻的 Tag。

五、本地數據庫

這個功能將內嵌一個本地的SQL 數據庫，以加速交互式搜索，緩存以及索引功能。同時，那些離線Web 程序也將所以獲益匪淺。不須要插件的豐富動畫。

六、Canvas 對象

將給瀏覽器帶來直接在上面繪製矢量圖的能力，這意味着用戶能夠脫離Flash 和Silverlight，直接在瀏覽器中顯示圖形或動畫。

七、瀏覽器中的真正程序

將提供 API 實現瀏覽器內的編輯，拖放，以及各類圖形用戶界面的能力。內容修飾Tag 將被剔除，而使用CSS。

八、Html5取代Flash在移動設備的地位。

九、其突出的特色就是強化了web頁的表現性,追加了本地數據庫,

規範

HTML5和Canvas 2D規範的制定已經完成，儘管還不能算是 W3C標準，可是這些規範已經功能完整，企業和開發人員有了一個穩定的執行和規劃目標。

W3C首席執行官Jeff Jaffe表示：「從今天起，企業用戶能夠清楚地知道，他們可以在將來依賴HTML5。」HTML5是開放Web標準的基石，它是一個完整的編程環境，適用於跨平臺應用程序、視頻和動畫、圖形、風格、排版和其它數字內容發佈工具、普遍的網絡功能等等。

爲了減小瀏覽器碎片、實現於全部HTML工具的應用， W3C從今天開始着手W3C標準化的互操做性和測試。和以前宣佈的規劃同樣， W3C計劃在2014年完成HTML5標準。

HTML工做組還發布了HTML5.一、HTML Canvas 2D Context、Level 2以及主要元素的草案，讓開發人員能提早預覽下一輪標準。

應用須知

它可能會消滅Flash

許多業內人士表示，HTML將會最終代替多媒體框架，如 Adobe的 Flash，可是短時間看來還不是時候。HTML5估計到2014年才能逐步成熟，並且將現有應用Flash的網絡開發徹底轉向HTML5還須要一段時間。儘管HTML5提出了許多優勢，可是還可能有某些應用更適合於更靈活的框架。一些主流的大公司都逐步轉向使用HTML5，谷歌於2015年2月26日開始自動將Flash廣告轉換爲HTML5格式，這可能會加速HTML5替代Flash的進程，可是這個轉變的過程也不是一蹴而就的。

它新並不表示它安全

網絡應用開發工程師們在學習新技術的同時須要時刻記住網絡安全。 HTML5所構建的網頁和其餘語言編寫的網頁同樣容易泄露一些敏感數據。歐洲網絡信息安全機構（European Network and Information Security Agency，ENISA）已經警告說HTML5可能並不夠安全。

它承諾帶來一個無縫的網絡

HTML5會帶來一個統一的網絡，不管是筆記本，臺式機，仍是智能手機都應該很方便的瀏覽基於HTML5的網站。所以在設計網站的時候，開發者須要從新考慮用戶體驗，網站瀏覽，網站結構等因素使得這個網站對任何硬件設備都通用。

它會變成企業的SaaS平臺

一些重量級的企業，如微軟，Salesforce，SAP Sybase正在開發HTML5的開發工具。若是你正在構建企業應用，極可能不久的未來你就要用到HTML5。因此當構建公司的SaaS戰略遷移的時候也不要忘記HTML5。

它將會變得很移動

幾乎全部人都熱衷於開發獨立的移動應用，可是HTML5極可能會是獨立移動應用的終結者。因爲HTML5將應用的功能直接加入其內核，這極可能引導移動技術潮流從新回到瀏覽器時代。HTML5容許開發者在（移動）瀏覽器內開發應用，因此若是你正在制定一項桌面或者移動應用的長期發展策略，你可能須要考慮這一點。

漏洞

2013年3月，HTML5標記語言的一個漏洞被發現：它容許網站利用數GB垃圾數據對用戶展開轟炸，甚至會在短期內將硬盤塞滿。多款主流瀏覽器均會受此影響。

一位名叫菲羅斯·阿伯克哈迪傑哈(Feross Aboukhadijeh)的開發者率先發現了這一漏洞，他表示，多數主流網絡瀏覽器均會受到影響，包括蘋果 Safari、谷歌 Chrome、微軟IE和Opera。惟一可以阻止數據大量加載的是 Mozilla的火狐瀏覽器，該產品的數據存儲上限爲5MB。

該問題的根源在於HTML5存儲本地數據的方式。雖然每一個瀏覽器都有不一樣的存儲參數，但不少都支持用戶自定義限制，且至少會在用戶電腦上存儲2.5MB數據。

阿伯克哈迪傑哈發現了一個繞過數據上限的方法，它建立了多個與用戶訪問過的網站連接的臨時網站。因爲多數瀏覽器不會計算這種偶然狀況，因此二級網站也能夠存儲與主網站相同量的數據。經過大批生成這種網站，該漏洞即可向受影響的電腦加載海量數據。

在測試這一漏洞的過程當中，阿伯克哈迪傑哈每16秒便可向他的固態硬盤版MacBook Pro中加載1GB數據。他指出，Chrome等32位瀏覽器可能會在硬盤塞滿前崩潰。「一些採用高明代碼的網站其實已經取消了用戶電腦對數據存儲的限制。」阿伯克哈迪傑哈說。阿伯克哈迪傑哈已經發布一組代碼來利用該漏洞，並建立了一個名爲Filldisk的專用網站來凸顯該漏洞的危害。

優勢缺點

網絡標準

HTML5自己是由W3C推薦出來的，它的開發是經過谷歌、蘋果，諾基亞、中國移動等幾百家公司一塊兒醞釀的技術，這個技術最大的好處在於它是一個公開的技術。換句話說，每個公開的標準均可以根據 W3C的資料庫找尋根源。另外一方面，W3C經過的HTML5標準也就意味着每個瀏覽器或每個平臺都會去實現。

多設備跨平臺

用HTML5的優勢主要在於，這個技術能夠進行跨平臺的使用。好比你開發了一款HTML5的遊戲，你能夠很輕易地移植到UC的開放平臺、Opera的遊戲中心、 Facebook應用平臺，甚至能夠經過封裝的技術發放到App Store或Google Play上，因此它的跨平臺性很是強大，這也是大多數人對HTML5有興趣的主要緣由。

自適應網頁設計

很早就有人設想，能不能「一次設計，廣泛適用」，讓同一張網頁自動適應不一樣大小的屏幕，根據屏幕寬度，自動調整佈局（layout）。

2010年，Ethan Marcotte提出了」自適應網頁設計「這個名詞，指能夠自動識別屏幕寬度、並作出相應調整的網頁設計。

這就解決了傳統的一種局面——網站爲不一樣的設備提供不一樣的網頁，好比專門提供一個mobile版本，或者iPhone / iPad版本。這樣作當然保證了效果，可是比較麻煩，同時要維護好幾個版本，並且若是一個網站有多個portal（入口），會大大增長架構設計的複雜度。

即時更新

遊戲客戶端每次都要更新，很麻煩。但是更新HTML5遊戲就好像更新頁面同樣，是立刻的、即時的更新。

總結歸納HTML5有如下優勢：

一、提升可用性和改進用戶的友好體驗；

二、有幾個新的標籤，這將有助於開發人員定義重要的內容；

三、能夠給站點帶來更多的多媒體元素(視頻和音頻)；

四、能夠很好的替代FLASH和Silverlight；

五、當涉及到網站的抓取和索引的時候，對於 SEO很友好；

六、將被大量應用於移動應用程序和遊戲；

七、可移植性好。

缺點：

該標準並未能很好的被瀏覽器所支持。因新標籤的引入，各瀏覽器之間將缺乏一種統一的數據描述格式，形成用戶體驗不佳。

爭議

HTML5在誕生以後，就樹立了一個原則，那就是全部的技術必須是開放的，不許有專利限制，在這期間Opera捐獻了CSS技術，而 Google則提供了視頻格式 WebM。

能夠說大部分的HTML協議在衆多網絡技術公司中達成共識，但在視頻格式方面，世界各大互聯網公司正在爲具體標準進行爭論，這可能影響HTML5標準的分流。紛爭的兩大陣營分別是Opera、火狐、Google等，另外一大陣營則由蘋果公司領銜。

MPEG陣營認爲WebM格式是具備專利保護的，這違背了HTML5全部技術必須開放的原則。MPEG陣營則更多地是由於自身就在使用這種視頻格式。

發展趨勢

HTML5規範開發完成時，將成爲主流。

據統計2013年全球將有10億手機瀏覽器支持HTML5，同時HTML Web開發者數量將達到200萬。毫無疑問，HTML5將成爲將來5-10年內，移動互聯網領域的主宰者。

據IDC的調查報告統計，截至2012年5月，有79%的移動開發商已經決定要在其應有程序中整合HTML5技術。

12月，萬維網聯盟宣佈已經完成對HTML5標準以及Canvas 2D性能草案的制定，這就意味着開發人員將會有一個穩定的「計劃和實施」目標。有不少的文章都在號召使用HTML5，並大力宣傳它的好處。此前，站長之家曾經作過一期調查，調查顯示只有36.16%的站長正在學習中，另外的63.76%表示正在觀望中。做爲站長，你是否準備開始學習HTML5？

從性能角度來講，HTML5首先是縮減了 HTML文檔，使這件事情變得更簡單。從用戶可讀性上說，原先一大堆東西對初學者來講，第一次看到這些東西是看不懂的，而HTML5的聲明方式對用戶來講顯然更友好一些。

將來趨勢

一、移動優先

從現在層出不窮的移動應用就知道，在這個智能手機和將平板電腦大爆炸的時代，移動優先已成趨勢，無論是開發什麼，都以移動爲主。

二、遊戲開發者領銜「主演」

許多遊戲開發商都被Facebook或者Zynga推進着發展，而將來的 Facebook應用生態系統是基於HTML5的，儘管在HTML 5平臺開發出遊戲很是困難，但遊戲開發商卻都願意那麼作。經過PhoneGap及appmobi的XDK將Web應用遊戲打包整合到原生應用中也是一種方式，Facebook差很少就這麼幹的——基於Web應用及瀏覽器，但卻將之打包整合進原生應用。

三、2014計劃

2012年9月，W3C提出計劃要在2014年末前發佈一個HTML5推薦標準，並在2016年末前發佈HTML5.1推薦標準。

盈利方案

第一個解決方案，現有的盈利模式能夠移植到HTML5，今天遊戲開發者經過跟蘋果App Store合做很是賺錢，其實HTML5的模式也能夠經過封裝把遊戲放到App Store同樣的分紅賺錢。

第二個解決方案，HTML5遊戲能夠「傍着」平臺，比方說Opera的遊戲平臺或其它瀏覽器的平臺，以及所謂雲遊戲的遊戲平臺，都是新的盈利模式的平臺。

第三個解決方案，在談到HTML5遊戲與原生應用的表現性能比時，開發者須要考慮清楚要作的到底是怎樣一款遊戲，HTML5更適合輕量級的小遊戲。並且HTML5在代碼保密性方面並不弱於原生應用。

第四個解決方案，前面3個都是以HTML5遊戲或者應用的形式爲贏利點，其實任何技術形態最終都是同樣，本質上都是服務於人（包含我的、企業），只要能知足需求的業務組合都是盈利的方向，例如目前催生的微信網站、HTML5營銷、HTML5外包 ^[2] 等，都是知足現實需求的盈利方案

新元素

自1999年之後HTML 4.01 已經改變了不少，今天，在HTML 4.01中的幾個已經被廢棄，這些元素在HTML5中已經被刪除或從新定義。

爲了更好地處理今天的互聯網應用，HTML5添加了不少新元素及功能，好比：圖形的繪製，多媒體內容，更好的頁面結構，更好的形式處理，和幾個api拖放元素，定位，包括網頁應用程序緩存，存儲，網絡工做者，等。

canvas

標籤	描述
<canvas>	標籤訂義圖形，好比圖表和其餘圖像。該標籤基於 JavaScript 的繪圖 API

多媒體

標籤	描述
<audio>	定義音頻內容
<video>	定義視頻（video 或者 movie）
<source>	定義多媒體資源 <video> 和 <audio>
<embed>	定義嵌入的內容，好比插件。
<track>	爲諸如 <video> 和 <audio> 元素之類的媒介規定外部文本軌道。

表單

標籤	描述
<datalist>	定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
<keygen>	規定用於表單的密鑰對生成器字段。
<output>	定義不一樣類型的輸出，好比腳本的輸出。

語義和結構

HTML5提供了新的元素來建立更好的頁面結構：

標籤	描述
<article>	定義頁面的側邊欄內容
<aside>	定義頁面內容以外的內容。
<bdi>	容許您設置一段文本，使其脫離其父元素的文本方向設置。
<command>	定義命令按鈕，好比單選按鈕、複選框或按鈕
<details>	用於描述文檔或文檔某個部分的細節
<dialog>	定義對話框，好比提示框
<summary>	標籤包含 details 元素的標題
<figure>	規定獨立的流內容（圖像、圖表、照片、代碼等等）。
<figcaption>	定義 <figure> 元素的標題
<footer>	定義 section 或 document 的頁腳。
<header>	定義了文檔的頭部區域
<mark>	定義帶有記號的文本。
<meter>	定義度量衡。僅用於已知最大和最小值的度量。
<nav>	定義運行中的進度（進程）。
<progress>	定義任何類型的任務的進度。
<ruby>	定義 ruby 註釋（中文註音或字符）。
<rt>	定義字符（中文註音或字符）的解釋或發音。
<rp>	在 ruby 註釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容。
<section>	定義文檔中的節（section、區段）。
<time>	定義日期或時間。
<wbr>	規定在文本中的何處適合添加換行符。

已移除元素

如下的 HTML 4.01 元素在HTML5中已經被刪除:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

技術要點

重要標記

<video>標記

定義和用法：

</video> 標籤訂義視頻，好比電影片斷或其餘視頻流。

<audio> 標記

定義和用法

</audio> 標籤訂義聲音，好比音樂或其餘音頻流。

實例：

一段簡單的HTML5 音頻

您的瀏覽器不支持 audio 標籤。

</audio>

<canvas> 標記

定義和用法：

<canvas> 標籤訂義圖形，好比圖表和其餘圖像。

HTML5 的 canvas 元素使用JavaScript 在網頁上繪製圖像。

畫布是一個矩形區域，您能夠控制其每一像素。

canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

實例：

經過 canvas 元素來顯示一個紅色的矩形：

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

</script>

程序接口

除了原先的 DOM接口，HTML5增長了更多 API,如：

1．用於即時2D繪圖的 Canvas標籤

2．定時媒體回放

3．離線數據庫存儲

4．文檔編輯

5．拖拽控制

6．瀏覽歷史管理

元素變化

新的解析順序新的元素：section, video, progress, nav, meter, time, aside, canvasinput

元素的新屬性：日期和時間，email, url。

新的通用屬性：ping, charset, async

全域屬性：id, tabindex, repeat。

移除元素：center, font, strike。

控件

就是Html標註的屬性里加上runat="server"所構成的控件，至於Html標註和Html控件之間的區別很明顯，Html控件是運行於服務器端，Html標註是運行於客戶端。

基本Html控件有：HtmlTexArea\HtmlTable\HtmlImage\HtmlButton\HtmlSelect\HtmlForm\HtmlInput。

自定義的Html控件是根據本身的需求定義。當自主開發效率低，能夠從技術社區、源碼網站下載須要的控件。好比，須要插入table, image, links 等標籤。沒必要本身開發，可使用：ComponentOne Wijmo Editor等。

免費HTML5圖表庫——.Net圖表控件Chart FX，深受你們喜好，相信你們已經很是熟悉了。並且還從Chart FX的開發商SoftwareFX得到一個激動人心的消息：該公司已推出一套爲HTML5，jQuery和JavaScript開發者設計的圖表庫—— jChartFX，並且jChartFX是免費的！

圖表庫

.Net圖表控件Chart FX相信你們已經很是熟悉了。Chart FX的開發商SoftwareFX推出的一套爲HTML五、jQuery和JavaScript開發者設計的免費HTML5圖表庫——jChartFX！

jChartFX亮點：

jChartFX充分利用了HTML5，CSS和SVG，讓您可以在瀏覽器提供美觀優越的圖表和更豐富的最終用戶體驗。
jChartFX擁有不少使人振奮的功能，它在無插件純JavaScript的瀏覽器上運行，這意味着在提升了網站安全性和速度的同時，最大程度的減小了網站服務器的負荷。
jChartFX還可以自動整合到jQuery UI ThemeRoller，自動讀取並解釋jQuery的主題和CSS文件，可以快速適應您的頁面佈局和設計，無需一行代碼。
jChartFX支持JSON，JSON可以幫助您實現，任何數據源中的數據均可以展示到圖表中。
jChartFX還支持超過40種的2D、3D圖表類型，免費的圖表控件中支持如此之多的圖表展現類型實屬可貴。

按字母順序排列的標籤列表
標籤	描述
<!--...-->	定義註釋	4	5
< !DOCTYPE>	定義文檔類型	4	5
<a>	定義超連接	4	5
<abbr>	定義縮寫	4	5
< acronym>	HTML 5 中不支持	4
<address>	定義地址元素	4	5
<applet>	定義 applet（HTML 5 中不支持）	4
<area>	定義圖像映射中的區域	4	5
<article>	定義 article		5
<aside>	定義頁面內容以外的內容		5
<audio>	定義聲音內容		5
<b>	定義粗體文本	4	5
<base>	定義頁面中全部連接的基準URL	4	5
< basefont>	HTML 5 中不支持，請使用CSS 代替	4
<bdo>	定義文本顯示的方向	4	5
<big>	定義大號文本（HTML 5 中不支持）	4
<blockquote>	定義長的引用	4	5
<body>	定義 body 元素	4	5
<br>	插入換行符	4	5
<button>	定義按鈕	4	5
<canvas>	定義圖形		5
<caption>	定義表格標題	4	5
<center>	定義居中的文本（HTML 5 中不支持）	4
<cite>	定義引用	4	5
<code>	定義計算機代碼文本	4	5
<col>	定義表格列的屬性	4	5
<colgroup>	定義表格列的分組	4	5
<command>	定義命令按鈕		5
<datalist>	定義下拉列表		5
<dd>	定義定義的描述	4	5
<del>	定義刪除文本	4	5
<details>	定義元素的細節		5
<dfn>	定義定義項目	4	5
<dir>	定義目錄列表（HTML 5 中不支持）	4
<div>	定義文檔中的一個部分	4	5
<dl>	定義定義列表	4	5
<dt>	定義定義的項目	4	5
<em>	定義強調文本	4	5
<embed>	定義外部交互內容或插件		5
<fieldset>	定義 fieldset	4	5
<figcaption>	定義 figure 元素的標題		5
<figure>	定義媒介內容的分組，以及它們的標題		5
<font>	HTML 5 中不支持	4
<footer>	定義 section 或 page 的頁腳		5
<form>	定義表單	4	5
<frame>	定義子窗口（框架）（HTML 5 中不支持）	4
<frameset>	定義框架的集（HTML 5 中不支持）	4
<h1> to <h6>	定義標題1 到標題6	4	5
<head>	定義關於文檔的信息	4	5
<header>	定義 section 或 page 的頁眉		5
<hgroup>	定義有關文檔中的 section 的信息	4	5
<html>	定義 html 文檔	4	5
<i>	定義斜體文本	4	5
<iframe>	定義行內的子窗口（框架）	4	5
<img>	定義圖像	4	5
<input>	定義輸入域	4	5
<ins>	定義插入文本	4	5
<keygen>	定義生成密鑰		5
<isindex>	定義單行的輸入域（HTML 5 中不支持）	4
<kbd>	定義鍵盤文本	4	5
<label>	定義表單控件的標註	4	5
<legend>	定義 fieldset 中的標題	4	5
<li>	定義列表的項目	4	5
<link>	定義資源引用	4	5
<map>	定義圖像映射	4	5
<mark>	定義有記號的文本	4	5
<menu>	定義菜單列表	4	5
<meta>	定義元信息	4	5
<meter>	定義預約義範圍內的度量		5
<nav>	定義導航連接		5
<noframes>	定義 noframe 部分（HTML 5 中不支持）	4
<noscript>	定義 noscript 部分	4	5
<object>	定義嵌入對象	4	5
<ol>	定義有序列表	4	5
<optgroup>	定義選項組	4	5
<option>	定義下拉列表中的選項	4	5
<output>	定義輸出的一些類型		5
<p>	定義段落	4	5
<param>	爲對象定義參數	4	5
<pre>	定義預格式化文本	4	5
<progress>	定義任何類型的任務的進度		5
<q>	定義短的引用	4	5
<rp>	定義若瀏覽器不支持 ruby 元素顯示的內容		5
<rt>	定義 ruby 註釋的解釋		5
<ruby>	定義 ruby 註釋		5
<s>	定義加刪除線的文本（HTML 5 中不支持）	4
<samp>	定義樣本計算機代碼	4	5
<script>	定義腳本	4	5
<section>	定義 section	4	5
<select>	定義可選列表	4	5
<small>	定義小號文本	4	5
<source>	定義媒介源	4	5
<span>	定義文檔中的 section	4	5
<strike>	定義加刪除線的文本（HTML 5 中不支持）	4
<strong>	定義強調文本	4	5
<style>	定義樣式定義	4	5
<sub>	定義下標文本	4	5
<summary>	定義 details 元素的標題		5
<sup>	定義上標文本	4	5

按字母順序排列的標籤列表
標籤	描述	4: 指在HTML 4.01 中定義了該元素 5: 指在HTML 5 中定義了該元素
<table>	定義表格	4	5
<tbody>	定義表格的主體	4	5
<td>	定義表格單元	4	5
<textarea>	定義 textarea	4	5
<tfoot>	定義表格的腳註	4	5
<th>	定義表頭	4	5
<thead>	定義表頭	4	5
<time>	定義日期/時間		5
<title>	定義文檔的標題	4	5
<tr>	定義表格行	4	5
<tt>	定義打字機文本	4	5
<u>	定義下劃線文本（HTML 5 中不支持）	4
<ul>	定義無序列表	4	5
<var>	定義變量	4	5
<video>	定義視頻		5
<xmp>	定義預格式文本（HTML 5 中不支持）	4

事件屬性

HTML 5 元素可擁有事件屬性，這些屬性在瀏覽器中觸發行爲，好比當用戶單擊一個HTML 5元素時啓動一段 JavaScript。下面列出的事件屬性，能夠把它們插入 HTML 標籤來定義事件行爲。

HTML 5 中的新事件屬性：onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。

4: 指在HTML 4.01 中定義了該元素。

5: 指在HTML 5 中定義了該元素。

HTML 5再也不支持的 HTML 4.01 屬性：onreset。

事件屬性
屬性	值	描述	4	5
onabort	script	發生 abort 事件時運行腳本。		5
onbeforeonload	script	在元素加載前運行腳本。		5
onblur	script	當元素失去焦點時運行腳本。	4	5
onchange	script	當元素改變時運行腳本。	4	5
onclick	script	在鼠標點擊時運行腳本。	4	5
oncontextmenu	script	當菜單被觸發時運行腳本。		5
ondblclick	script	當鼠標雙擊時運行腳本。	4	5
ondrag	script	只要腳本在被拖動就運行腳本。		5
ondragend	script	在拖動操做結束時運行腳本。		5
ondragenter	script	當元素被拖動到一個合法的放置目標時，執行腳本。		5
ondragleave	script	當元素離開合法的放置目標時。		5
ondragover	script	只要元素正在合法的放置目標上拖動時，就執行腳本。		5
ondragstart	script	在拖動操做開始時執行腳本。		5
ondrop	script	當元素正在被拖動時執行腳本。		5
onerror	script	當元素加載的過程當中出現錯誤時執行腳本。		5
onfocus	script	當元素得到焦點時執行腳本。	4	5
onkeydown	script	當按鈕按下時執行腳本。	4	5
onkeypress	script	當按鍵被按下時執行腳本。	4	5
onkeyup	script	當按鈕鬆開時執行腳本。	4	5
onload	script	當文檔加載時執行腳本。	4	5
onmessage	script	當 message 事件觸發時執行腳本。		5
onmousedown	script	當鼠標按鈕按下時執行腳本。	4	5
onmousemove	script	當鼠標指針移動時執行腳本。	4	5
onmouseover	script	當鼠標指針移動到一個元素上時執行腳本。	4	5
onmouseout	script	當鼠標指針移出元素時執行腳本。	4	5
onmouseup	script	當鼠標按鈕鬆開時執行腳本。	4	5
onmousewheel	script	當鼠標滾輪滾動時執行腳本。		5
onreset	script	當表單重置時執行腳本。不支持。	4
onresize	script	當元素調整大小時運行腳本。		5
onscroll	script	當元素滾動條被滾動時執行腳本。		5
onselect	script	當元素被選中時執行腳本。	4	5
onsubmit	script	當表單提交時運行腳本。	4	5
onunload	script	當文檔卸載時運行腳本。		5

標籤屬性

HTML 5標籤擁有屬性。在每一個標籤的參考頁中能夠找到相應的特殊屬性。這裏列出的屬性是通用於每一個標籤的核心屬性和語言屬性（有個別例外）。

4: 指在HTML 4.01 中定義了該元素

5: 指在HTML 5 中定義了該元素

HTML 5標籤中的新屬性有：contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template

HTML 5 中再也不支持的屬性：accesskey

標籤屬性
屬性	值	描述	4	5
acceskey	a character	設置訪問一個元素的鍵盤快捷鍵。不支持。	4
class	class_ruleor style_rule	元素的類名。	4	5
contenteditable	true false	設置是否容許用戶編輯元素。		5
contentextmenu	id of a menu element	給元素設置一個上下文菜單。		5
dir	ltr rtl	設置文本方向。	4	5
draggable	true false auto	設置是否容許用戶拖動元素。		5
id	id_name	元素的惟一 id。	4	5
irrelevant	true false	設置元素是否相關。不顯示非相關的元素。		5
lang	language_code	設置語言碼。	4	5
ref	urlor elementID	引用另外一個文檔或文檔上另外一個位置。僅在 template 屬性設置時使用。		5
registrationmark	registration mark	爲元素設置拍照。可規定於任何 <rule> 元素的後代元素，除了 <nest> 元素。		5
style	style_definition	行內的樣式定義。	4	5
tabindex	number	設置元素的 tab 順序。	4	5
template	urlor elementID	引用應該應用到該元素的另外一個文檔或本文檔上另外一個位置。		5
title	tooltip_text	顯示在工具提示中的文本。	4	5

異常處理

HTML 5(text/html)瀏覽器將在錯誤語法的處理上更加靈活。HTML 5在設計時保證舊的瀏覽器可以安全的忽略掉新的HTML 5代碼。與HTML 4.01相比，HTML 5給出瞭解析的詳細規則，力圖讓不一樣的瀏覽器即便在發生語法錯誤時也能返回相同的結果。

優點

HTML5能夠提供:

1.提升可用性和改進用戶的友好體驗;

2.有幾個新的標籤，這將有助開發人員定義重要的內容；

3.能夠給站點帶來更多的多媒體元素(視頻和音頻)；

4.能夠很好的替代FLASH和Silverlight；

5.當涉及到網站的抓取和索引的時候，對於 SEO很友好；

6.將被大量應用於移動應用程序和遊戲。

谷歌和HTML5

2010年5月22日，谷歌創建了一個塗鴉來記念Pac Man的視頻遊戲。這個塗鴉是一個動畫，同時也是一個能夠玩的Pac Man的遊戲。這個塗鴉就是谷歌經過使用HTML5標準制做的，固然谷歌也提供一個FLASH版原本支持不兼容HTML5的瀏覽器。我敢打賭，這是大多數互聯網網民第一次和HTML5的接觸。對於我的來講，這是一個興奮的消息。以個人觀點，這個塗鴉提供了一個機會能夠窺視將來互聯網、網頁、移動應用軟件和遊戲等發展趨勢。對於搜索引擎優化，他開闢了我更多的想象，它讓我思考HTML5在SEO領域的潛力。網站轉移到HTML5標準對於SEO有什麼優點?

HTML 5開發領域的領軍人物包括Sencha，Adobe，Appcelerator，appMobi及Facebook，亞馬遜，Google三大巨頭。無論你是想開發出新型視頻應用的開發商如Brightcover仍是想開發新型音頻應用的開發商如Soundcloud，不管是桌面應用仍是移動應用，HTML 5都是創新的主旋律。

HTML5與SEO

一：使搜索引擎更加容易抓取和索引

對於一些網站，特別是那些嚴重依賴於FLASH的網站HTML5是一個大福音。若是你有一個都是FLASH的站點，你就必定會看到切換到HTML5的好處。首先，搜索引擎的蜘蛛將可以抓取你的站點和索引你的內容。全部嵌入到動畫中的內容將所有能夠被搜索引擎讀取。在搜索引擎優化的基本理論中，這一方面將會驅動你的網站得到更多的右擊流量。

二：提供更多的功能，提升用戶的友好體驗

使用HTML5的另外一個好處就是它能夠增長更多的功能。對於HTML5的功能性問題，咱們從全球幾個主流站點對它的青睞就能夠看出。社交網絡大亨Facebook已經推出他們期待已久的基於HTML5的iPad應用平臺，潘多拉也推出他們基於HTML5的音樂播放器的新版本。遊戲平臺 Zynga也在推出了三款新的在移動設備瀏覽器上運行的基於HTML5的遊戲等等。天天都有不斷的基於HTML5的網站和HTML5特性的網站被推出。保持站點處於新技術的前沿，也能夠很好的提升用戶的友好體驗。

三：可用性的提升，提升用戶的友好體驗

最後咱們能夠從可用性的角度上看，HTML5能夠更好的促進用戶於網站間的互動狀況。多媒體網站能夠得到更多的改進，特別是在移動平臺上的應用，使用 HTML5能夠提供更多高質量的視頻和音頻流。到目前爲止，事實就是iPhone和iPad將不會支持FLASH，同時ADOBE公司也公開聲明將中止FLASH基於移動平臺的開發，能夠這麼說——移動平臺往後視頻音頻是HTML5的天下！

客戶端