doctype的作用與標準模式和相容模式的區別

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

1. #聲明必須處於HTML文件的頭部，在標籤之前，標準模式與相容模式的差異：標準模式的排版和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. 宣告必須處於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中文網其他相關文章！