DOCTYPE作用以及標準模式和相容模式的區別詳細介紹

DOCTYPE的作用以及標準模式和相容模式的區別

1. 聲明必須處於HTML文件的頭部，在HTML5中不區分大小寫

2. 宣告不是一個HTML標籤，是一個用來告訴瀏覽器目前HTMl版本的指令

3. 現代瀏覽器的html佈局引擎透過檢查doctype決定使用相容模式還是標準模式對文件進行渲染，有些瀏覽器有一個接近標準模型。

4. 在HTML4.01中宣告指向一個DTD，由於HTML4.01基於SGML，所以DTD指定了標記規則以保證瀏覽器正確渲染內容

5. HTML5不是基於SGML，所以不用指定DTD

      標準模式與相容模式的差異：標準模式的排版與JS運作模式都是以該瀏覽器支援的最高標準運作。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止網站無法運作。

具體區別：
1.盒模型
  在嚴格模式中：width是內容寬度，元素真正的寬度= width;
  在相容模式中：width則是=width+padding+border
2.相容模式下可設定百分比的高度和行內元素的高寬
    在Standards模式下，為span等行內元素設定wdith和height都不會生效，而在相容模式下，則會生效。
    在standards模式下，一個元素的高度是由其所包含的內容來決定的，如果父元素沒有設定高度，子元素設定一個百分比的高度是無效的。
3.用margin:0 auto設定水平居中在IE下會失效
    使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下卻會失效（用text -align屬性解決）
    body{text-align:center};#content{text-align:left}
4.相容模式下Table中的字體屬性無法繼承上層的設置，white-space:pre會失效，設定圖片的padding會失效

1. < !doctype>宣告必須處於HTML文檔的頭部，在標籤之前，告知瀏覽器的解析器用什麼文檔標準解析這個文檔。 DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。 HTML5中不區分大小寫

2. 宣告不是一個HTML標籤，是用來告訴瀏覽器目前HTMl版本的指令

3. 現代瀏覽器的html佈局引擎透過檢查doctype決定使用相容模式還是標準模式對文件進行渲染，有些瀏覽器有一個接近標準模型。

4. 在HTML4.01中宣告指向一個DTD，由於HTML4.01基於SGML，所以DTD指定了標記規則以確保瀏覽器正確渲染內容

5. HTML5並非基於SGML，所以不用指定DTD

      標準模式和相容模式的差異：標準模式的排版和JS運作模式都是以此瀏覽器支援的最高標準運行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止網站無法運作。

具體區別：
1.盒模型
  在嚴格模式中：width是內容寬度，元素真正的寬度= width;
  在相容模式中：width則是=width+padding+border
2.相容模式下可設定百分比的高度和行內元素的高寬
    在Standards模式下，給span等行內元素設定wdith和height都不會生效，而在相容模式下，則會生效。
    在standards模式下，一個元素的高度是由其所包含的內容來決定的，如果父元素沒有設定高度，子元素設定一個百分比的高度是無效的。
3.用margin:0 auto設定水平居中在IE下會失效
    使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下卻會失效（用text-align屬性解決）
    body{text-align:center};#content{text-align:left}
4.相容模式下Table中的字體屬性不能繼承上層的設置，white-space:pre會失效，設定圖片的padding會失效

以上是DOCTYPE作用以及標準模式和相容模式的區別詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！