DOCTYPE 探索

jopen 10年前發布 | 5K 次閱讀 DOCTYPE

介紹

最近在我學習HTML5的時候，心里想到的第一個問題就是瀏覽器怎么會知道，我們編寫的HTML是否兼容HTML v4.1或者HTML v5呢.

為了找到對相同查詢的回復，我開始了我的探索，這里我想分享對此的一些了解. 研究這個東西的時候，我了解到所有這些都是由一個叫做 <!DOCTYPE> 的標簽來控制的，它是大多數網頁的最開頭的一個標簽，真正令我感覺驚奇的事情，則是因為我看到每一個web頁面不管何時被某個IDE添加，都會自動添加上這個標簽，而我也從未關心過這個標簽，也從未想過要去研究研究它，但這一次出于對這個標簽的好奇，我對此稍微更深入了一點.

本文中我將描述有關<!DOCTYPE>標簽的東西，并將給出下面一些問題的答案.

瀏覽器時如何知道，我們編寫的頁面是HTML4.1 還是 HTML5的呢?

什么是 <!DOCTYPE> 標簽，它是干什么的?

HTML4.1 & HTML5 有多少種類型的DOCTYPE?

在不同的瀏覽器上面，<!DOCTYPE> 是如何影響到HTML元素的渲染的?

錯誤的“<!DOCTYPE>”會怎樣使得一個HTML頁面不可用?

如何驗證一個頁面是是否是驗證通過的呢?

我們如何決定<!DOCTYPE>類型的定義呢?

<!DOCTYPE> 如何同文檔模式關聯起來的(標準, 怪異和大體標準模式) ，還有瀏覽器是如何決定是在標準模式，還是怪異模式下渲染一個網頁的呢?

讓我們開始研究

那么讓我們一個一個的來解答.

瀏覽器是如何知道我們寫的頁面是HTML4.1 還是 HTML5 的?

如我前面所說，使用某種IDE添加一個頁面的時候，一個叫做<!DOCTYPE>的標簽會自動被添加到web頁面的頂部，標簽里面會定義好一些屬性. 這個 <!DOCTYPE> 標簽呈述和通知瀏覽器頁面使用的HTML版本. 瀏覽器遇到一個包含此標簽的web頁面時，都會使用此文檔類型的值來決定用于此頁面的文檔模式. 由于HTML 5只有一個我們將會在后面討論的<!DOCTYPE>, 因此該 <!DOCTYPE> 就被定義成像這樣<!DOCTYPE html>. 該標簽自身顯示了web頁面是兼容HTML 5的. 因此<!DOCTYPE> 被定義成<!DOCTYPE html>時,就意味著我們使用了HTML5.

什么是“DOCTYPE” 標簽，它能干什么?

“文檔類型聲明” 或者說 <!DOCTYPE> 標簽向瀏覽器指出了我們編寫的HTML，web頁面所使用的笨笨，還有其他標簽將會在瀏覽器上被如何渲染.

<!DOCTYPE> 告訴瀏覽器, “我使用的是 HTML 4.01.” 當瀏覽器看到這個的時候，就知道你講的是什么，以及你確實是在編寫 HTML 4.01. 那樣瀏覽器就會使用面向 HTML 4.01的布局和顯示規則. 該標簽告知瀏覽器，所寫的是一個標準的為所有瀏覽器所接受的HTML。這一標準可以這3種之一例如我們將在下面進一步討論的嚴格、過度和框架集標準.

當“DOCTYPE” 被定義在一個頁面中時，瀏覽器就能準確知道如何處理你的頁面（至少是你關心的那些瀏覽器）如何按照預期的顯示. 它會告訴瀏覽器文檔的類型.

“DOCTYPE” 聲明表示使用了標準的HTML，而所寫的HTML頁面是兼容由W3C（萬維網聯盟）所定義標準的.

在HTML 4.01中, <!DOCTYPE> 申請引用了一個 DTD (文檔類型定義) . DTD 指定了標記語言的規則，因此瀏覽器能準確的渲染出內容來.

DTD的目的是定義好一個XML文檔的合法構造塊.DTD用一個合法元素和屬性的列表定義了文檔架構. DTD 可以在一個XML文檔里面內聯定義, 或者是作為一個外部文件被引用.

<!DOCTYPE> 標簽必須是HTML文檔的第一個標簽，它看起來像這樣

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

下面的圖片剖析了DOCTYPE標簽的每一個部分。請仔細閱讀，以獲得對此的一個合理的理解.

現在你可能會想到我們并沒有談及 ”過渡Transitional ”這個詞. 這個過渡是用來干嘛的呢? 如果我們寫的是 “標準 standard” HTML 4.01, 那為什么它要是過渡的呢? 讓我們來理解這樣作的意義.

實際上，存在兩個DOCTYPE, 一個是面向使用 HTML 4.01 編寫的HTML頁面的過渡的, 還有一個面向那些已經存在的更嚴格的 DOCTYPE.

設想你已經有一個擁有數以百計的web頁面的web站點. 你也許會想升級網站使全部的HTML升級到 4.01標準, 但是你的頁面中使用了許多HTML 2.0和3.2那個時代的舊東西. 你該怎么辦? 那就得使用 HTML 4.01 過渡的 DOCTYPE了, 它允許你驗證你的頁面，但是仍然允許一些傳統的HTML存在 . 那樣，你就能確保你的標記里面不會有明顯的錯誤(比如錯別字，標簽不配對等等)，而你就不用將整個HTML推導重來，以通過驗證. 然后，在你移除了全部的傳統HTML之后，你就已經對嚴格文檔類型有了完全的準備，就能確保你能有一個完全兼容的標準的Web站點.

DOCTYPE HTML4.1, XHTML & HTML5 有多少種類型?

HTML 4.01 & XHTML 有三類不同的 <!DOCTYPE> 聲明，而HTML5則僅僅只有一種 <!DOCTYPE> 聲明.

HTML 4.01 Strict

在這個DTD中, 除了展示性的以及過時的HTML 元素和屬性（比如font）之外，其它都允許. Frameset 也不被允許.

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

HTML 4.01 Transitional

在這個DTD中, 所有的HTML元素和屬性，包括展示性的和過時的元素（比如font）都允許. 但是Frameset仍然不被允許.

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

HTML 4.01 Frameset

在這個DTD中, 所有的HTML元素和屬性，包括展示性的和過時的元素（比如font），還有frameset內容，都允許.

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

XHTML 1.0 Strict

在這個 DTD 中, 標簽必須使用格式良好的XML編寫。除了展示性的和過時的，所有的HTML元素和屬性都允許使用。Frameset不被允許.

此 DTD 相當于 HTML4.01 Strict DTD，但是標記必須也是使用格式良好的 XML 編寫.

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

XHTML 1.0 Transitional

在這個 DTD 中, 標簽必須使用格式良好的XML編寫. 包括展示性和過時在內的，所有的HTML元素和屬性都允許使用。Frameset不被允許.

此 DTD 相當于 HTML4.01 Transitional DTD ，但是標記必須也是使用格式良好的 XML 編寫.

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

XHTML 1.0 Frameset

此 DTD 相當于 XHTML 1.0 Transitional, 但允許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, 但允許你添加模塊 (例如提供對于東亞語言的ruby支持).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML 5

<!DOCTYPE html>

不同的瀏覽器上，"<!DOCTYPE>" 是如何影響到HTML元素的渲染的?

不同瀏覽器對各種標簽的渲染都有所不同. 我們定義一個 DOCTYPE 的時候,就意味著我們在告訴瀏覽器使用了特定DOCTYPE的HTML標準.

當我回想一下不久的過去，我不解于應用程序的一些頁面會在“怪異”的瀏覽器模式下打開，而還有一些會在“標準”瀏覽器模式下打開而感到沮喪，真感覺好笑. 研究了"DOCTYPE", 我才知道只有正確的 "DOCTYPE" 才能讓web頁面在正確的瀏覽器模式下打開.

錯誤的“<!DOCTYPE>”怎樣使HTML無效的？

定義一個錯誤的DOCTYPE會使Web頁面無效。例如，當我們開發一個頁面，如果某人將DOCTYPE定義為Strict，并且還是用了廢棄的元素像是“font"，那么這個元素會使得頁面無效，或者我們使用了<img>標簽，而且沒有為這個標簽定義"Alt"屬性，這同樣會使頁面無效，因為根據Strict DTD，"Alt"屬性是<img>標簽的必選屬性。

如何驗證頁面是否有效?

W3C 擁有一個讓你可以根據定義的“<!DOCTYPE>”驗證頁面是否有效的站點.

http://validator.w3.org

此站點可以使用三種方式驗證一個頁面.

URL驗證可以驗證一個在線的頁面。如果你的站點時公開可用的，那么直接提供站點里面的url就可以是頁面得到驗證.
文件上傳驗證可以驗證上傳的頁面文件.

直接輸入驗證可以驗證在站點提供的指定區域輸入的一個頁面的標記拷貝.

我們應該怎樣決定定義<!DOCTYPE>的類型？

當定義“<!DOCTYPE>”時, 我們腦海中出現一個大問題關于我們應該怎樣決定我們應該定義什么類型的DOCTYPE (DTD). 好吧，這很簡單。

過渡期的DTD給了我們一個介于老樣式HTML和標準4.01HTML之間的過渡點，因此無論什么時候我們有一個想要兼容最新瀏覽器的老的頁面時，我們可以使用“Transitional”，然而如果我們在開發新的web頁面，那么必須使用Strict。

<!DOCTYPE> 如何同文檔模式關聯起來的(標準, 怪異和大體標準模式) ，還有瀏覽器是如何決定是在標準模式，還是怪異模式下渲染一個網頁的呢?

瀏覽器會計算出你不是真的使用了HTML 4.01，并回到怪異模式. 而后你回到讓不同瀏覽器以不同方式處理頁面的問題上來. 你可以預先估計結果的唯一方式就是告訴瀏覽器你使用的是 “HTML 4.01”并且實際上也遵循了標準. 由于web日益標準，再加上所有的瀏覽器都情愿只支持同一套標準，因此我們應該使用標準模式，它可以使用 <!DOCTYPE html> 來加以強制。

研究 DOCTYPE 時, 我恰巧朋友一個 OReilly’s Head First的書，里面有一段瀏覽器和Head First的有趣訪談. 我在這里想在下面和大家分享這段相當有趣的訪談.

在本文中，我們了解了 <!DOCTYPE> 和文檔的模式，它們在讓所有的瀏覽器對頁面有一個一致的渲染方面非常重要. 建議我們總是指示頁面使用標準文檔模式并總是在頁面中定義一個 <!DOCTYPE> 來避免任何兼容性問題.

如果你能讓我了解你對有關文章內容，展現和報道的意見和建議的，以幫助我提升我將來文章品質的話，我將不勝感謝.

祝學習愉快 …