我們目前最常見到的HTML結構是這樣的，
一、DOCTYPE的作用
那么，它的作用是什么呢？
首先，這個聲明不是 HTML 標簽，而是一種語法格式。
DOCTYPE是定義瀏覽器使用什么樣的文本類型定義（DTD）載入頁面，也就是告訴瀏覽器使用什么樣的HTML或者XHTML規范來解析html。一般情況下出現在html文檔的開頭。
xhtml中有四種模式：
1.xhtml 1.0 Strict 嚴格模式，不包含展示性與棄用的標簽，不允許框架集(framesets)，且嚴格以xml格式來編寫標記;
2.xhtml 1.0 Transitional 過濾模式，包含展示性與棄用標簽，不允許框架集(framesets)，且嚴格以xml格式來編寫標記;
3.xhtml 1.0 Frameset 寬松模式，包含展示性與棄用標簽，允許框架集(framesets)，且嚴格以xml格式來編寫標記;
4.xhtml 1.1，等同於xhtml 1.0 strict，但允許添加模型。
二、嚴格模式和混雜模式
嚴格模式，又稱標准模式，是指瀏覽器按照W3C標准來解析代碼，一種嚴格要求的DTD，排版和JS運作模式均是以該瀏覽器支持的最高標准運行。
混雜模式，又稱怪異模式或者兼容模式，是指瀏覽器按照自己的方式來解析代碼，頁面以寬松的向后兼容的方式顯示，就嚴格度上來說不如嚴格模式，但是模擬老式瀏覽器的行為可以防止站點無法工作。
三、如何區分嚴格模式和混雜模式
區分的重點在於文檔的DTD：
1.如果文檔中包含了嚴格的DOCTYPE，那么它一般以嚴格模式呈現。
2.如果文檔中包含過渡DTD和URI的DOCTYPE，也以嚴格模式呈現，但有過渡DTD而沒有URI，會導致文檔以混雜模式呈現。
3.DOCTYPE不存在或者形式不正確或有誤，文檔以混雜模式呈現。
4.HTML5沒有DTD，因此也就沒有嚴格模式與混雜模式的區分，HTML5相對來說語法比較寬松。
（URI是指統一資源標識符，也就是文檔聲明最后的地址）
四、嚴格模式與混雜模式的語句解析的不同之處
1.盒模型的高寬包含內邊距padding和邊框border
如圖，在W3C標准中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在IE5.5及以下的瀏覽器及其他版本的Quirks模式下，這個寬度和高度還包含了padding和border
2.可以設置行內元素的高寬
在Standards模式下，給span等行內元素設置width和height都沒有效果，但是在Quirks模式下，會生效
3.可設置百分比的寬度
在Standards模式下，一個元素的高度是由它包含的內容來決定的，如果父元素沒有設置高度，子元素設置一個百分比的高度是無效的。
4.margin:0 auto設置水平居中在IE下會失效
用margin:0 auto在Standards模式下可以使元素水平居中，但在Quirks模式下卻會使小，Quirks模式下的解決辦法是用text-align。