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