如果有非技術(shù)人員問(wèn)你，HTML5是什么，你會(huì)怎么回答？

　　新的HTML規(guī)范。。。

　　給瀏覽器提供了牛逼能力，干以前不能干的事。。。（確切地說(shuō)應(yīng)該是給瀏覽器規(guī)定了許多新的接口標(biāo)準(zhǔn)，要求瀏覽器實(shí)現(xiàn)牛逼的功能。。。 這里感謝紅楓一葉）

　　給瀏覽器暴露了許多新的接口。。。

　　加了很多新的效果。。。

　　問(wèn)的人其實(shí)并不明白他想問(wèn)的真正問(wèn)題，回答的人貌似明白，但又好像少了點(diǎn)什么。牛逼的能力、新的接口、炫酷的效果，首先回答的人自己就是暈暈乎乎。什么是HTML、什么是CSS、什么是DOM、什么是JavaScript，大部分的前端開發(fā)每天都在用這些，但很少會(huì)有人去思考一下他們之間的關(guān)系。

　　首先，HTML的全稱是超文本標(biāo)記語(yǔ)言，是一種標(biāo)記形式的計(jì)算機(jī)語(yǔ)言。將這種標(biāo)記語(yǔ)言給專門的解析器，就能夠解析出一定的界面效果。瀏覽器就是專門解析這種標(biāo)記語(yǔ)言的解析器。我們說(shuō)他最終的效果是在屏幕上展示出特定的界面，那么瀏覽器肯定要把一個(gè)個(gè)的標(biāo)記轉(zhuǎn)換成內(nèi)部的一種數(shù)據(jù)結(jié)構(gòu)，這種數(shù)據(jù)結(jié)構(gòu)便是DOM元素。比如，一個(gè)<a>標(biāo)簽在瀏覽器內(nèi)部的世界中就是一個(gè)HTMLAnchorElement類型的一個(gè)實(shí)例。

　　一個(gè)HTML文件就好比用超文本標(biāo)記語(yǔ)言寫的一篇文章，文章通常是有結(jié)構(gòu)的，在瀏覽器眼里它就是DOM。DOM描述了一系列層次化的節(jié)點(diǎn)樹。（但這時(shí)候的DOM還是存在于瀏覽器內(nèi)部是C++語(yǔ)言編寫的）

　　隨著歷史的發(fā)展，當(dāng)人們不在滿足簡(jiǎn)單的顯示文本，對(duì)于某些文本需要特殊強(qiáng)調(diào)或者給添加特殊格式的需求，慢慢的冒了出來(lái)。面對(duì)人們需要控制顯示效果的需求，最先想到的也最簡(jiǎn)單的方式就是加標(biāo)記。加一些樣式控制的標(biāo)記。這時(shí)候就出現(xiàn)了像<font>、<center>這種樣式控制的標(biāo)記。但是這樣一來(lái)，所有的標(biāo)記就會(huì)分為兩大類：一種是說(shuō)我是什么，一種是說(shuō)我怎么顯示。這還不是大問(wèn)題，標(biāo)記簡(jiǎn)單，但是瀏覽器要解析標(biāo)記可就不那么簡(jiǎn)單了。想一想，這樣干的話DOM也就要分成兩大類，一類屬于描述元素的DOM節(jié)點(diǎn)，一類屬于描述顯示效果的DOM節(jié)點(diǎn)。一個(gè)DOM節(jié)點(diǎn)可能代表一個(gè)元素，也可能是代表一種顯示效果。怎么看都覺(jué)得別扭呀。

　　最后人們決定廢棄樣式標(biāo)簽，給元素標(biāo)簽添加一個(gè)style特性，style特性控制元素的樣式（最初的樣式聲明語(yǔ)法肯定很簡(jiǎn)單）。原來(lái)的樣式標(biāo)簽的特性，現(xiàn)在變成了樣式特性的語(yǔ)法，樣式標(biāo)記變成了樣式特性。這樣邏輯上就清晰多了。那么問(wèn)題來(lái)了：

• 一篇文章如果修辭過(guò)多，必然會(huì)引起讀者的反感。如果把元素和顯示效果都放在一個(gè)文件中，必然不利于閱讀。

• 如果有10個(gè)元素都需要一個(gè)效果，是不是要把一個(gè)style重復(fù)寫十遍呢

• 父元素的設(shè)置效果對(duì)子元素有沒(méi)有影響，讓不讓拼爹

• 。。。。。。。。。

　　類似的問(wèn)題肯定有很多，所以出來(lái)了CSS，層疊樣式表，帶來(lái)了css規(guī)則、css選擇器、css聲明、css屬性等，這樣以來(lái)就解決了以上痛點(diǎn)。標(biāo)記語(yǔ)言這層解決了，但是瀏覽器就不能干坐著玩耍了，必然得提供支持。所以瀏覽器來(lái)解析一個(gè)靜態(tài)html文件時(shí)，遍歷整個(gè)html文檔生成DOM樹，當(dāng)所有樣式資源加載完畢后，瀏覽器開始構(gòu)建呈現(xiàn)樹。呈現(xiàn)樹就是根據(jù)一系列css聲明，經(jīng)歷了層疊之后，來(lái)確定一個(gè)個(gè)個(gè)DOM元素應(yīng)該怎么繪制。這時(shí)候其實(shí)頁(yè)面上還沒(méi)有顯示任何界面，渲染樹也是瀏覽器內(nèi)存里面的一種數(shù)據(jù)結(jié)構(gòu)。渲染樹完成之后，開始進(jìn)行布局，這就好比已經(jīng)知道一個(gè)矩形的寬高，現(xiàn)在要在畫布量一量該畫在哪，具體占多大地方。這個(gè)過(guò)程完了之后就是繪制的過(guò)程，然后我們便有了我們看到的顯示界面了。

　　給標(biāo)記加點(diǎn)效果的問(wèn)題解決了，歷史的車輪又開始前進(jìn)了。慢慢的人們不再滿足簡(jiǎn)單的顯示效果，人們希望來(lái)點(diǎn)交互。那個(gè)時(shí)候?qū)慔TML的大部分并不懂軟件開發(fā)，開玩笑嘛，我一寫活動(dòng)頁(yè)的你讓我用C++？C++干這事的確是高射炮打蚊子——大材小用。那正規(guī)軍不屑干的事就交給游擊隊(duì)吧，這時(shí)候網(wǎng)景公司開發(fā)出了JavaScript語(yǔ)言，那時(shí)候的JavaScript根本沒(méi)有現(xiàn)在這么火，一土鱉腳本語(yǔ)言，哪像現(xiàn)在這么牛逼哄哄統(tǒng)一宇宙。

　　JavaScript本是運(yùn)行在瀏覽器的語(yǔ)言，HTML文本是靜態(tài)的，不可能讓JavaScript修改靜態(tài)文件，但可以跟瀏覽器內(nèi)部打交道。可是這個(gè)時(shí)候的DOM并不是今天的DOM，他們是C++對(duì)象，要么把JavaScript轉(zhuǎn)換成C++指令操作這些C++對(duì)象，要么把這些C++對(duì)象包裝成JavaScript原生對(duì)象。歷史選擇了后者，這時(shí)候也就標(biāo)志著現(xiàn)代DOM的正式誕生。不過(guò)歷史有時(shí)候會(huì)出現(xiàn)倒退，歷史上總會(huì)出現(xiàn)幾個(gè)奇葩，比如IE，IE奇葩他全家，包括Edge！

　　馬克思是個(gè)江湖騙子，但恩格斯是個(gè)好同志。自然辯證法與歷史唯物主義是好東西。從歷史的角度我們可以看到。CSS、DOM、JavaScript的出現(xiàn)于發(fā)展最終的源頭都在HTML，超文本標(biāo)記語(yǔ)言。人們對(duì)web的需求最終都匯集在HTML上。所以只要?dú)v史產(chǎn)生新的需求，最終的變化都首先發(fā)生在HTML規(guī)范上。

　　當(dāng)交互性不能在滿足人們需求時(shí)，web迎來(lái)了新的需求：webapp。要迎合新的需求，首先要改變的就是HTML規(guī)范，這個(gè)時(shí)候已有的HTML4.0，已經(jīng)無(wú)法滿足人們?nèi)找嬖鲩L(zhǎng)的需求，所以HTML5迎著歷史的需求，經(jīng)過(guò)八年的艱苦努力，終于在2014年正式定稿！HTML5肯定是要加入新標(biāo)簽，然對(duì)于傳統(tǒng)HTML而言，HTML5算是一個(gè)叛逆。所有之前的版本對(duì)于JavaScript接口的描述都不過(guò)三言兩語(yǔ)，主要篇幅都用于定義標(biāo)記，與JavaScript相關(guān)內(nèi)容一概交由DOM規(guī)范去定義。而HTML5規(guī)范，則圍繞著如何使用新增標(biāo)記定義了大量JavaScript API（所以其中有一些API是與DOM重疊，定義了瀏覽器應(yīng)該支持的DOM擴(kuò)展，由此可以看到HTML5也必定不是HTML的最終版）。