戲說HTML5

　　如果有非技術人員問你，HTML5是什麼，你會怎麼回答？

　　新的HTML規範。。。

　　給瀏覽器提供了牛逼能力，幹以前不能幹的事。。。（確切地說應該是給瀏覽器規定了許多新的介面標準，要求瀏覽器實現牛逼的功能。。。 這裡感謝紅楓一葉）

　　給瀏覽器暴露了許多新的介面。。。

　　加了很多新的效果。。。

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

　　首先，HTML的全稱是超文字標記語言，是一種標記形式的計算機語言。將這種標記語言給專門的解析器，就能夠解析出一定的介面效果。瀏覽器就是專門解析這種標記語言的解析器。我們說他最終的效果是在螢幕上展示出特定的介面，那麼瀏覽器肯定要把一個個的標記轉換成內部的一種資料結構，這種資料結構便是DOM元素。比如，一個<a>標籤在瀏覽器內部的世界中就是一個HTMLAnchorElement型別的一個例項。

　　一個HTML檔案就好比用超文字標記語言寫的一篇文章，文章通常是有結構的，在瀏覽器眼裡它就是DOM。DOM描述了一系列層次化的節點樹。（但這時候的DOM還是存在於瀏覽器內部是C++語言編寫的）

　　隨著歷史的發展，當人們不在滿足簡單的顯示文字，對於某些文字需要特殊強調或者給新增特殊格式的需求，慢慢的冒了出來。面對人們需要控制顯示效果的需求，最先想到的也最簡單的方式就是加標記。加一些樣式控制的標記。這時候就出現了像<font>、<center>這種樣式控制的標記。但是這樣一來，所有的標記就會分為兩大類：一種是說我是什麼，一種是說我怎麼顯示。這還不是大問題，標記簡單，但是瀏覽器要解析標記可就不那麼簡單了。想一想，這樣乾的話DOM也就要分成兩大類，一類屬於描述元素的DOM節點，一類屬於描述顯示效果的DOM節點。一個DOM節點可能代表一個元素，也可能是代表一種顯示效果。怎麼看都覺得彆扭呀。

　　最後人們決定廢棄樣式標籤，給元素標籤新增一個style特性，style特性控制元素的樣式（最初的樣式宣告語法肯定很簡單）。原來的樣式標籤的特性，現在變成了樣式特性的語法，樣式標記變成了樣式特性。這樣邏輯上就清晰多了。那麼問題來了：

• 一篇文章如果修辭過多，必然會引起讀者的反感。如果把元素和顯示效果都放在一個檔案中，必然不利於閱讀。
• 如果有10個元素都需要一個效果，是不是要把一個style重複寫十遍呢
• 父元素的設定效果對子元素有沒有影響，讓不讓拼爹
• 。。。。。。。。。

　　類似的問題肯定有很多，所以出來了CSS，層疊樣式表，帶來了css規則、css選擇器、css宣告、css屬性等，這樣以來就解決了以上痛點。標記語言這層解決了，但是瀏覽器就不能幹坐著玩耍了，必然得提供支援。所以瀏覽器來解析一個靜態html檔案時，遍歷整個html文件生成DOM樹，當所有樣式資源載入完畢後，瀏覽器開始構建呈現樹。呈現樹就是根據一系列css宣告，經歷了層疊之後，來確定一個個個DOM元素應該怎麼繪製。這時候其實頁面上還沒有顯示任何介面，渲染樹也是瀏覽器記憶體裡面的一種資料結構。渲染樹完成之後，開始進行佈局，這就好比已經知道一個矩形的寬高，現在要在畫布量一量該畫在哪，具體佔多大地方。這個過程完了之後就是繪製的過程，然後我們便有了我們看到的顯示介面了。

　　給標記加點效果的問題解決了，歷史的車輪又開始前進了。慢慢的人們不再滿足簡單的顯示效果，人們希望來點互動。那個時候寫HTML的大部分並不懂軟體開發，開玩笑嘛，我一寫活動頁的你讓我用C++？C++幹這事的確是高射炮打蚊子——大材小用。那正規軍不屑乾的事就交給游擊隊吧，這時候網景公司開發出了JavaScript語言，那時候的JavaScript根本沒有現在這麼火，一土鱉指令碼語言，哪像現在這麼牛逼哄哄統一宇宙。

　　JavaScript本是執行在瀏覽器的語言，HTML文字是靜態的，不可能讓JavaScript修改靜態檔案，但可以跟瀏覽器內部打交道。可是這個時候的DOM並不是今天的DOM，他們是C++物件，要麼把JavaScript轉換成C++指令操作這些C++物件，要麼把這些C++物件包裝成JavaScript原生物件。歷史選擇了後者，這時候也就標誌著現代DOM的正式誕生。不過歷史有時候會出現倒退，歷史上總會出現幾個奇葩，比如IE，IE奇葩他全家，包括Edge！

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

　　當互動性不能在滿足人們需求時，web迎來了新的需求：webapp。要迎合新的需求，首先要改變的就是HTML規範，這個時候已有的HTML4.0，已經無法滿足人們日益增長的需求，所以HTML5迎著歷史的需求，經過八年的艱苦努力，終於在2014年正式定稿！HTML5肯定是要加入新標籤，然對於傳統HTML而言，HTML5算是一個叛逆。所有之前的版本對於JavaScript介面的描述都不過三言兩語，主要篇幅都用於定義標記，與JavaScript相關內容一概交由DOM規範去定義。而HTML5規範，則圍繞著如何使用新增標記定義了大量JavaScript API（所以其中有一些API是與DOM重疊，定義了瀏覽器應該支援的DOM擴充套件，由此可以看到HTML5也必定不是HTML的最終版）。

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