doctype(文檔類型)的做用是什麼?轉載

<!DOCTYPE> 聲明位於文檔中的最前面的位置,處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。php

Document Type 文檔類型,縮寫成DOCTYPE,在html中它就是個標籤:<!DOCTYPE>,它有本身的聲明格式,不是在html標籤前加上它就完事了的,查看qq.com頁面源碼可見以下聲明:css

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

DOCTYPE 包含 6 部分:html

  1. 字符串「<!DOCTYPE」
  2. 根元素通用標識符「HTML」
  3. 字符串「PUBLIC」
  4. 被引號括起來的公共標識符(publicId)
  5. 被引號括起來的系統標識符(systemId)重點在這裏 ,繼續往下看
  6. 字符串「>」

看上去蠻複雜的,不用去糾結,通常只有三種(Strict Transitional Frameset)聲明(以XHTML爲例)前端

上面也提到,Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔,上文說到的DOCTYPE組成中的第5部分所引入的dtd文件則包含了標記、attributes 、properties、約束規則。除此外,Doctype還會對瀏覽器的渲染模式產生影響,不一樣的渲染模式會影響到瀏覽器對於 CSS 代碼甚至 JavaScript 腳本的解析,因此Doctype是很是關鍵的,尤爲是在 IE 系列瀏覽器中,由DOCTYPE 所決定的 HTML 頁面的渲染模式相當重要。面試

兩種渲染模式:瀏覽器

  • BackCompat:標準兼容模式未開啓(或叫怪異模式[Quirks mode]、混雜模式)
  • CSS1Compat:標準兼容模式已開啓(或叫嚴格模式[Standards mode/Strict mode])

若是不聲明doctype?app

這個問題的最直接答案是:不寫doctype,瀏覽器會進入quirks mode (混雜模式)dom

  Q:如何判斷瀏覽使用哪一種方式解析css網站

  A:這實際上是上面問題的複習和延伸。直接給出答案:ui

    一、沒有doctype聲明的採用quirks mode解析

    二、對於有doctype的大多數採用standard mord(這裏爲何用大多數,請讀者思考,請參考http://hsivonen.iki.fi/doctype/

    三、特殊狀況:

      a、對於那些瀏覽器不能識別的doctype ,瀏覽器採用quirks mode

      b、沒有聲明DTD或者html版本聲明低於4.0採用quirks mode其餘使用standard mode

      c、你能看到的如今的大多數網頁採用的是standard mode

      d、ie6中,若是在doctype聲明前有一個xml聲明(好比:<?xml version="1.0" encoding="iso-8859-1"?>),則採用quirks mode解析。(這點估計連面試官都沒   

js如何判斷瀏覽器正在以何種方式解析?

function getMode{
    var _cm = docoment.compatMode;
    if(_cm == 'CSS1Compat'){
         return "strict"
    } 
    if(_cm == 'BackCompat' ){
         return  'quirks'
    } 
}
   各類模式

   text/html 內容的模式
  通常來說doctype嗅探將影響text/html內容的模式。IE8+影響模式的要求就更加複雜,其中包含網站是否爲內網網站,該網站有沒有添加到兼容性視圖列表當中。假若IE六、7中安裝了Google Chrome Frame插件,那麼就不只doctype嗅探會影響text/html內容的模式了。(Google Chrome Frame其實就在IE六、七、八、9下使用Webkit做內核的插件)
     怪異模式
        怪異模式是瀏覽器爲了正確呈現90年代後期製做的網頁,從而違反當前Web規範的模式。之前,各瀏覽器的怪異模式各不相同。IE6789的怪異模式其實就是IE5.5的文檔模式,而其餘瀏覽器的怪異模式就稍微與近標準模式有誤差而已。但IE10開始,其怪異模式再也不仿照IE5.5的文檔模式了,而是和其餘瀏覽器的怪異模式相近了。
    若是你正在開發一個新網站,千萬不要用怪異模式,用標準模式吧朋友。
 
     標準模式
        標準模式下,瀏覽器嘗試對網站提供HTML規範處理外,還提供瀏覽器獨有的各類特性。
        因爲各瀏覽器對HTML規範實現的不一樣,因此各瀏覽器的標準模式不盡相同。
        在HTML specification中標準模式被稱做「非怪異模式」。
 
     準標準模式
        Firefox、Safari、Chrome、Opera(從7.5開始)、IE8910,有有「準標準模式」,其不按CSS2標準而實現了vertical sizing of table cells(求高手解答,這是啥啊?)。Mac IE5,Windows IE67,Opera7.5前的版本和Konquer均沒有準標準模式,由於它們在各自的標準模式中實現了vertical sizing of table cells。實際上,它們的標準模式更接近於近標準模式而不是如今瀏覽器的標準模式。
        回顧歷史咱們會發現,在不區分「標準模式」和「近標準模式」,默認使用「準標準模式」的行爲特徵,並使用「標準模式」的CSS特徵會讓Web更美好。不過咱們依然應優先使用「標準模式」。
        在HTML specification中準標準模式被稱爲「受限的怪異模式」。
 
    application/xhtml+xml內容的模式(XML模式)
        Firefox,Safari,Chrome,Opera 和 IE9,HTTP頭的Content-Type爲application/xhtml+xml會觸發XML模式。當處理XML模式時,上述瀏覽器會結合自身瀏覽器所提供的特徵行爲並符合標準規範來解析、處理XML文檔。
·       除了IE5外,IE678是不支持application/xhtml+xml的。

 

引用

前端翻譯:Activating Browser Modes with Doctype

前端面霸系列(1):doctype 、Quirks Mode & Standards Mode 、document.compatMode

正確使用DOCTYPE

相關文章
相關標籤/搜索