doctype(文档类型)的作用是什么?转载

时间:2023-03-09 16:24:14
doctype(文档类型)的作用是什么?转载

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

Document Type 文档类型,缩写成DOCTYPE,在html中它就是个标签:<!DOCTYPE>,它有自己的声明格式,不是在html标签前加上它就完事了的,查看qq.com页面源码可见如下声明:

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

DOCTYPE 包含 6 部分:

  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?

这个问题的最直接答案是:不写doctype,浏览器会进入quirks mode (混杂模式)

  Q:如何判断浏览使用哪种方式解析css

  A:这其实是上面问题的复习和延伸。直接给出答案:

    1、没有doctype声明的采用quirks mode解析

    2、对于有doctype的大多数采用standard mord(这里为什么用大多数,请读者思考,请参考http://hsivonen.iki.fi/doctype/

    3、特殊情况:

      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+影响模式的要求就更加复杂,其中包含网站是否为内网网站,该网站有没有添加到兼容性视图列表当中。倘若IE6、7中安装了Google Chrome Frame插件,那么就不仅doctype嗅探会影响text/html内容的模式了。(Google Chrome Frame其实就在IE6、7、8、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