首頁 > web前端 > html教學 > DOCTYPE作用以及標準模式和相容模式的區別詳細介紹

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

高洛峰
發布: 2017-03-20 16:09:20
原創
2588 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板