doctype（文档类型）的做用是什么?转载

时间 2019-11-08

标签 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

字符串“<!DOCTYPE”
根元素通用标识符“HTML”
字符串“PUBLIC”
被引号括起来的公共标识符（publicId）
被引号括起来的系统标识符（systemId）重点在这里，继续往下看
字符串“>”

看上去蛮复杂的，不用去纠结，通常只有三种（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的。

引用

doctype（文档类型）的做用是什么?转载

前端翻译：Activating Browser Modes with Doctype

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

正确使用DOCTYPE