面試— !Doctype的作用，嚴格模式和混雜模式的區別、以及如何觸發兩種模式

cosmos033發表於2018-08-07
面試模式

 !Doctype是html5標準網頁宣告,全稱為Document Type HyperText Mark-up Language，意思為文件種類為超文字標記性語言或超文字連結標示語言，現在是這個簡潔形式，支援html5標準的主流瀏覽器都認識這個宣告。表示網頁採用html5。

 !Doctype的作用

<!DOCTYPE>宣告位於位於HTML文件中的第一行，處於 <html> 標籤之前。
告知瀏覽器的解析器用什麼文件標準解析這個文件。
DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。

這個標籤可宣告三種 DTD 型別，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文件。

public 這行宣告瞭文件的根元素是 html，它在公共識別符號被定義為 "-//W3C//DTD XHTML 1.0Strict//EN" 的 DTD 中進行了定義。瀏覽器將明白如何尋找匹配此公共識別符號的 DTD。如果找不到，瀏覽器將使用公共識別符號後面的URL 作為尋找 DTD 的位置。

作用：宣告文件的解析型別(document.compatMode)，避免瀏覽器的怪異模式。

document.compatMode：

BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面，也叫混雜模式/相容模式。

CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面，即嚴格模式。

這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的宣告，那麼compatMode預設就是BackCompat,瀏覽器按照自己的方式解析渲染頁面，在不同的瀏覽器就會顯示不同的樣式。

如果頁面新增了!DOCTYPE，那麼就等同於開啟了標準模式，瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，頁面在所有的瀏覽器裡顯示的就都是一個樣子了。

嚴格模式和混雜模式的區別

1、如果文件包含嚴格的 DOCTYPE ，那麼它一般以嚴格模式呈現。（嚴格 DTD ——嚴格模式） 

2、包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現，但有過渡 DTD 而沒有 URI （統一資源識別符號，就是宣告最後的地址）會導致頁面以混雜模式呈現。（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式） 

3、DOCTYPE 不存在或形式不正確會導致文件以混雜模式呈現。（DTD不存在或者格式不正確——混雜模式）

4、HTML5 沒有 DTD ，因此也就沒有嚴格模式與混雜模式的區別，HTML5 有相對寬鬆的語法，實現時，已經儘可能大的實現了向後相容。（ HTML5 沒有嚴格和混雜之分）

具體

1、盒模型的解析，這應該是眾所周知的問題了。混雜模式下會按照IE5.5的盒模型解析。而標準模式是按標準的盒模型解析。

2、當一個塊元素div或一個單元格中包含的內容只有圖片時，在標準模式下，不管IE還是標準，在圖片底部都有3畫素的空白。
但在混雜模式下，標準瀏覽器（Chrome）中div距圖片底部預設沒有空白。
（標準模式下的底部3畫素空白，與img vertial-align的預設值baseline有關，其實大多數時候我們並不希望它保留空白，去除的方法也很簡單，設定vertial-align為一個不是baseline的合法值即可。）

3、在混雜模式下，表格中的字型不會繼承它祖先元素（比如body，比如包含table的div）的字型樣式。
4、在IE的混雜模式下，給inline元素設定高寬都有效。

5、在混雜模式下，IE和其他瀏覽器對百分比寬度的解析是不一樣的。如果父級是行內塊或者浮動或者有定位的元素，給子元素設定百分比寬度100%時，IE的混雜會以父級的100%算（父級沒有設定寬度，則再往上一層找），而標準瀏覽器是取決於內容的寬度。

6、在混雜模式下，當我們給一個元素設百分比高度，其他瀏覽器（正常，inline高度無變化，inline-block和block都會按百分比），而IE是自適應到內容高度。

7、overflow溢位預設值的問題。標準模式下，溢位元素是溢位可見的，超出部分的內容呈現在它的包含元素外。在混雜模式下，IE瀏覽器的溢位元素會自適應內容的尺寸。

 

觸發嚴格模式:

  1. <!-- HTML 4.01 嚴格型 -->  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">   
  3.   
  4. <!-- XHTML 1.0 嚴格型 -->  
  5. <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

觸發混雜模式

  1. <!-- HTML 4.01 過渡型 -->  
  2. <!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">   
  3.   
  4. <!-- HTML 4.01 框架集型 -->  
  5. <!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">   
  6.   
  7. <!-- XHTML 1.0 過渡型 -->  
  8. <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  9.   
  10. <!-- XHTML 1.0 框架集型 -->  
  11. <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  

 

相關文章