文章出處

　　!DOCTYPE

　　!DOCTYPE是什么：

　　在所有 HTML 文檔中規定 DOCTYPE 是非常重要的，這樣瀏覽器就能了解預期的文檔類型，告訴瀏覽器要通過哪一種規范（文檔類型定義 DTD）解析文檔（比如HTML或XHTML規范）；

　　!DOCTYPE聲明不屬于 HTML 標簽；tag; 它是一條指令，告訴瀏覽器編寫頁面所用的標記的版本。

　　HTML 4.01 中的 doctype 需要對 DTD 進行引用，因為 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要對 DTD 進行引用，但是需要 doctype 來規范瀏覽器的行為（html 5簡化了這種聲明，意在告訴瀏覽器使用統一的標準即可, 這個統一的標準去哪里找啊,www.w3.org）。

　　常見的DOCTYPE如下：

HTML4.01 strict：不允許使用表現性、廢棄元素（如font）以及frameset。聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4.01 Transitional:允許使用表現性、廢棄元素（如font），不允許使用frameset。聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML4.01 Frameset:允許表現性元素，廢氣元素以及frameset。聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML1.0 Strict:不使用允許表現性、廢棄元素以及frameset。文檔必須是結構良好的XML文檔。聲明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML1.0 Transitional:允許使用表現性、廢棄元素，不允許frameset，文檔必須是結構良好的XMl文檔。聲明： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset:允許使用表現性、廢棄元素以及frameset，文檔必須是結構良好的XML文檔。聲明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 5: 
<!doctype html>

　　HTML5中的!doctype是不區分大小寫的;

　　我的DW默認的聲明模板是下面這樣的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　我的webstrom中默認的模板是這樣的：

<!DOCTYPE html>

　　現代的瀏覽器需要不同模式，既要呈現久遠的HTML界面，不至于界面結構混亂不堪， 也需要呈現W3C標準的界面：

　　1：標準的顯示方式就是---標準模式(strict),

　　2：不標準的顯示方式---怪異模式(沒定義doctype或者doctype錯誤等等情況,都會讓界面進入quirk模式)，

　　3：既可以顯示標準的，也能夠顯示不標準的(過渡類型的文檔類型定義transitional）;

　　規范和時間線

　　HTML規范和時間線：　

規范	推薦
HTML 3.2	1997年1月14日
HTML 4.0	1998年5月24日
HTML 4.01	1999年12月24日

　　XHTML規范和時間線：

規范	草案/提議	推薦
XHTML 1.0		2000 年 1 月 26 日
XHTML 1.0 修訂版		2002 年 8 月 1 日
XHTML 1.1		2001 年 5 月 31 日
XHTML Modules		2001 年 4 月 10 日
XHTML Modules 1.1	2006 年 7 月 5 日
XHTML Basic		2000 年 12 月 19 日
XHTML Basic 1.1	2006 年 7 月 5 日
XHTML Events		2003 年 10 月 14 日
XHTML Events 2	2007 年 2 月 16 日
XHTML Print		2006 年 9 月 20 日
XHTML Media Types	2002 年 8 月 1 日
XForms 1.0		2003 年 10 月 14 日
XForms 1.0 (SE)		2006 年 3 月 14 日
XForms 1.1	2007 年 2 月 22 日
XHTML 2.0	2006 年 7 月 26 日
XLink		2001 年 6 月 27 日
HLink	2002 年 9 月 13 日

　　!DOCTYPE切換也許是讓瀏覽器進入正確呈現模式并正確顯示網頁的一種有效手段，前提是你注意到了各種瀏覽器的不一致，并能積極主動地避免各種問題。

　　一般來說 !DOCTYPE后面會有一個包含命名空間的html標簽：

<html xmlns="http://www.w3.org/1999/xhtml">

　　xmlns是XHTML namespace的縮寫。
　　作用：由于xml允許定義自己的標記，但你定義的標記和其他人定義的標記有可能相同，但表示不同的含義。當文檔交換或者共享的時候就容易產生錯誤。為避免這種錯誤產生，xml采用名字空間聲明，允許你通過一個網址來識別你的標記。
　　XHTML是HTML先xml過度的標記語言，它需要符合xml文檔規則，因此，也需要定義名字空間，又因為XHTML1.0不能自定義標識，所以，它的名字空間都相同，就是：http://www.w3.org/1999/xhtml

額外資料：文檔模式

　　參考自：打開

　　文檔模式也回影響到文檔類型, <meta http-equiv="X-UA-Compatible">與<!DOCTYPE>結伴影響文檔模式 ;

　　所有IE瀏覽器在默認情況下（<meta http-equiv="X-UA-Compatible">與<!DOCTYPE>均沒有），是采用怪異模式（Quirks）；當有<!DOCTYPE>時，均采用瀏覽器版本對應的標準模式（如IE8就采用IE8標準模式，IE11就采用IE11標準模式）。

　　現在要注意的是，當出現<meta http-equiv="X-UA-Compatible">時，文檔模式將會如何呢？我們首先了解一下IE11下它的content屬性值范圍吧，具體范圍如下：

　　 IE=5、IE=7、IE=EmulateIE7、IE=8、IE=EmulateIE8、IE=9、IE=10、 IE=11、 IE=Edge

　　1. IE=5：表示采用怪異模式；

　　2. IE=7等純數字的值：表示采用對應IE版本的標準模式，即使不是以<!DOCTYPE>作為文檔第一行，文檔模式依舊使用標準模式；

　　3. IE=EmulateIE7等含EmulateIE字符串的值：表示采用模擬對應IE版本的模式，如果是以<!DOCTYPE>作為文檔第一行則采用該版本的標準模式，否則采用怪異模式。

　　4. IE=Edge：表示采用瀏覽器自身版本的文檔模式，如IE11，以<!DOCTYPE html>作為文檔第一行則采用IE11標準模式，否則采用怪異模式。

　　IE的怪異模式：

　　IE進入backCompat的模式的方式，常見的原因有

　　1：DOCTYPE寫錯了，

　　2：DOCTYPE沒有寫，

　　3：DOCTYPE前面有別的字符;

　　....

　　實例：

_____
<!DeeeeeeeeeeeOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitionaleeeeeeeeee//EN" "http://www.ssssssssw3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
</head>
<style>
body{
    margin:0;
    padding:0;
    width:1000px;
    padding:200px;
}
</style>
<body>
    <div id="div0"></div>
    <script>
        function getStyle(el, prop) {
            return el.currentStyle[prop];
        };
        var node = document.createElement("div");
        node.innerHTML = document.compatMode ;// 
        document.body.appendChild( node );
        node = document.createElement("div");
        node.innerHTML = document.getElementsByTagName("body")[0].offsetWidth;
        document.body.appendChild( node );
    </script>
</body>
</html>

　　IE兼容模式開啟的話，相對于當前的界面會以IE5.5的方式進行渲染，如果IE瀏覽器以IE5.5的方式進行解析，會導致以下問題;

盒模型：

在怪異模式下，盒模型為IE盒模型而非標準模式下的W3C 盒模型：在 IE 盒模型中， box width = content width + padding left + padding right + border left + border right， box height = content height + padding top + padding bottom + border top + border bottom。而在 W3C 標準的盒模型中，box 的大小就是 content 的大小。
圖片元素的垂直對齊方式:

對于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 屬性默認取值為baseline。而當inline元素的內容只有圖片時，如table的單元格table-cell。在 IE Quirks Mode 下，table單元格中的圖片的 vertical-align 屬性默認為bottom，因此，在圖片底部會有幾像素的空間。
<table>元素中的字體:

CSS 中，描述font的屬性有font-family，font-size，font-style，font-weigh,上述屬性都是可以繼承的。而在 IE Quirks Mode 下，對于table 元素，字體的某些屬性將不會從body或其他封閉元素繼承到table中，特別是 font-size屬性。
內聯元素的尺寸:

在 IE Standards Mode 下，non-replaced inline 元素無法自定義大小，而在 IE Quirks Mode 下，定義這些元素的width和height 屬性，能夠影響該元素顯示的大小尺寸。
元素的百分比高度:

CSS 中對于元素的百分比高度規定如下，百分比為元素包含塊的高度，不可為負值。如果包含塊的高度沒有顯式給出，該值等同于“auto”（即取決于內容的高度）。所以百分比的高度必須在父元素有聲明高度時使用。

當一個元素使用百分比高度時，在 IE Standards Mode 下，高度取決于內容的變化，而在 Quirks Mode 下，百分比高度則被正確應用。
元素溢出的處理：

在 IE Standard Mode 下，overflow取默認值 visible，即溢出可見，這種情況下，溢出內容不會被裁剪，呈現在元素框外。而在 Quirks Mode 下，該溢出被當做擴展box來對待，即元素的大小由其內容決定，溢出不會被裁剪，元素框自動調整，包含溢出內容。