從零開始：你知道的、不知道的DOCTYPE

時間 2020-04-15

標籤開始知道不知道 doctype 简体版

原文原文鏈接

內容摘要：html

什麼是混雜模式、近標準模式和標準模式
如何查看頁面的渲染模式
文檔類型的種類
標準類型下的怪異行爲（頗有意思喲）

在開始學習前端以前，你總會須要建立一個 HTML。在 HTML 標籤以前，還有一個你可能不會注意到的<!DOCTYPE>標記。雖然它不顯眼，但咱們須要知道它爲何存在。前端

HTML 文件中，<!DOCTYPE>是必須的，須要放到整個文檔的頂部，格式爲<!DOCTYPE html>。它存在的意義在於阻止瀏覽器在渲染文檔時進入混雜模式(Quirks Mode)。也就是說<!DOCTYPE html>這一文檔類型能夠確保瀏覽器儘量地使用遵循規範的模式來渲染，而不是使用某些不符合規範的渲染模式。web

1、混雜模式和標準模式

好久好久之前，web 頁面主要運行在兩類瀏覽器：網景的 Navigator 和微軟的 IE。後來 W3C 制定了 web 規範以後，爲了保證現有頁面可用，各大瀏覽器不能立馬使用新規範。瀏覽器

因而，瀏覽器廠商們引入了兩種模式來區別對待符合新標準的站點和舊的遺留站點：混雜模式（Quirks Mode）和標準模式（Standards Mode）。在過渡階段還存在一種接近標準模式（Almost Standards Mode）。app

混雜模式，也成爲 怪異模式，會兼容 Navigator 4 和 IE 5 的非標準行爲。
近標準模式會兼容少數的混雜行爲，能夠理解爲過渡模式。
標準模式只兼容符合標準描述的行爲。

請確保把 DOCTYPE 放在 HTML 文件的頂部。若是有任何其餘字符位於 DOCTYPE 以前，好比註釋或 XML 聲明，會致使 Internet Explorer 9 或更早期的瀏覽器觸發混雜模式。編輯器

若是你想知道有哪些混雜行爲，能夠參考混雜列表。近標準模式與混雜模式的區別參考這個連接。學習

2、如何查看頁面的渲染模式

在 Firefox 中，請從右鍵菜單選擇 查看頁面信息，而後查看 渲染模式。
在 Internet Explorer 中，請按下 F12，而後查看 文檔模式。
document.doctype能夠返回聲明的文檔類型。

舉個 Firefox 的例子：ui

3、有哪些文檔類型

文檔類型有不少，多到歪馬不想一一列舉，具體參見下圖：spa

圖中列舉了不一樣瀏覽器對於不一樣類型的文檔類型選擇什麼模式來渲染。其中包含了 HTML 發展過程當中不一樣版本所使用的文檔類型。文檔類型不少，好在咱們不須要記住。HTML5 以後，咱們只須要指定<!DOCTYPE html>便可讓瀏覽器儘量地按照標準來渲染。3d

此外，若是你的網頁使用 XHTML^[1] 並在 Content-Type HTTP 標頭使用application/xhtml+xml MIME 類型，你不須要使用 DOCTYPE 啓動標準模式，由於這種文件會永遠使用標準模式。不過因爲 IE9 才支持 XHTML，因此 IE9 以前的瀏覽器會由於不識別的格式，出現下載對話框。