作為一個(gè)職業(yè)的魔法師，我們不能像麻瓜那樣小打小鬧，我們應(yīng)該要了解HTML，甚至還要知道它的爸爸、爺爺長(zhǎng)什么樣。
前段時(shí)間就有人問(wèn)我， “DOCTYPE 的作用是什么？”。聽到這個(gè)問(wèn)題的第一反應(yīng)，我的大腦開始思考如何組織語(yǔ)言去回答他這個(gè)看似簡(jiǎn)單的問(wèn)題。但我還是停下了思考，因?yàn)槲抑牢矣每谡Z(yǔ)說(shuō)不清楚其中錯(cuò)綜復(fù)雜的父子關(guān)系。
要回答這個(gè)問(wèn)題你首先要知道HTML的歷史，和它的遺傳基因。
今天就抽空把我的理解和能了解的知識(shí)進(jìn)行一遍清洗整理，把HTML家族的歷史和故事盡量以通俗易懂的語(yǔ)言表達(dá)出來(lái)。
1、ML是它的姓氏嗎？
ML的全稱是 Make Lov*。
不對(duì)，再來(lái)。是Markup Language。翻譯成中文就是標(biāo)記語(yǔ)言的意思。
根據(jù)維基百科對(duì)其的解釋，“Markup language” 是用標(biāo)準(zhǔn)的標(biāo)記來(lái)解釋純文本文檔的內(nèi)容，從而提供關(guān)于文檔結(jié)構(gòu)或文檔該如何渲染的信息。
要說(shuō)人話就是，用一些標(biāo)準(zhǔn)格式的話（語(yǔ)言）來(lái)形容一個(gè)人（文檔）的長(zhǎng)相（渲染信息）。
所以整個(gè)家族基本上都離不開ML（標(biāo)記語(yǔ)言）這兩個(gè)字母，我們來(lái)看看他們的名字：GML、SGML、HTML、XML、XHTML、HTML5。
怎么樣，這樣一看，他們的名字是不是好記多了。接下里我基于HTML來(lái)挨個(gè)介紹他的宗親，具體細(xì)節(jié)可以參考其他技術(shù)文章，這里只做簡(jiǎn)單介紹。
2、HTML本人
HTML中文叫超文本標(biāo)記語(yǔ)言，1.0 版本于 1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布。
到現(xiàn)在也是現(xiàn)在瀏覽器世界里最受支持的一種標(biāo)記語(yǔ)言。
正是它的誕生，導(dǎo)致全世界誕生了一批又一批的頂級(jí)富豪，也深深的改變了人們的生活方式和閱讀方式。在這里對(duì)無(wú)數(shù)Web先輩們的努力致敬。
關(guān)于HTML的更多介紹這里就不再贅述，有興趣的可以去看百度百科或者維基百科。
3、父親 —— SGML
SGML是由一伙人類（ISO）創(chuàng)造的，這里不展開討論這伙人，有興趣的可以去參考維基百科。在這里我們只說(shuō)SGML本身。
SGML翻譯成中文就是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言，加上通用標(biāo)準(zhǔn)四字，是不是就瞬間高大上了起來(lái)。
SGML是HTML和XML共同的父親，它源于1969年IBM公司開發(fā)的文檔描述語(yǔ)言GML，也就是HTML的爺爺，我們待會(huì)再來(lái)介紹它的爺爺。SGML優(yōu)點(diǎn)有：高穩(wěn)定性、高可攜性、高完整性。它的缺點(diǎn)有：高復(fù)雜性、費(fèi)用昂貴。
用人話說(shuō)就是，ISO搞出來(lái)的東西穩(wěn)定性是絕對(duì)有保證的，也可以跨平臺(tái)使用，文檔說(shuō)明也是相當(dāng)完整的，據(jù)說(shuō)文檔多達(dá)五百多頁(yè)。
但是它的缺點(diǎn)也正是因?yàn)樗姆€(wěn)定性和完整性催生出了高度復(fù)雜的特性，其相對(duì)衍生出來(lái)的就是高費(fèi)用性的巨大缺陷。
換句話說(shuō)，一個(gè)人想要接手或者使用它，必須先制定它的DTD（文件格式定義），這個(gè)DTD的制定是相當(dāng)復(fù)雜和昂貴的，可以簡(jiǎn)單的想象一下，每次寫一個(gè)全新DTD標(biāo)準(zhǔn)的SGML文件都需要為此開發(fā)一個(gè)解析工具（瀏覽器）的代價(jià)。
4、爺爺 —— GML
GML（通用標(biāo)記語(yǔ)言）由 Charles Goldfarb，Edward Mosher 和 Raymond Lorie 三位大神于1969年和1970年代開發(fā)（Goldfarb 使用姓氏的縮寫來(lái)縮寫 GML）。
GML是用來(lái)搞IBM的文檔組成工具的，也是這個(gè)工具的主要組件。但是隨著計(jì)算機(jī)的發(fā)展，這種語(yǔ)言已經(jīng)變得相對(duì)落后和單一了，所以才誕生了兒子SGML，來(lái)一統(tǒng)世界。
5、兄弟 —— XML
HTML的這個(gè)兄弟相當(dāng)?shù)臓?zhēng)氣，直到今天都還在被廣泛的使用。
隨著先輩的努力，1998年2月10日，W3C(World Wide Web onsortium，萬(wàn)維網(wǎng)聯(lián)盟)這一伙人類公布了 XML 1.0 標(biāo)準(zhǔn)，于是 XML 誕生了。
XML的中文叫可擴(kuò)展標(biāo)記語(yǔ)言，被設(shè)計(jì)用來(lái)傳輸和存儲(chǔ)數(shù)據(jù)。XML很重要，也很容易學(xué)習(xí)。
如今的數(shù)學(xué)標(biāo)記語(yǔ)言MathML和可縮放矢量圖形SVG都是使用的XML作為描述語(yǔ)言。
HTML和它兄弟XML最大的區(qū)別就在于它兄弟的標(biāo)簽是可以自己創(chuàng)建的，數(shù)量無(wú)限多，類似于孫悟空的猴毛，而HTML的標(biāo)簽都是固定的而且數(shù)量有限。
6、兒子 —— HTML5
HTML 經(jīng)過(guò)一系列修訂，到現(xiàn)在說(shuō)的 HTML 一般指 HTML 4.01。
而現(xiàn)在的它的兒子HTML5 則是 HTML 的第五個(gè)修訂版，其主要的目標(biāo)是將互聯(lián)網(wǎng)語(yǔ)義化，以便更好地被人類和機(jī)器閱讀，并同時(shí)提供更好地支持各種媒體的嵌入。
HTML5本身不是技術(shù)，它是標(biāo)準(zhǔn)。它所使用的技術(shù)早已很成熟。
前端技術(shù)圈里通常所說(shuō)的 HTML5 實(shí)際上是HTML與CSS3及JavaScript和瀏覽器API等的一個(gè)組合包。
用一個(gè)老公式可以說(shuō)明問(wèn)題：HTML5 ≈ HTML + CSS3 + JavaScript + 瀏覽器API
特別需要注意的是，某些不懂技術(shù)的人嘴里說(shuō)出來(lái)的所謂的H5，指的是在移動(dòng)端上落地頁(yè)或營(yíng)銷頁(yè)。這兩者千萬(wàn)要區(qū)分開。
7、侄子 —— XHTML
中文叫可擴(kuò)展超文本標(biāo)記語(yǔ)言，表達(dá)方式和HTML其實(shí)類似，但是比HTML更嚴(yán)格。
它長(zhǎng)得很像HTML，但為什么是XML的兒子呢？難道？
從繼承關(guān)系來(lái)講，HTML是繼承自標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言（SGML）。而XHTML則是繼承自可擴(kuò)展標(biāo)記語(yǔ)言（XML），而XML又是繼承自SGML。所以按道理來(lái)說(shuō)侄子可能僅僅只是長(zhǎng)得像。
XHTML1.1為XHTML最后的獨(dú)立標(biāo)準(zhǔn)，2.0止于草案階段。
因?yàn)镠TML5的出現(xiàn)，目前XHTML在業(yè)界仍然處于非主流的尷尬地位?；蛟S對(duì)于XML來(lái)說(shuō)HTML5就是別人家的小孩。
8、魔法世界 —— 瀏覽器
你可以把瀏覽器想象成一個(gè)魔法世界，ML、CSS 和 JS是這個(gè)魔法世界里的基本魔法，人則是這個(gè)世界里的魔法師。
瀏覽器世界支持標(biāo)準(zhǔn)渲染模式和兼容渲染模式。
在標(biāo)準(zhǔn)模式中，渲染方式和 JS 引擎的解析方式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止舊的站點(diǎn)無(wú)法工作。
人類的先輩們一直在嘗試駕馭并掌握他們，甚至設(shè)計(jì)他們的規(guī)范，但它又像一個(gè)黑盒，你永遠(yuǎn)都有探索不到的角落。
總是有人覺得自己完美的精通了這三種法術(shù)，而這個(gè)魔法世界并不是一成不變，魔法世界有他自己的規(guī)則，人類總是需要學(xué)習(xí)新的魔法，但永遠(yuǎn)沒辦法脫離這三種基本法術(shù)。
9、DTD —— 自報(bào)姓名
DTD全稱是文檔類型定義（DTD，Document Type Definition）。
在解析網(wǎng)頁(yè)時(shí)，瀏覽器將根據(jù)文檔所自報(bào)的姓名（DTD），使用這些規(guī)則檢查頁(yè)面的有效性并且采取相應(yīng)的措施。它還會(huì)影響瀏覽器的渲染模式（工作模式）。
DTD概念源于SGML，也就是HTML的父親，每一份SGML文件，均應(yīng)有相對(duì)應(yīng)的DTD。對(duì)XML文件而言，DTD并非特別需要，well-formed XML就不需要有DTD。
DTD有四個(gè)組成如下：元素、屬性、實(shí)體、注釋。
由于DTD限制較多，使用時(shí)較不方便，近來(lái)已漸被XML Schema所取代。
10、尾聲
介紹完上面的歷史知識(shí)和錯(cuò)綜復(fù)雜的關(guān)系，我們最后回到最初的那個(gè)問(wèn)題。
DOCTYPE 的作用是什么？
IE5.5 引入了文檔模式的概念，而這個(gè)概念是通過(guò)使用文檔類型（DOCTYPE）切換實(shí)現(xiàn)的。
聲明位于 HTML 文檔中的第一行，處于 標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE 不存在或格式不正確會(huì)導(dǎo)致瀏覽器世界以兼容模式呈現(xiàn)。
不過(guò) HTML5 為什么只需要寫 <!DOCTYPE HTML>，而不需要引入 DTD？
HTML5其實(shí)并不基于 SGML，因此不需要對(duì) DTD 進(jìn)行引用，但是需要 DOCTYPE 來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn) 行）。
而 HTML4.01 是基于 SGML ，所以需要對(duì) DTD 進(jìn)行引用，告知瀏覽器世界所使用的文檔類型，才能讓瀏覽器世界選擇正確的渲染模式。
最后用一張家譜圖來(lái)結(jié)束全文。
全文完，如果覺得寫得不錯(cuò)，那就點(diǎn)個(gè)贊吧，多謝閱讀。
特別說(shuō)明：我的首發(fā)內(nèi)容轉(zhuǎn)移到了微信公眾號(hào)平臺(tái)“歪脖攻城”，想第一時(shí)間看到最新文章的朋友可以關(guān)注一下。
