主要涉及知識點：
- HTML與XHTML
- HTML與XHTML的區別
- DOCTYPE與DTD的概念
- DTD的分類以及DOCTYPE的聲明方式
- 標准模式（Standard Mode）和兼容模式（Quircks Mode）
- 標准模式（Standard Mode）和兼容模式（Quircks Mode）的區別
HTML與XHTML
- HTML:超文本標記語言 (Hyper Text Markup Language)
XHTML:可擴展超文本標記語言 (EXtensible HyperText Markup Language)，是一種置標語言。 - HTML是一種基於標准通用標記語言（SGML）的應用，XHTML則基於可擴展標記語言（XML）
- XHTML的目標是取代HTML，與HTML4.01幾乎相同，是更嚴格更純凈的 HTML 版本。
- HTML 和 XHTML 的區別簡單來說，XHTML 可以認為是 XML 版本的 HTML，為符合 XML 要求，XHTML 語法上要求更嚴謹些。
本質上說，XHTML是一個過渡技術，結合了部分XML的強大功能及大多數HTML的簡單特性。建立XHTML的目的就是實現HTML向XML的過渡。在HTML5成為主流之前，Html4.01一直是大多數人使用的Html版本，Html5目標是取代HTML4.01和XHTML1.0標准，旨在提高網頁性能，增加頁面交互。
HTML與XHTML的區別
XHTML 與 HTML 4.01 標准沒有太多的不同。主要的不同體現在下面幾點：
- XHTML 元素必須被正確地嵌套。
- XHTML 元素必須被關閉。
- 標簽名必須用小寫字母。
- XHTML 文檔必須擁有根元素。
DOCTYPE與DTD的概念
文檔類型定義(Document Type Definition)是一套為了進行程序間的數據交換而建立的關於標記符的語法規則，是HTML的驗證機制。DOCTYPE標簽是一種標准通用標記語言的文檔類型聲明，聲明文檔的解析類型，它的目的是要告訴標准通用標記語言解析器，它應該使用什么樣的DTD（用什么樣的文檔標准）來解析文檔。DTD定義了文檔中的元素(標記和屬性)和實體，以及相互關系。 通過DTD驗證XML文檔的有效性。DTD為解析器提供了解析HTML文檔的依據。
DTD的分類以及DOCTYPE的聲明方式
由於HTML5不基於 SGML，因此不需要對DTD進行引用；但是需要doctype來規范瀏覽器的行為(讓瀏覽器按照它們應該的方式來運行)。
因此HTML5的DOCTYPE聲明：
<!DOCTYPE html>
而HTML4.01基於SGML，所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型，有以下三種類型：
- HTML 4.01 Strict DOCTYPE聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - HTML 4.01 Transitional DOCTYPE聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - HTML 4.01 Frameset DOCTYPE聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> - XHTML 1.0 Strict DOCTYPE聲明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - XHTML 1.0 Transitional DOCTYPE聲明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - XHTML 1.0 Frameset DOCTYPE聲明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
三種DTD類型的作用說明：
- Strict : 干凈的標記，免於表現層的混亂，與層疊樣式表（CSS）配合使用。
- Transitional :包含 W3C 所期望移入樣式表的呈現屬性和元素。使用不支持層疊樣式表（CSS）的瀏覽器時使用。
- Frameset : 應當被用於帶有框架的文檔。除 frameset 元素取代了 body 元素之外，Frameset等同於 Transitional。
標准模式（Standard Mode）和兼容模式（Quircks Mode）
在W3C標准出來之前，瀏覽器對頁面的渲染沒有統一的標准，各個瀏覽器對同一頁面的渲染有一定的差異，而每個瀏覽器的不同版本對頁面的渲染也有一定程度上的差異。而W3C標准出來之后，瀏覽器對頁面的渲染就有了統一的標准。前者對於瀏覽器使用自己的方式渲染頁面的模式，我們稱之為Quircks Mode（怪異模式、兼容模式或混雜模式）；而對於后者瀏覽器按照標准解析執行代碼的模式，我們稱之為Standard Mode（標准模式或嚴格模式）。在標准模式中，瀏覽器根據規范呈現頁面；在兼容模式中，頁面以一種比較寬松的向后兼容的方式顯示。其實，還有一種模式叫近標准模式，它與標准模式一致，除了在處理下面這種情況時：如果一個塊級元素除了空白文本（空格，tab等字符）外再無其它內容，則它的高度按0處理；如果有子元素，則它的高度不能比子元素大，無論它的font-size多大。
那么，瀏覽器解析時到底使用標准模式還是怪異模式？這就和之前提到的DOCTYPE有關了。
- 標准模式：
- XHTML文檔包含完整的DOCTYPE聲明時，一般以標准模式呈現；
- 文檔包含嚴格DTD類型的DOCTYPE聲明時，以標准模式呈現；
- 文檔包含過渡DTD類型的DOCTYPE聲明且聲明包含URI時，以標准模式呈現。
- 兼容模式：
- 文檔不包含DOCTYPE聲明或DOCTYPE聲明不正確時，以兼容模式呈現；
- 文檔包含過渡或框架DTD類型的DOCTYPE聲明但聲明不包含URI時，以兼容模式呈現；
- 在IE中，如果DOCTYPE聲明在XML之后，以兼容模式呈現。
標准模式（Standard Mode）和兼容模式（Quircks Mode）的區別
最后總結一下，在標准模式和兼容模式下，頁面的呈現主要有哪些區別：
- 關於盒模型：
在標准模式下，元素width是內容寬度，即：元素實際width = 元素width + 元素padding + 元素border，（盒子的寬度還要加上元素margin的寬度）；
在兼容模式下，元素width是元素的實際寬度，即：元素width = 元素內容width + 元素padding + 元素border，（盒子的寬度還要加上元素margin的寬度）。盒模型：主要針對塊級元素，把每個塊級元素都想象成一個盒子，每個盒子有外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）。
- 關於行內元素：
對於行內元素的垂直對齊樣式設置，基於 Gecko 的瀏覽器（Mozilla Firefox、HotBrowser、Mozilla Suite、Camino）標准模式對齊至基線，怪異模式對齊至底部；
對於行內元素的高度（height）和寬度（width）的設置，標准模式下不生效，而在兼容模式下會生效。四大內核：
- Trident，主要有IE瀏覽器以及多核瀏覽器
- Gecko，主要有Firefox以及Firefox的衍生瀏覽器
- WebKit，主要有Chrome與Chrome的衍生瀏覽器、Safari以及多核瀏覽器
- Presto，之前主要應用於Opera，Opera現已改用Google Chrome的Blink內核。
- 關於百分比的高度設置：在標准模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的。
- 關於水平居中設置：在標准模式下，使用margin:0 auto可以使元素水平居中，但在兼容模式下會失效。
- 關於!important聲明：在兼容模式下，IE6/7/8下使用!important聲明無效。
- 其他：兼容模式下，設置圖片的padding會失效；table中的字體屬性不能繼承父元素的字體屬性；設置white-space:pre會失效。