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

时间 2020-02-05

标签 html 学习笔记 doctype dtd 标准模式兼容栏目 HTML 繁體版

原文原文链接

主要涉及知识点：
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声明：
php

<!DOCTYPE html>

而HTML4.01基于SGML，因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型，有如下三种类型：
HTML 4.01 Strict DOCTYPE声明：html

<!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声明：ide

<!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内核。ui

关于百分比的高度设置：在标准模式下，一个元素的高度是由其包含的内容来决定的，若是父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的。
关于水平居中设置：在标准模式下，使用margin:0 auto可使元素水平居中，但在兼容模式下会失效。
关于!important声明：在兼容模式下，IE6/7/8下使用!important声明无效。
其余：兼容模式下，设置图片的padding会失效；table中的字体属性不能继承父元素的字体属性；设置white-space:pre会失效。spa

转载于猿2048:➫《HTML学习笔记——DOCTYPE和DTD，标准模式和兼容模式》