html和xhtml，DOCTYPE和DTD，标准模式和兼容模式

站长手记作者： 2024-08-28 07:45:01

主要涉及知识点： HTML与XHTML,HTML与XHTML的区别,DOCTYPE与DTD的概念,DTD的分类以及DOCTYPE的声明方式,标准模式（Standard Mode）和兼容模式（Quircks Mode）,标准模式（Standard Mode）和兼容模式（Quircks Mode）的区别

主要涉及知识点：

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 语法上要求更严谨些。

HTML与XHTML的区别

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

DOCTYPE与DTD的概念

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

<!DOCTYPE html>

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）

标准模式：

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

兼容模式：

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

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

关于盒模型：
在标准模式下，元素width是内容宽度，即：元素实际width = 元素width + 元素padding + 元素margin + 元素border；
在兼容模式下，元素width是元素的实际宽度，即：元素width = 元素内容width + 元素padding + 元素margin + 元素border。
关于行内元素：
对于行内元素的垂直对齐样式设置，基于 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声明无效。