Html 5開始大熱標(biāo)志性的事件是Apple 前CEO Steve Jobs 公開炮轟Flash，并指出Flash在移動(dòng)終端的不利因素，而且Html5將獲得勝利。頓時(shí)it界，數(shù)字營銷界，數(shù)字媒體界等相關(guān)領(lǐng)域的人開始一窩蜂的議論，追捧，打擊，HTML 5成了當(dāng)仁不讓的明星（就在不久前Adobe宣布停止對(duì)Mobile端flash的開發(fā)與更新）。但是很多人，都在問：HTML5是什么？如何鑒定HTML5產(chǎn)品？
我們這次的《知識(shí)普及》欄目就來看看初步的探索下HTML5。
一、什么是HTML，以及HTML 5
1. HTML
HTML是超文本標(biāo)記語言的英文縮寫，這是一種標(biāo)記語言，不需要進(jìn)行編譯，直接由瀏覽器執(zhí)行。
語言就必須有一個(gè)語法的規(guī)則，如果沒有規(guī)則，誰知道應(yīng)該把一個(gè)HTML元素以怎樣的形式展現(xiàn)給用戶呢？目前HTML語言的標(biāo)準(zhǔn)是由 W3C（World Wide Web Consortium）負(fù)責(zé)制定的。依照規(guī)則，無論是何種瀏覽器，對(duì)于相同的HTML代碼，應(yīng)當(dāng)展現(xiàn)給用戶相同的效果。
目前HTML語言最新版本為4(HTML 4)，此外還有一個(gè)可擴(kuò)展超文本標(biāo)記語言（XHTML）作為其擴(kuò)展版本，提供更為豐富的功能和更嚴(yán)謹(jǐn)?shù)恼Z法規(guī)范。
2. HTML 5
HTML 5草案的前身名為Web Applications 1.0。於2004年被WHATWG提出，於2007年被W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。2008年1月22日，W3C發(fā)布了最新的HTML5工作草案，HTML工作組包括AOL、Apple、Google、IBM、 Microsoft、Mozilla、Nokia、Opera等數(shù)百個(gè)開發(fā)上。HTML5中增加了許多新特性，例如嵌入音頻、視頻和圖片的函數(shù)、客戶端存 儲(chǔ)數(shù)據(jù)、交互式文檔等，通過制定如何處理所有HTML元素以及如何從錯(cuò)誤中恢復(fù)的精確規(guī)則，HTML5進(jìn)一步增強(qiáng)了互動(dòng)性，并有效減少了開發(fā)成本。
二、HTML5 有哪些特質(zhì)
我們來看看W3.org列舉出來的8個(gè)Class技術(shù)描述：
A. 語義特性（Class：Semantic）
HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對(duì)RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對(duì)程序、對(duì)用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。
B. 本地存儲(chǔ)特性（Class: OFFLINE & STORAGE）
基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲(chǔ)功能。Indexed DB（html5本地存儲(chǔ)最重要的技術(shù)之一） 和API說明文檔。
C. 設(shè)備兼容特性 (Class: DEVICE ACCESS)
從Geolocation 功能的API文檔公開以來，HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗(yàn)功能的優(yōu)勢。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)
D. 連接特性（Class: CONNECTIVITY）
更有效的連接工作效率，使得基于頁面的實(shí)時(shí)聊天，更快速的網(wǎng)頁游戲體驗(yàn)，更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個(gè)特性，這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)’推送’到客戶端的功能。
E. 網(wǎng)頁多媒體特性(Class: MULTIMEDIA)
支持網(wǎng)頁端的Audio、Video等多媒體功能， 與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。
F. 三維、圖形及特效特性（Class: 3D, Graphics & Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會(huì)驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果。
G. 性能與集成特性（Class: Performance & Integration）
沒有用戶會(huì)永遠(yuǎn)等待你的Loading——HML5會(huì)通過XMLHttpRequest2等技術(shù)，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。
H. CSS3特性(Class: CSS3)
在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。
Apple 官方對(duì)HTML5的各個(gè)特性做了詳細(xì)并且動(dòng)態(tài)的展示：http://www.apple.com/html5/showcase
三、Html 5與Html 4的區(qū)別
A.簡化的語法
更簡單的doctype聲明是HTML5里眾多新特征之一?，F(xiàn)在你只需要寫，這就行了。HTML5的語法兼容HTML4和XHTML1，但不兼容SGML。
B. 一個(gè)替代Flash的新”canvas”標(biāo)記
對(duì)于Web用戶來說，F(xiàn)lash既是一個(gè)驚喜，也是一種痛苦。有很多的Web開發(fā)人員對(duì)HTML5對(duì)Flash產(chǎn)生的威脅很不滿。但對(duì)于那些忍受著要花幾年時(shí)間加載和運(yùn)行的臃腫的Flash視頻的人來說，用新的 “canvas” 標(biāo)記生成視頻的技術(shù)已經(jīng)到來。
目前， “canvas” 標(biāo)記并不能提供所有的Flash具有的功能，但假以時(shí)日，F(xiàn)lash必將從web上淘汰。我們拭目以待，因?yàn)楹芏嗳诉€并不認(rèn)同這種觀點(diǎn)。
C. 新的 “header” 和 “footer” 標(biāo)記
HTML5的設(shè)計(jì)是要更好的描繪網(wǎng)站的解剖結(jié)構(gòu)。這就是為什么這些”header” 和”footer” 等新標(biāo)記的出現(xiàn)，它們是專門為標(biāo)志網(wǎng)站的這些部分設(shè)計(jì)的。在開發(fā)網(wǎng)站時(shí)，你不在需要用”div”標(biāo)記來標(biāo)注網(wǎng)頁的這些部分。
D. 新的 “section” 和 “article” 標(biāo)記
跟”header” 和 “footer”標(biāo)記類似，HTML5中引入的新的”section” 和 “article” 標(biāo)記可以讓開發(fā)人員更好的標(biāo)注頁面上的這些區(qū)域。
據(jù)推測，除了讓代碼更有組織外，它也能改善SEO效果，能讓搜索引擎更容易的分析你的頁面。
E.新的 “menu” 和 “figure” 標(biāo)記
新的”menu”標(biāo)記可以被用作普通的菜單，也可以用在工具條和右鍵菜單上，雖然這些東西在頁面上并不常用。類似的，新的 “figure” 標(biāo)記是一種更專業(yè)的管理頁面上文字和圖像的方式。當(dāng)然，你可以用樣式表來控制文字和圖像，但使用HTML5內(nèi)置的這個(gè)標(biāo)記更適合。
F. 新的 “audio” 和 “video” 標(biāo)記
新的”audio” 和 “video” 標(biāo)記可能是HTML5中增加的最有用處的兩個(gè)東西了。正如標(biāo)記名稱，它們是用來嵌入音頻和視頻文件的。
除此之外還有一些新的多媒體的標(biāo)記和屬性，例如”track”，它是用來提供跟蹤視頻的文字信息的。有了這些標(biāo)記，HTML5使Web2.0特征變得越來越友好。問題在于，在HTML5還未被廣泛的接受之前，Web2.0還是老的Web2.0。
G. 全新的表單設(shè)計(jì)
新的 “form” 和 “forminput” 標(biāo)記對(duì)原有的表單元素進(jìn)行的全新的修改，它們有很多的新屬性(以及一些修改)。如果你經(jīng)常的開發(fā)表單，你應(yīng)該花時(shí)間更詳細(xì)的研究一下。
H. 不再使用 “b” 和 “font” 標(biāo)記
對(duì)我個(gè)人來說，這是一個(gè)讓我不太理解的改動(dòng)。我并不認(rèn)為去除 “b” 和 “font”標(biāo)記會(huì)帶來多大的好處。我知道，官方的指導(dǎo)說這些標(biāo)記可以通過CCS來做更好的處理，但這樣一來，為了在文章一兩個(gè)地方出現(xiàn)的這種標(biāo)記，你就需要在獨(dú)立的css和文本兩個(gè)地方來實(shí)現(xiàn)這一的功能，豈不笨拙。也許我們以后會(huì)習(xí)慣這種方法。
i. 不再使用 “frame”, “center”, “big” 標(biāo)記
事實(shí)上，我已經(jīng)記不清曾經(jīng)何時(shí)用過這些標(biāo)記了，所以，我并不為去除這些標(biāo)記感到悲哀。相同的原因，有更好的標(biāo)記能實(shí)現(xiàn)它們的功能——這很好，任何作廢的標(biāo)記從標(biāo)準(zhǔn)中剔除都是受歡迎的。
四、早期試行者：
體驗(yàn) HTML5 的最好瀏覽器是那些基于 Webkit 引擎的瀏覽器（Apple 開發(fā)的開源瀏覽器內(nèi)核），如 Chrome 和 Safari，F(xiàn)irefox 不太流暢，即使現(xiàn)在Firefox 9官方聲稱完美支持HTML5，但是實(shí)際應(yīng)用中，我們發(fā)現(xiàn)還是相對(duì)于Chrome和Safari欠缺許多。
W3C在2011年上半年正式推出了HTML5的初步標(biāo)準(zhǔn)，隨之而來是謹(jǐn)慎的Mircosoft 發(fā)布了完美支持HTML5的IE9.
當(dāng)然，介于目前瀏覽器市場玲瑯滿目，目前除了主流的瀏覽器的最新版本之外，之前的版本都在或多或少的拒絕HTML5。
五、其他Html 5開發(fā)相關(guān)站點(diǎn)：
RUL: http://phonegap.com/
PhoneGap是一個(gè)開源的、基于JavaScript語言、用于快速和簡便開發(fā)手機(jī)應(yīng)用程序的開發(fā)框架，用來構(gòu)建跨平臺(tái)的使用HTML，CSS和JavaScript的移動(dòng)應(yīng)用程序。我們將會(huì)放出phoneGap的詳細(xì)介紹。它是最普及的HTML5 to App的工具。
RUL: http://jsdo.it
JSDO.IT是一個(gè)js 代碼分享的網(wǎng)站，強(qiáng)調(diào)社區(qū)參與和協(xié)作，它可以讓程序員，開發(fā)者在站內(nèi)分享自己寫的程序代碼和作品，也可以在站內(nèi)相互交流，共享JS代碼相關(guān)的內(nèi)容，是通過社交網(wǎng)絡(luò)或社區(qū)為基礎(chǔ)來建立的代碼分享功能的網(wǎng)站。其界面流暢，帶有自動(dòng)更新的預(yù)覽面板，可接受開源JS庫。另外，它還有一個(gè)獨(dú)特的性能，即可在智能手機(jī)中打開瀏覽器查看的“智能手機(jī)預(yù)覽”命令。這個(gè)工具需要用戶注冊(cè)并登陸才能使用。
RUL: http://html5boilerplate.com/
HTML 5 Boilerplate 是一個(gè)HTML / CSS / js模板，是實(shí)現(xiàn)跨瀏覽器正?；?、性能優(yōu)化，穩(wěn)定的可選功能如跨域Ajax和Flash的最佳實(shí)踐。
此網(wǎng)站由業(yè)界眾多專業(yè)資深前輩共同發(fā)起的一個(gè)開源開發(fā)模板站點(diǎn)，來幫助大家快速使用HTML5技術(shù)開發(fā)網(wǎng)站，同時(shí)兼容其他各種舊版本的瀏覽器瀏覽體驗(yàn)。HTML5 Boilerplate并不是一套框架，他僅僅是一套模板。大家可以把他當(dāng)作自己的新項(xiàng)目模板，在此基礎(chǔ)上建立自己的項(xiàng)目。這一網(wǎng)站志在建立一套簡單的模板幫助大家快速的進(jìn)行開發(fā)，一般來說下載了這套模板后，便可以在其上進(jìn)行修改，測試，查看兼容性瀏覽等。
RUL: http://prohtml5.com/
所有程序員開發(fā)者,或是對(duì)HTML5有過些許了解的人都聽說過有一本程序員編程手冊(cè)《PRO HTML5 PROGRAMMING》，而此網(wǎng)站是此書的線上官方站點(diǎn)，除了提供書中所提及的關(guān)于目前Html 5提供新特性講解的部分內(nèi)容，包括使用實(shí)例講解API的調(diào)用方法等等，同時(shí)還提供更多線上編程方面的指導(dǎo)學(xué)習(xí)資料，以及學(xué)習(xí)實(shí)踐工具。值得收藏。
RUL: http://www.beautyoftheweb.com/
在beautyoftheweb網(wǎng)站上,可以下載到40種語言的IE9 RC版（開發(fā)者體驗(yàn)版），通過Bautyoftheweb，開發(fā)人員和愛好者即可有規(guī)律地對(duì)IE9平臺(tái)上的HTML5實(shí)現(xiàn)效果進(jìn)行預(yù)覽，目前，此網(wǎng)站上的IE9 RC版可以直接下載，同時(shí)還可以看線上指導(dǎo)視頻，就算非開發(fā)者，程序員也能通過視頻，領(lǐng)略到HTML5在IE9平臺(tái)上帶來的良好體驗(yàn)感受。目前所有RC版下載都是免費(fèi)得，比較開放，透明?？梢哉f，這是微軟為了宣傳IE9而進(jìn)行推廣的一個(gè)網(wǎng)站。
基于HTML 5的優(yōu)秀作品：
URL: http://www.ds5.citroen.co.uk/uk/style-and-sophistication
URL:http://www.bleepradio.gr/program
URL: http://pickupamerica.org/
URL: http://beta.rallyinteractive.com/
URL: http://labs.dinahmoe.com/plink
URL: http://beta.theexpressiveweb.com/
URL: http://www.hyundai-veloster.eu/
URL: http://experimentgame.com/
URL: http://www.diesel.com/island
參考資料：
（1）Wiki-HTML5
（2）W3C
