如果有非技術(shù)人員問你，HTML5是什么，你會怎么回答？　新的HTML規(guī)范。給瀏覽器提供了牛逼能力，干以前不能干的事。（確切地說應(yīng)該是給瀏覽器規(guī)定了許多新的接口標準，要求瀏覽器實現(xiàn)牛逼的功能。 這里感謝紅楓一葉）

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

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

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

　　隨著歷史的發(fā)展，當人們不在滿足簡單的顯示文本，對于某些文本需要特殊強調(diào)或者給添加特殊格式的需求，慢慢的冒了出來。面對人們需要控制顯示效果的需求，最先想到的也最簡單的方式就是加標記。加一些樣式控制的標記。這時候就出現(xiàn)了像、

       這種樣式控制的標記。但是這樣一來，所有的標記就會分為兩大類：一種是說我是什么，一種是說我怎么顯示。這還不是大問題，標記簡單，但是瀏覽器要解析標記可不那么簡單了。想一想，這樣干的話DOM也就要分成兩大類，一類屬于描述元素的DOM節(jié)點，一類屬于描述顯示效果的DOM節(jié)點。一個DOM節(jié)點可能代表一個元素

也可能是代表一種顯示效果。怎么看都覺得別扭呀。

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

       1，一篇文章如果修辭過多，必然會引起讀者的反感。如果把元素和顯示效果都放在一個文件中，必然不利于閱讀。
       2，如果有10個元素都需要一個效果，是不是要把一個style重復寫十遍呢
       3，父元素的設(shè)置效果對子元素有沒有影響，讓不讓拼爹

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

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

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

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

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

　　后記—— 本文只是一個旁觀者以線性的方式來翻閱HTML的發(fā)展史，但歷史更像是晴空上突然的晴天霹靂，一聲過后，有人哀嚎遍野，有人高歌入云。以此紀念曾紅極一時的Silverlight、Flex，以此紀念廣大一線開發(fā)者活到老學到老的不懈精神、曾經(jīng)耗費的精力、曾經(jīng)逝去的青春。