Doctype历史学

　　随手打开一个HTML页面的源码的顶部，我们将看到诸如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">，这就是doctype。

　　“doctype身后有着悠久的历史——以及一种黑色艺术”。据说，IE5 for Mac的开发过程中，新版浏览器改进了许多对标准的支持，以至于一些旧的网页不能再正常呈现，即渲染结果与预期不相符合（旧页面是依照当时占统治地位的Netscape4和IE4的渲染行为而编写的）。微软针对此事的解决方案是：在开始渲染页面前，IE5/Mac首先检查"doctype"，而当时老旧的网页通常根本没有doctype。因此，网页作者在用心的“标准模式”时，就必须在html最开头加上正确的doctype。

　　于是，由此方案引发了基本所有浏览器的渲染模式：Quirks模式和标准模式(Standards Mode)。

Quirks模式和标准模式(Standards Mode)

　　据了解，Quirks模式和标准模式的区别体现在盒子模型的解释上，盒子模型主要就是块级元素在页面渲染上都是块状的矩形区域，更详细的相关资料请参考网上资料。

　　总的说来，Quirks模式会采用一些不符合标准规范的方式去兼容老的旧的网页，以保证显示的正常。而标准模式则更多的尝试采用符合标准规范的方式渲染页面文档，参考Quirks模式与Standards模式。

　　以下是相关细节的引用，来自浏览器Quirksmode(怪异模式)与标准模式(再回顾下)

那么浏览器究竟该采用哪种模式渲染呢？这就引出的DTD，既是网页的头部声明，浏览器会通过识别DTD而采用相对应的渲染模式：

1. 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。
2. 对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/
3. 对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析
4. 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
5. 可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。
6. 在ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version=”1.0″ encoding=”iso-8859-1″?>)，则采用quirks mode解析。这条规则在ie7中已经移除了。

Quirks mode和Standars mode最大的不同就是提现在对盒模式的解释上，这也是我们在js里要注意的地方。
    什么是盒模式？ 这是针对块级元素说的，说白了就是把块级元素想像成一个装东西的盒子，而margin,padding,border,width这些css属性构成了盒模式。

在Standars mode中：

元素真正的宽度 = margin-left  +  border-left-width  +  padding-left  + width  +  padding-right  +  border-right-width  +  margin-right;

在Quirks mode中：

width则是元素的实际宽度，内容宽度 = width  -  (margin-left  +  margin-right  +  padding-left  +  padding-right  +  border-left-width  +  border-right-width)

1. 内联元素 ，例如<a>|<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。
2.  内联元素（display: inline） 内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a|em|span等都为内联元素。内联元素可以为任何其他元素的子元素。
3. 浮动元素（无论左或者右浮动）边界不压缩 ，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。
4. 如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0% ，因此不会被显示，此点在采取层布局的时候需特别注意。
5. 边界值可为负，其显示效果各浏览器可能不相同。
6. 填充值不可为负。
7. 边框默认的样式（border-style）为不显示（none）。

在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode ,它有两个值：

BackCompat    对应quirks mode
CSS1Compat    对应strict mode

各浏览器的兼容性表，可以查看PPK的网站：

http://www.quirksmode.org/compatibility.html

参考文章：http://www.iteye.com/topic/241260

http://hi.baidu.com/sonan/blog/item/68c5394e395708c6d0c86a40.html

在看js代码时，有时会看到关于quirks mode(怪异模式)和strict mode(严格格式)的东西，一直也没深究怎么回事，只是零零碎碎的有些概念，最近终于受不了这种似懂非懂的感觉，决定好好学习总结一下。

1、quirks mode和strict mode是浏览器解析css的两种模式，或者可以称之为解析方法。目前正在使用的浏览器这两种模式都支持 。

2、历史原因。

当早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式).

3、后来的浏览器虽然支持strict mode，但众多浏览器并未放弃支持quirks mode。

一个重要的原因就是为了之前大量在quirks mode下开发的网页能够得到正确的显示。所以，这些支持两种模式的浏览器当拿到一张网页时，所做的一个前期工作就是判断采取何种方式进行解析(判断条件 后面会说)。注：Explorer 5仍然只支持quirks mode

4、浏览器如何判断何用哪种方式解析CSS？

解决方案就是采用doctype声明，大多数浏览器采用下面的这些判断规则

浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。
    对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/
    对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：
对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析

在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。

可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。

在ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version=”1.0″ encoding=”iso-8859-1″?>)，则采用quirks mode解析。这条规则在ie7中已经移除了。

5、mozilla提出了almost strict moede ，和strict mode的区别是：

img元素在strict中是inline的，而在almost strict mode中是block的。其实我们前面所说，在大多数浏览器，大多数doctype声明触发的是almost strict mode;

6、quirks mode和strict mode最大的不同就是提现在对盒模式的解释上 ，这也是我们在js里要注意的地方。

什么是盒模式？ 这是针对块级元素说的，我这里只简单说一下(详情请查阅相关资料)。说白了就是把块级元素想像成一个装东西的盒子，而margin,padding,border,width这些css属性构成了盒模式。

而区别就是产生在width属性上：

IE6 IE7 在怪异模式下 盒模型是一模一样的   即width=width
IE6 IE7 在标准模式下 盒模型也是一模一样的 即width=width+padding+border

看实验：http://bbs.blueidea.com/thread-2839403-1-1.html

在strict mode中 ：

width是内容宽度 ，也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

在quirks mode中 ：

width则是元素的实际宽度 ，内容宽度 = width – (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

这里把盒模式相关的东西记录一下，备忘 ！

·内联元素 ，例如<a>、<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决 定，而不是填充或边界。 注2. 内联元素（display: inline） 内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。

·浮动元素（无论左或者右浮动）边界不压缩 ，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。

·如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0% ，因此不会被显示，此点在采取层布局的时候需特别注意。

·边界值可为负，其显示效果各浏览器可能不相同 。

·填充值不可为负 。

·边框默认的样式（border-style）为不显示（none） 。

7、在quirks mode 和 strict mode中还有一个区别 ，但没经过验证，我只是发现有这个现象。

在strict mode 中，

table的css属性font-size会继承父级元素的 ，也就是说，table中的字体大小会继承父级元素字体的大小。

在quirks mode 中，

table的css属性font-size不会继承父级元素的 ，需要专门设置一下。也就是说，table中的字体大小不会继承父级元素字体的大小。

8、在js中如何判断当前浏览器正在以何种方式解析？
    document对象有个属性compatMode ,它有两个值：
        BackCompat    对应quirks mode
        CSS1Compat    对应strict mode

9、我们在编写跨浏览器兼容性的js代码时，常用到的判断代码(来源于ext) ：

Js代码
var ua = navigator.userAgent.toLowerCase();   
       var client = {   
        isStrict:    document.compatMode == ‘CSS1Compat’,   
        isOpera:     ua.indexOf(‘opera’) > -1,   
        isIE:        ua.indexOf(‘msie’) > -1,   
        isIE7:       ua.indexOf(‘msie 7′) > -1,   
        isSafari:    /webkit|khtml/.test(ua),   
        isWindows:   ua.indexOf(‘windows’) != -1 || ua.indexOf(‘win32′) != -1,   
        isMac:       ua.indexOf(‘macintosh’) != -1 || ua.indexOf(‘mac os x’) != -1,   
        isLinux:     ua.indexOf(‘linux’) != -1   
        };   
        client.isBorderBox = client.isIE && !client.isStrict;   
        client.isSafari3 = client.isSafari && !!(document.evaluate);   
        client.isGecko = ua.indexOf(‘gecko’) != -1 && !client.isSafari;   
  
       /**
         * You’re not sill using IE6 are you?
         */  
       var ltIE7 = client.isIE && !client.isIE7;

var ua = navigator.userAgent.toLowerCase();
        var client = {
        isStrict:   document.compatMode == ‘CSS1Compat’,
        isOpera:    ua.indexOf(‘opera’) > -1,
        isIE:       ua.indexOf(‘msie’) > -1,
        isIE7:      ua.indexOf(‘msie 7′) > -1,
        isSafari:   /webkit|khtml/.test(ua),
        isWindows:  ua.indexOf(‘windows’) != -1 || ua.indexOf(‘win32′) != -1,
        isMac:      ua.indexOf(‘macintosh’) != -1 || ua.indexOf(‘mac os x’) != -1,
        isLinux:    ua.indexOf(‘linux’) != -1
        };
        client.isBorderBox = client.isIE && !client.isStrict;
        client.isSafari3 = client.isSafari && !!(document.evaluate);
        client.isGecko = ua.indexOf(‘gecko’) != -1 && !client.isSafari;

/**
         * You’re not sill using IE6 are you?
         */
        var ltIE7 = client.isIE && !client.isIE7;

10、废话 ：我不知道现在的很多js框架为什么还对解析模式进行了判断。我认为这些框架肯定是给现在要开发的项目使用的，那应该都是strict mode才对呀？是不是因为还有很多人不习惯给页面加上doctype声明呢？

原文转自：http://kino.iteye.com/blog/241260

如何进入Standards模式?
一般来讲浏览器是通过DTD来判断模式的；浏览器进入Standards模式的DTD有：HTML的strict.dtd和loose.dtd这两个DTD的简单区别是

strict去掉了许多表现的标签，有利于结构和表现的分离
loose会导致Firefox进入Almost Standards模式，在图片的处理上会有微小的差别
在IE6下，如果在DTD之前有任何字符都将导致其进入quirks模式

Quirks模式与Standards模式的区别
quirks和standards的区别很多都可以归为IE5和IE6的区别。

盒模型的高宽包含内补丁和边框
在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了padding和border。IE5.5及以下的浏览器即使在Standards模式下，也会有这个问题
可以设置行内元素的高宽
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效
可设置百分比的高度
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的
用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:
body{text-align:center};#{content:text-align:left}
可以设置行内元素的高宽
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效
设置图片的padding会失效
Table中的字体属性不能继承上层的设置
white-space: pre会失效
许多CSS默认样式将不同
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效
JavaScript中的区别

http://www.quirksmode.org/js/contents.html#general

css中的区别

http://www.quirksmode.org/css/quirksmode.html

参考
Table of measurements
MSDN
dom中的document有一个属性叫compatMode,其返回值是BackCompat和CSS1Compat，分别对应quirks mode和strict mode

void function(){
var mode=document.compat
if (mode=”BackCompat”)
alert(“当前以quirks mode的方式渲染页面”);
else if(mode=”CSS1Compat”)
alert(“当前已strict mode的方式渲染页面”);
else alert(“浏览器版本不支持compatMode”);
}()

转载于:https://www.cnblogs.com/Dracoer/archive/2013/03/02/2940429.html

Doctype文档类型学习小结相关推荐

  1. html加了文档声明之后页面错乱,DOCTYPE 文档类型声明(网页爱好者必看)

    DOCTYPE 文档类型声明(网页爱好者必看) 发布时间:2009-11-02 00:59:13   作者:佚名   我要评论 文档类型声明与不声明,将会导致你的css或js都无法正常安装要求显示.所 ...

  2. Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?Doctype文档类型？

    Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?Doctype文档类型? 一.Doctype作用? 二.严格模式与混杂模式如何区分? 三.它们有何意义? 四.Doctype文档类型? ...

  3. html5文档类型的doctype,DOCTYPE 文档类型

    HTML5学堂:在HTML版本从4.0升级到5.0之后,可以采用这种最新的文档声明方式,那么以前4.0版本,我们也应当有所了解,主要包括过渡定义类型.严格定义类型.框架定义类型. 近日,考核8班几个孩 ...

  4. HTML DOCTYPE 标签 -- DTDs 文档类型声明

    来源:http://www.dreamdu.com/xhtml/tag_doctype/ 14.1. HTML DOCTYPE 标签 -- DTDs 文档类型声明 DOCTYPE 标签 -- 定义了标 ...

  5. DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义

    DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义 今天看到一篇CSS应用的一个友好搜索,我按网页上的代码复制.粘贴后预览时总达不到效果,而直接拷贝他的实例却能达到效果, ...

  6. 文档声明Doctype和Doctype html区别 文档类型定义（DTD）

    文档类型定义(DTD)可定义合法的XML文档构建模块.它使用一系列合法的元素来定义文档的结构. DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用. 文档声明的作用: 文档声明是为了告诉浏 ...

  7. 文档类型定义和合法性(2)

    8.5.3 子元素列表 由于SEASON元素被声明为可以接受任何元素作为子元素,因而可以接受各种各样的元素.当遇到那些多多少少有些非结构化的文本,如杂志文章时,这种情况就很有用.这时段落.副栏.项目列 ...

  8. XML之文档类型定义和合法性（转）

    来至:liang--liang博客:http://www.cnblogs.com/liang--liang/archive/2008/01/15/1039277.html 好牛 XML被作为一种元标记 ...

  9. XML文档类型定义DTD

    DTD概述 DTD用来定义XML文档的结构,它包含一系列规则说明,以确保XML文档的一致性和有效性 DTD定义了XML文档可用的词汇(元素和属性的名称)和结构: 元素名称,包括根元素 元素的属性及属性 ...

最新文章

  1. 利用Pytorch的C++前端(libtorch)读取预训练权重并进行预测
  2. 分享一款自用网站导航分类目录程序源码
  3. 关于组策略软件限制策略规则
  4. open一个绝对路径地址 python_实例15：用Python批量转换doc文件为docx文件
  5. 2016.08.30~2017.07.20
  6. Linux基础——Linux 基本指令 touch, cp 和 mv
  7. ios拇指社保应用源码
  8. 依赖注入框架Autofac的简单使用
  9. android t9键盘,T9/全键盘/侧滑 论手机键盘设计优缺点
  10. php sql注入防御方法,SQL注入防御的方法有哪些
  11. MD5加密解密网站测试，MD5加密还安全吗？
  12. python验证码图片生成
  13. Linux消息队列的设置及查看
  14. 解决MySQL报错[Err] 1093 - You can't specify target...
  15. 下一代半导体表面清洁技术
  16. 北京中国科学院计算机专业怎么样,中国科学院北京计算技术研究所计算机技术怎么样...
  17. 【Java小游戏】两小时制作大鱼吃小鱼小游戏项目
  18. 电商平台商品订单拆分模式分析
  19. 大屏可视化色彩设计基本知识
  20. shell脚本俄罗斯方块

热门文章

  1. centos 6.5 安装dotnet core 2.2
  2. redis集群之主从架构
  3. XML配置文件的命名空间与Spring配置文件中的头
  4. 【转】HTML5 本地存储五种方案
  5. MFC命令消息的路由
  6. Android开发六年收获阿里offer定级P7，多亏在阿里P8师兄给的攻略、面试技巧以及学习笔记！！！
  7. Android10.0 Binder通信原理(七)-Framework binder示例
  8. Java学习笔记15
  9. 事件分发机制并不是洪水猛兽
  10. Postman 调试技巧