爲什麼要用聲明

實例:

我們經常會看到類似這樣的代碼:

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>文檔的標題</title>  
  5. </head>  
  6. <body>  
  7. 文檔的內容......  
  8. </body>  
  9. </html>  

註解:可以看到最上面有一行關於“DOCTYPE”(文檔類型)的聲明,它就是告訴瀏覽器,使用哪種規範來解釋這個文檔中的規範。你知道如果沒有它,瀏覽器在渲染頁面的時候會使用怪異模式(各個瀏覽器在怪異模式下對各個元素渲染時有差異,因此會導致同一個樣式在不同瀏覽器上看到的效果不同)。

定義和用法

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行,位於 <html> 標籤之前。

<!DOCTYPE> 聲明不是 HTML 標籤;它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。

在 HTML 4.01 中,<!DOCTYPE> 聲明引用 DTD,因爲 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則,這樣瀏覽器才能正確地呈現內容。

HTML5 不基於 SGML,所以不需要引用 DTD。

提示:請始終向 HTML 文檔添加 <!DOCTYPE> 聲明,這樣瀏覽器才能獲知文檔類型。

HTML 4.01 與 HTML5 之間的差異

在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種:

<!DOCTYPE html>

HTML 元素和文檔類型(Doctype)

提示和註釋

註釋:<!DOCTYPE> 聲明沒有結束標籤。

提示:<!DOCTYPE> 聲明對大小寫不敏感。

提示:請使用 W3C 的驗證器來檢查您是否編寫了有效的 HTML / XHTML 文檔!

常用的 DOCTYPE 聲明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

該 DTD 包含所有 HTML 元素和屬性,但不包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。

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

HTML 4.01 Transitional

該 DTD 包含所有 HTML 元素和屬性,包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。

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

HTML 4.01 Frameset

該 DTD 等同於 HTML 4.01 Transitional,但允許框架集內容。

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

XHTML 1.0 Strict

該 DTD 包含所有 HTML 元素和屬性,但不包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。必須以格式正確的 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 包含所有 HTML 元素和屬性,包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。必須以格式正確的 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,但允許框架集內容。

<!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時)聲明文檔類型:

<!DOCTYPE html>

這樣聲明的好處:

  • 你可以輕鬆的寫下這個doctype,而不用擔心會寫錯;
  • 它是向後兼容的(因爲HTML5的doctype就是這樣寫的),並且現代瀏覽器都認識它。

疑問:沒有指定dtd將會開啓瀏覽器的怪異模式?

       這種說法是錯的!正確的說法應該是沒有定義doctype纔會開啓怪異模式,也就是說你只需要定義就可以讓瀏覽器在嚴格模式(標準模式)下渲染頁面,而不需要指定某個類型dtd。


回顧一下:

       所有的瀏覽器都有兩種模式:怪異模式和嚴格模式(也有人叫標準模式)。IE 6 for Windows/mac, Mozilla, Safari和Opera 都實現了這兩種模式,但是IE 6以下版本永遠定在了怪異模式。


關於兩種模式,你需要知道以下幾點:

  1. 在標準化之前寫的頁面是沒有doctype的,因此沒有doctype的頁面是在怪異模式下渲染的
  2. 反過來說,如果web開發人員加入的doctype,說明他知道他所要做的事情,大部分的doctype會開啓嚴格模式(標準模式),頁面也會按照標準來渲染。
  3. 任何新的或者未知的doctype都會開啓嚴格模式(標準模式)。
  4. 每個瀏覽器都有自己的方式來激活怪異模式。

你可以看看這個清單:http://hsivonen.iki.fi/doctype/

注意:你可以根本不需要根據你選擇的doctype來驗證你的頁面,只要doctype標籤存在就足以開啓嚴格模式(標準模式)了。如果仍感到懷疑,那麼請前往http://www.quirksmode.org/css/quirksmode.html#link2瞭解你想知道的內容。

我們只需要一小段JavaScript代碼就可以得到答案,它就是:

[javascript] view plain copy
  1. mode=document.compatMode;  

這個代碼可以用來判斷,當前瀏覽器是處於怪異模式還是標準模式,該屬性的兼容性毋庸置疑,如果你表示懷疑,可以查看http://www.quirksmode.org/dom/w3c_html.html#t11


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章