HTML DOCTYPE及浏览器渲染模式

Posted on | In

doctype

Doctype简介

对于text/html类型的文件，在文件第一行，html根元素之前，添加一个doctype来声明文档类型，又称DTD(Document Type Definition)。例如：

1
2
3
4
5
<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

浏览器渲染模式

浏览器渲染模式有三种：

  • Standard(标准)模式，遵循浏览器支持的最新css解析标准；
  • Quirk(怪癖/兼容模式)，让浏览器以旧的兼容模式处理解析css；
  • Almost Standard(近似标准模式)，也叫过渡模式，让浏览器尝试以新标准方式来处理对旧标准实现的代码；

除了渲染模式不同，还有html、与xhtml 的差别：xhtml 会比html 更严格。

在html5之前，html都是基于SGML来实现。而SGML中使用DTD(Document Type Definition)的文件来定义不同SGML版本的语法。

之所以会出现这三种渲染模式，因为在IE5出现之前，浏览器对html语法和css的解析与html、css的标准有些出入。为了让旧的网页在新的，符合标准的浏览器上得到相对正常的渲染效果，从IE5开始，浏览器引入了Docutype来声明DTD，进而指引浏览器按指定的DTD来解析html、css。

具体到上文提到的渲染模式和xhtml，对应DOCTYPE 的概念就是：

  • 在SGML中，分别为每种渲染模式和xhtml类型声明了DTD，也就是声明了不同的语法规范和渲染规范；
  • 通过DOCUTYPE声明来指定当前文档所要使用的DTD，即允许开发者主动声明使用哪种渲染模式或是否使用xhtml 标准；
  • 若文档没有声明或使用了错误的DOCUTYPE，都会导致浏览器以Quirks模式来处理文档；

标准的DOCTYPE 语法如下：

1
语法：<!DOCTYPE 根元素 可用性 "注册//组织//类型 标签 定义//语言" "URL">

在HTML5中直接以<!DOCTYPE html>出现。

常见的DOCTYPE

HTML 4.01 strict doctype

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 strict doctype 适用于验证文档是否符合 HTML 4.01 规范。该规范有如下特点：

The HTML 4.01 strict doctype validates against the HTML 4.01 spec, although it doesn’t allow any presentational markup or deprecated elements (such as elements) or framesets to be used. It validates loose HTML style markup, such as minimized attributes and non-quoted attributes (eg required, rather than required=”required”).

主要的意思：

  • 只支持结构化的元素标记
  • 不支持过时的元素标记，比如、frame、frameset
  • 支持灵活的html 元素写法，比如属性的值不加引号、或缩写属性（比如支持required和required=”required”）、标签名大小写不敏感;

HTML 4.01 transitional doctype

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 transitional doctype 的文档规范与strict 模式几乎一样。差别一些css 的渲染上与strict 模式有所不同。

HTML 4.01 frameset doctype

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 frameset doctype 规范允许使用frame、frameset元素。鉴于使用这两个元素会产生很多问题，所以，非常不建议使用这个doctype。

XML 1.0 strict doctype

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

These are the exact XHTML 1.0 equivalents of the HTML 4.01 doctypes we discussed above, so functionally they are the same, except that they won’t validate loose HTML style markup: it all needs to be well formed XML.

XML 1.0 strict doctype 声明文档使用的是XHTML 1.0 版本的规范，该规范对应与HTML 4.01 的xml 版本。

XHTML 与HTML 规范在使用上几乎一样，除了一点：

  • XHTML 不支持使用灵活的html 元素写法；

具体的差别体现在：

  • 不支持空元素，每个元素必须有开有闭，例如常见的<img>、<input>等空元素必须写成<img/>、<input/>；
  • 不允许缩写元素属性，属性值也必须使用双引号包裹；
  • 标签名大小写敏感

与HTML类似的也有XML 1.0 transitional doctype和XML 1.0 frameset doctype形式，strict模式即Standard 渲染模式，而transitional模式即Almost Standards 渲染模式。

HTML5的DOCTYPE

由于HTML5 已经不再基于SGML 来实现了，所以，理论上HTML5 不需要再声明DOCTYPE，而且在SGML 中也没有一种DTD 时适用HTML5 的实现的。

但如果文档不声明DOCTYPE，则参照上文，浏览器会切换到Quirks 渲染模式。而为了避免该问题，HTML5 使用以下DOCTYPE：

1
<!DOCTYPE html>
  • 必须声明doctype，避免浏览器使用Quirks 模式；
  • 不需要引用DTD，因为HTML5 不再基于SGML 实现，没有可用的DTD；
  • 面对以上这个，没有声明DTD 的doctype，IE8+ 能切换到Standard 渲染模式，IE5、6、7 则切换到Almost Standards 渲染模式；

各模式的具体差别

渲染模式的差别

html 文档在浏览器中的渲染涉及三块：html 语法解析、css 语法解析与渲染、js 解析相关。

在HTML和CSS的标准未完成之前，各个浏览器有不同的解析规则，在新标准确定之后，浏览器一方面要按照标准做，另一方面要对非标准的旧网页设计保证向后兼容性。因此，现代的浏览器一般都有两种渲染模式：标准模式和怪异模式。

标准模式与怪异模式的两个常见区别

  • 盒模型的处理差异：标准CSS盒模型的宽度和高度等于内容区的高度和宽度，不包含内边距和边框，而IE6之前的浏览器实现的盒模型的宽高计算方式是包含内边距和边框的。因此，对于IE，怪异模式和标准模式下的盒模型宽高计算方式是不一样的；
  • 行内元素的垂直对齐：标准模式下，基于Gecko的浏览器将会对齐至基线，而在quirks模式下它们会对齐至底部。最直接的例子就是图片的显示。在标准模式下，图片并不是与父元素的下边框对齐的，因为标准模式下，图片是基线对齐的。而怪异模式下，则不存在这个问题。参考：CSS深入理解vertical-align和line-height的基友关系

其他

  1. X-UA-Compatible HTTP header
  2. X-UA-Compatible meta tag
  3. IE 文档模式

X-UA-Compatible是IE 浏览器一个专有<meta>属性，它告诉IE采用何种IE版本去渲染网页，在html的<head>标签中使用。一般建议将该属性设为以下值：

1
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame。

Chrome Frame：Chrome Frame可以让旧版IE浏览器使用Chrome的WebKit渲染引擎处理网页，因此旧版IE用户可以体验到包括HTML5在内的众多现代网页技术。