1.背景介紹
DOCTYPE是什么？
DOCTYPE是document type的簡寫，它并不是 HTML 標(biāo)簽，也沒有結(jié)束標(biāo)簽，它是一種標(biāo)記語言的文檔類型聲明，即告訴瀏覽器當(dāng)前 HTML 是用什么版本編寫的。DOCTYPE的聲明必須是 HTML 文檔的第一行，位于html標(biāo)簽之前。大多數(shù)Web文檔的頂部都有doctype聲明，它是在新建一個文檔時，由Web創(chuàng)作軟件草率處理的眾多細節(jié)之一。很少人會去注意 doctype ，但在遵循標(biāo)準(zhǔn)的任何Web文檔中，它都是一項必需的元素。doctype會影響代碼驗證，并決定了瀏覽器最終如何顯示你的 Web文檔。
2.知識剖析
DOCTYPE可聲明三種 DTD 類型：嚴(yán)格、過渡以及框架集的 HTML 文檔。
超文本嚴(yán)格文檔類型定義：HTML Strict DTD。
如果需要干凈的標(biāo)記，免于表現(xiàn)層的混亂，請使用此類型。請與層疊樣式表配合使用。該 DTD 包含所有 HTML 元素和屬性
但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）
代碼為：DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//en" "http://www.w3. org/TR/html4/strict.dtd"
超文本過渡文檔類型定義：HTML Transitional DTD。
可包含 W3C 所期望移入樣式表的呈現(xiàn)屬性和元素。如果您的讀者使用了不支持層疊樣式表（CSS）的瀏覽器以至于您不得不使用 HTML 的呈現(xiàn)特性時，請使用此類型。該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。
代碼為：DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
超文本框架集文檔類型定義：Frameset DTD。
此類型定義應(yīng)當(dāng)被用于帶有框架的文檔。除 frameset 元素取代了 body 元素之外，F(xiàn)rameset DTD 等同于 Transitional DTD。該 DTD 等同于 HTML 4.01 Transitional，但允許框架集內(nèi)容。
代碼為：DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"
DOCTYPE的作用是什么？
DOCTYPE聲明中指出閱讀程序應(yīng)該用什么規(guī)則來解釋文檔中的標(biāo)記。在Web文檔的情況下，閱讀程序通常是瀏覽器或者校驗器這樣的一個程序，規(guī)則是W3C所發(fā)布的一個文檔類型定義 DTD 中包含的規(guī)則。制作一個符合標(biāo)準(zhǔn)的網(wǎng)頁，DOCTYPE聲明是是不可缺少的，它在Web設(shè)計中用來說明你用的XHTML或者HTML是什么版本，如果不做DOCTYPE聲明或聲明不正確的情況下，將有可能導(dǎo)致你的標(biāo)識與CSS失效，從而令你網(wǎng)頁的布局變亂，造成網(wǎng)頁在瀏覽器中不能正常的顯示。我們還可以通過W3C提供的驗證工具來檢查頁面的內(nèi)容是否符合在DOCTYPE中聲明的標(biāo)準(zhǔn)。
DTD是什么
DTD是文檔類型定義(Document Type Definition)是一套為了進行程序間的數(shù)據(jù)交換而建立的關(guān)于標(biāo)記符的語法規(guī)則。
它使用一系列合法的元素來定義文檔的結(jié)構(gòu)。是SGML的一部分，可被成行地聲明于 XML 文檔中，也可作為一個外部引用。
通過它，獨立的團體可一致地使用某個標(biāo)準(zhǔn)的文檔類型定義來交換數(shù)據(jù)。而您的應(yīng)用程序也可使用某個標(biāo)準(zhǔn)的文檔類型定義來驗證從外部接收到的數(shù)據(jù)。
標(biāo)準(zhǔn)模式和怪異模式
CSS1Compat：標(biāo)準(zhǔn)模式，瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁面。在標(biāo)準(zhǔn)模式中，瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁面。
BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。在怪異模式中，頁面以一種比較寬松的向后兼容的方式顯示。
怪異模式通常模擬老式瀏覽器的行為以防止老站點無法工作。
模式觸發(fā)
如果XHTML、HTML 4.01文檔包含形式完整的DOCTYPE，那么它一般以標(biāo)準(zhǔn)模式呈現(xiàn)。
包含過渡DTD和URI的DOCTYPE也導(dǎo)致頁面以標(biāo)準(zhǔn)模式呈現(xiàn)，但是有過渡DTD而沒有URI會導(dǎo)致頁面以混雜模式呈現(xiàn)。
DOCTYPE不存在或形式不正確會導(dǎo)致HTML和XHTML文檔以混雜模式呈現(xiàn)。
3.常見問題
如果不聲明doctype會發(fā)生什么？如何解決？
聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。這個屬性會被瀏覽器識別并使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat,
這也就是怪異的開始 -- 瀏覽器按照自己的方式解析渲染頁面，那么，在不同的瀏覽器就會顯示不同的樣式。
如果你的頁面添加了那么，那么就等同于開啟了標(biāo)準(zhǔn)模式，那么瀏覽器就得老老實實的按照W3C的標(biāo)準(zhǔn)解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。
有沒有其他進入怪異模式的方法？
除了不寫DOCTYPE聲明外，最常見的就是在DOCTYPE聲明前面出現(xiàn)了這些內(nèi)容：普通文本、HTML 標(biāo)簽、HTML 注釋、XML 聲明、IE條件注釋。
4.擴展思考
關(guān)于 DOCTYPE 的一個小發(fā)現(xiàn)：
使用 XHTML 聲明時，圖片是完美貼合包裹 DIV 元素的,但使用 HTML 5 標(biāo)準(zhǔn)聲明時，包裹 DIV 元素底部會被撐開 2～5 個像素不等。
考慮以下兩段代碼：
實際測試如下圖所示：
對于圖片，一般都會使用vertical-align: middle使其與周邊對齊，但是為什么使用老舊的文檔聲明反而是符合我們直觀的顯示呢？
首先，瀏覽器并沒有所謂的“HTML 5 模式"，而是只有三種：怪異模式（Quirks)，幾乎標(biāo)準(zhǔn)的模式（Limited Quirks）和標(biāo)準(zhǔn)模式（Standards），其中幾乎標(biāo)準(zhǔn)的模式和標(biāo)準(zhǔn)模式之間的唯一差異在于是否對? 元素給定行高（line-height）和基線（baseline）
幾乎標(biāo)準(zhǔn)模式中，如果? 標(biāo)簽所在行沒有其他的行內(nèi)元素，將不指定基線（baseline），? 標(biāo)簽因此會緊貼著父元素底部在標(biāo)準(zhǔn)模式中，行框總是會包含類似字母 g，f 尾巴下伸出來的那一部分空間（針對下行字母），即使行框內(nèi)并沒有任何內(nèi)容。因此這種情況下你看到的? 跟父元素底部幾個像素的間隙實際上就是為”字母尾巴“預(yù)留的
使用 XHTML Transitional Doctype 會是瀏覽器運行在”幾乎標(biāo)準(zhǔn)模式（Limited Quirks）”。如果你使用XHTML Strict 或者HTML 4 Strict模式，你將看到和使用HTML 5 模式同樣的間隙，因為這是標(biāo)準(zhǔn)模式（Standards mode）
圖片本質(zhì)上就是一個內(nèi)聯(lián)元素（或者說 inline-block，因為本身具有寬高），所以只要你在實際工作中，有若干個具備內(nèi)聯(lián)性質(zhì)的元素水平對齊，就會出現(xiàn)這種情況：
你實際看到的.wrap在不同的瀏覽器中高度都是略大于 100px 的，因為它給隱形的 “尾巴” 留了空間（把 inline 當(dāng)作圖片啦）！
參考文獻：
為何說 HTML5「no longer based on SGML」？
嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義
