blog icon indicating copy to clipboard operation
blog copied to clipboard
verified publisher icon SamHwang1990

浅析HTML Doctype

Open SamHwang1990 opened this issue 8 years ago • 0 comments

[toc]

简单梳理下html doctype 的一些知识点。

Doctype 简介

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

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

浏览器渲染模式

浏览器渲染模式大概有三种：

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

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

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

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

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

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

标准的DOCTYPE 语法如下，参考自：DOCTYPE作用及用法详解

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

下面罗列下各渲染模式的DOCTYPE。

常见的几种DOCTYPE

HTML 4.01 strict doctype

<!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 <font>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").

大致翻译如下：

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

HTML 4.01 transitional doctype

<!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

<!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

<!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/>
  • 不允许缩写元素属性，属性值也必须使用双引号包裹
  • 标签名大小写敏感

XML 1.0 transitional doctype

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

XML 1.0 frameset doctype

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

上面的DOCTYPE中，strict模式即Standard 渲染模式，而transitional模式即Almost Standards 渲染模式。

若文档中没有显式声明DOCTYPE或使用的DOCTYPE有误，都会导致浏览器切换至Quirks 渲染模式。

HTML5 的DOCTYPE

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

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

<!DOCTYPE html>

只需要这么简单的声明就可以引导浏览器使用Standard 渲染模型了。原理总结如下：

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

各模式的具体差别

渲染模式的差别

简单来讲，一个html 文档在浏览器中的渲染涉及三块：html 语法解析、css 语法解析与渲染、js 解析相关。

而不同渲染模式对文档的渲染影响主要在css 语法解析与渲染上，影响到html、js 解析的只有一小块。

各渲染模式具体的差别可以参见：

HTML、XHTML 的差别

HTML、XHTML 主要是html 语法严谨性上有所不同：

HTML XHTML
Elements and attributes are case insensitive, eg   <h1>is the same thing as</h1> . Elements and attributes are case sensitive; they are all lowercase.
Certain elements don’t need a closing tag (eg paragraphs, <p>), while others (called “empty elements”) shouldn't have a closing tag (eg images, <img>). All elements must be explicitly closed (eg <p>A paragraph</p>). Elements without content should be closed using a slash in the start tag (eg <hr></hr> and <hr/> mean the same thing).
Attribute values may be written without being enclosed in quotes. Attribute values must be enclosed by quotes.
Shorthand can be used for certain attributes (ie <input required>). The full attribute form must be used for all attributes (eg <input required="required"/>).

大致翻译下就是：

HTML XHTML
元素和属性名大小写不敏感 元素和属性名大小写敏感，且一律为小写
空元素可以不关闭标签，比如<img> 每个元素都需要闭合。如果元素内容为空，则需要自闭合，比如<img/>
元素的属性值可以不用引号包裹 元素的属性值必须要用双引号包裹
允许使用缩写属性，比如<input required> 不允许使用缩写属性，每个属性都需要声明属性名与属性值，比如<input required="required"/>

其他

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

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

建议使用下面的X-UA-Compatible标签：

<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在内的众多现代网页技术。

参考文章

SamHwang1990 avatar Mar 17 '17 15:03 SamHwang1990