戲說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，以此記念廣大一線開發者活到老學到老的不懈精神、曾經耗費的精力、曾經逝去的青春。