Doctype做用？嚴格模式與混雜模式如何區分？它們有何差別？

時間 2021-01-17

標籤 css html 瀏覽器框架字體網站 spa htm 繼承欄目 CSS 简体版

原文原文鏈接

1、Doctype做用是什麼？

<!DOCTYPE>聲明叫作文件類型定義（DTD），聲明的做用爲了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應該用哪一個規範來解析文檔。<!DOCTYPE>聲明必須在 HTML 文檔的第一行，這並非一個 HTML 標籤。

2、嚴格模式與混雜模式如何區分？它們有何意義？

嚴格模式：又稱標準模式，是指瀏覽器按照 W3C 標準解析代碼。

混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用本身的方式解析代碼。

如何區分：瀏覽器解析時到底使用嚴格模式仍是混雜模式，與網頁中的 DTD 直接相關。

一、若是文檔包含嚴格的 DOCTYPE ，那麼它通常以嚴格模式呈現。（嚴格 DTD ——嚴格模式）
二、包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現，但有過渡 DTD 而沒有 URI （統一資源標識符，就是聲明最後的地址）會致使頁面以混雜模式呈現。（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式）
三、DOCTYPE 不存在或形式不正確會致使文檔以混雜模式呈現。（DTD不存在或者格式不正確——混雜模式）
四、HTML5 沒有 DTD ，所以也就沒有嚴格模式與混雜模式的區別，HTML5 有相對寬鬆的語法，實現時，已經儘量大的實現了向後兼容。（ HTML5 沒有嚴格和混雜之分）

意義：嚴格模式與混雜模式存在的意義與其來源密切相關，若是說只存在嚴格模式，那麼許多舊網站必然受到影響，若是隻存在混雜模式，那麼會回到當時瀏覽器大戰時的混亂，每一個瀏覽器都有本身的解析模式。

3、嚴格模式與混雜模式的語句解析不一樣點有哪些？css

1）盒模型的高寬包含內邊距padding和邊框borderhtml

在W3C標準中，若是設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在IE5.5及如下的瀏覽器及其餘版本的Quirks模式下，IE的寬度和高度還包含了padding和border。瀏覽器

2）能夠設置行內元素的高寬框架

在Standards模式下，給span等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。字體

3）可設置百分比的高度網站

在standards模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置高度，子元素設置一個百分比的高度是無效的。ui

4）用margin:0 auto設置水平居中在IE下會失效spa

使用margin:0 auto在standards模式下可使元素水平居中，但在quirks模式下卻會失效,quirk模式下的解決辦法，用text-align屬性:htm

body{text-align:center};#content{text-align:left}繼承

5）quirk模式下設置圖片的padding會失效

6）quirk模式下Table中的字體屬性不能繼承上層的設置

7）quirk模式下white-space:pre會失效

補充內容：

1、經常使用的具體聲明：

一、HTML5（一種）：<!DOCTYPE html>

二、HTML 4.01（三種）：嚴格模式包含全部 HTML 元素和屬性，但不包括展現性的和棄用的元素（好比 font），不容許框架集（Framesets）；過渡模式包含全部 HTML 元素和屬性，包括展現性的和棄用的元素（好比 font），不容許框架集（Framesets）；框架模式等同於過渡模式，但容許框架集內容。

HTML 4.01 Strict ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

三、XHTML 1.0（四種）：前三種模式同上，XHML 必須以格式正確的 XML 來編寫標記。

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

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

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

XHTML 1.1 該 DTD 等同於 XHTML 1.0 Strict，但容許添加模型。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

2、嚴格模式與混雜模式的來源當年Netscape4（網景公司早期的瀏覽器）和IE4（微軟公司早期的瀏覽器）實現CSS機制時，並無遵循W3C提出的標準。Netscape4 提供了糟糕的支持，而IE4 雖然接近標準，但依舊未能徹底正確的支持標準。儘管IE 5 修復了IE4 許多的問題，可是依然延續CSS實現中的其它故障（主要是盒模型問題）。爲了保障本身的網站在各個瀏覽器上顯示正確，網頁開發者們不得不依據各個瀏覽器自身的規範來使用css，所以大部分網站的css實現並不符合W3C規範的標準。然而隨着標準一致性愈來愈重要，瀏覽器開發商不得不面臨一個艱難的抉擇：逐漸遵循W3C的標準是前進的方向。可是改變現有的 css，徹底去遵循標準，會使許多舊網站或多或少受到破壞，若是瀏覽器忽然以正確的方式解析現存的css，陳舊的網站的顯示必然會受到影響。因此，全部的瀏覽器都須要提供兩種模式：混雜模式服務於舊式規則，而嚴格模式服務於標準規則。