HTML学习笔记——DOCTYPE和DTD，标准模式和兼容模式

主要涉及知识点：

HTML与XHTML
HTML与XHTML的区别
DOCTYPE与DTD的概念
DTD的分类以及DOCTYPE的声明方式
标准模式（Standard Mode）和兼容模式（Quircks Mode）
标准模式（Standard Mode）和兼容模式（Quircks Mode）的区别

HTML与XHTML

HTML:超文本标记语言 (Hyper Text Markup Language)
XHTML:可扩展超文本标记语言 (EXtensible HyperText Markup Language)，是一种置标语言。
HTML是一种基于标准通用标记语言（SGML）的应用，XHTML则基于可扩展标记语言（XML）
XHTML的目标是取代HTML，与HTML4.01几乎相同，是更严格更纯净的 HTML 版本。
HTML 和 XHTML 的区别简单来说，XHTML 可以认为是 XML 版本的 HTML，为符合 XML 要求，XHTML 语法上要求更严谨些。

本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。建立XHTML的目的就是实现HTML向XML的过渡。在HTML5成为主流之前，Html4.01一直是大多数人使用的Html版本，Html5目标是取代HTML4.01和XHTML1.0标准，旨在提高网页性能，增加页面交互。

HTML与XHTML的区别

XHTML 与 HTML 4.01 标准没有太多的不同。主要的不同体现在下面几点：

XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

DOCTYPE与DTD的概念

文档类型定义(Document Type Definition)是一套为了进行程序间的数据交换而建立的关于标记符的语法规则，是HTML的验证机制。DOCTYPE标签是一种标准通用标记语言的文档类型声明，声明文档的解析类型，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的DTD（用什么样的文档标准）来解析文档。DTD定义了文档中的元素(标记和属性)和实体，以及相互关系。通过DTD验证XML文档的有效性。DTD为解析器提供了解析HTML文档的依据。

DTD的分类以及DOCTYPE的声明方式

由于HTML5不基于 SGML，因此不需要对DTD进行引用；但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。
因此HTML5的DOCTYPE声明：
<!DOCTYPE html>

而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型，有以下三种类型：

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 Transitional DOCTYPE声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset DOCTYPE声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict DOCTYPE声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional DOCTYPE声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset DOCTYPE声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

三种DTD类型的作用说明：

Strict : 干净的标记，免于表现层的混乱，与层叠样式表（CSS）配合使用。
Transitional :包含 W3C 所期望移入样式表的呈现属性和元素。使用不支持层叠样式表（CSS）的浏览器时使用。
Frameset : 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset等同于 Transitional。

标准模式（Standard Mode）和兼容模式（Quircks Mode）

在W3C标准出来之前，浏览器对页面的渲染没有统一的标准，各个浏览器对同一页面的渲染有一定的差异，而每个浏览器的不同版本对页面的渲染也有一定程度上的差异。而W3C标准出来之后，浏览器对页面的渲染就有了统一的标准。前者对于浏览器使用自己的方式渲染页面的模式，我们称之为Quircks Mode（怪异模式、兼容模式或混杂模式）；而对于后者浏览器按照标准解析执行代码的模式，我们称之为Standard Mode（标准模式或严格模式）。在标准模式中，浏览器根据规范呈现页面；在兼容模式中，页面以一种比较宽松的向后兼容的方式显示。其实，还有一种模式叫近标准模式，它与标准模式一致，除了在处理下面这种情况时：如果一个块级元素除了空白文本（空格，tab等字符）外再无其它内容，则它的高度按0处理；如果有子元素，则它的高度不能比子元素大，无论它的font-size多大。
那么，浏览器解析时到底使用标准模式还是怪异模式？这就和之前提到的DOCTYPE有关了。

标准模式：

XHTML文档包含完整的DOCTYPE声明时，一般以标准模式呈现；
文档包含严格DTD类型的DOCTYPE声明时，以标准模式呈现；
文档包含过渡DTD类型的DOCTYPE声明且声明包含URI时，以标准模式呈现。

兼容模式：

文档不包含DOCTYPE声明或DOCTYPE声明不正确时，以兼容模式呈现；
文档包含过渡或框架DTD类型的DOCTYPE声明但声明不包含URI时，以兼容模式呈现；
在IE中，如果DOCTYPE声明在XML之后，以兼容模式呈现。

标准模式（Standard Mode）和兼容模式（Quircks Mode）的区别

最后总结一下，在标准模式和兼容模式下，页面的呈现主要有哪些区别：

关于盒模型：
在标准模式下，元素width是内容宽度，即：元素实际width = 元素width + 元素padding + 元素border，（盒子的宽度还要加上元素margin的宽度）；
在兼容模式下，元素width是元素的实际宽度，即：元素width = 元素内容width + 元素padding + 元素border，（盒子的宽度还要加上元素margin的宽度）。

盒模型：主要针对块级元素，把每个块级元素都想象成一个盒子，每个盒子有外边距（margin）、边框（border）、内边距（padding）、内容（content）。
关于行内元素：
对于行内元素的垂直对齐样式设置，基于 Gecko 的浏览器（Mozilla Firefox、HotBrowser、Mozilla Suite、Camino）标准模式对齐至基线，怪异模式对齐至底部；
对于行内元素的高度（height）和宽度（width）的设置，标准模式下不生效，而在兼容模式下会生效。
四大内核：
- Trident，主要有IE浏览器以及多核浏览器
- Gecko，主要有Firefox以及Firefox的衍生浏览器
- WebKit，主要有Chrome与Chrome的衍生浏览器、Safari以及多核浏览器
- Presto，之前主要应用于Opera，Opera现已改用Google Chrome的Blink内核。
关于百分比的高度设置：在标准模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的。
关于水平居中设置：在标准模式下，使用margin:0 auto可以使元素水平居中，但在兼容模式下会失效。
关于!important声明：在兼容模式下，IE6/7/8下使用!important声明无效。
其他：兼容模式下，设置图片的padding会失效；table中的字体属性不能继承父元素的字体属性；设置white-space:pre会失效。