HTML DOCTYPE宣告以及混合模式(Quirks mode)

  • Prototype Hacker Mike Ko #matrixki
  • Nov 11
  • HTML

目前web開發進入HTML5的時代,開發者們常使用的起手式(boilerplate)往往是:

或者是bootstrap提供的:

 

可以注意到的是第一句都是 <!DOCTYPE html> ,

這就是所謂的HTML文件類型(document type)宣告,這樣的宣告是讓瀏覽器知道這份html是依據HTML5的標準去開發的,

而瀏覽器也會根據這樣的標準去呈現畫面。

 

如果開發者忘了宣告doctype,那麼瀏覽器就會進入所謂的Quirks mode混合模式,

混合模式的成因是由於瀏覽器並不知道這份文件是依據什麼樣的標準去撰寫的,

當然它也不知道怎麼樣的呈現才是正確的。

 

常見的狀況是css選擇器(selector)的class以及id在混合模式下是case insensitive(大小寫無區別),

而正常模式下是case sensitive(大小寫有區別),進而造成顯示的css style錯誤並造成網頁跑版。

[ 其中容易發生的錯誤行為可參考MDN網站:

https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior ]

 

HTML5之前的文件宣告類型有分三種:

  • HTML 4.01 Strict
  • HTML 4.01 Transitional
  • HTML 4.01 Frameset

[ 詳細的宣告方式請參考W3C網站:

http://www.w3schools.com/tags/tag_doctype.asp ]

 

說了那麼多其實結論是:

記得加上 <!DOCTYPE html> 就對了!