首頁 > web前端 > html教學 > doctype的作用與標準模式和相容模式的區別

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

迷茫
發布: 2017-03-25 10:13:16
原創
2218 人瀏覽過

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

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