你知道什么是 doctype？什么是文档模式吗？

发布于 2021-11-19 12:43:35 字数 10368 浏览 1468 评论 0

!DOCTYPE

!DOCTYPE 是什么？

在所有 HTML 文档中规定 DOCTYPE 是非常重要的，这样浏览器就能了解预期的文档类型，告诉浏览器要通过哪一种规范（文档类型定义，DTD）解析文档（比如HTML或XHTML规范）；

!DOCTYPE声明不属于 HTML 标签；tag; 它是一条指令，告诉浏览器编写页面所用的标记的版本。

HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（html 5简化了这种声明，意在告诉浏览器使用统一的标准即可, 这个统一的标准去哪里找啊 http://www.w3.org）。

常见的 DOCTYPE 如下：

HTML4.01 strict：不允许使用表现性、废弃元素（如font）以及frameset。声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
HTML4.01 Transitional:允许使用表现性、废弃元素（如font），不允许使用frameset。声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
HTML4.01 Frameset:允许表现性元素，废气元素以及frameset。声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
 
 
XHTML1.0 Strict:不使用允许表现性、废弃元素以及frameset。文档必须是结构良好的XML文档。声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
XHTML1.0 Transitional:允许使用表现性、废弃元素，不允许frameset，文档必须是结构良好的XMl文档。声明：
<!DOCTYPE html PUBLIC//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
XHTML 1.0 Frameset:允许使用表现性、废弃元素以及frameset，文档必须是结构良好的XML文档。声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> HTML 5:<!doctype html>

HTML5 中的 !doctype 是不区分大小写的;

我的 DW 默认的声明模板是下面这样的：

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

我的 webstrom 中默认的模板是这样的：

<!DOCTYPE html>

现代的浏览器需要不同模式，既要呈现久远的HTML界面，不至于界面结构混乱不堪， 也需要呈现W3C标准的界面：

标准的显示方式就是---标准模式(strict),
不标准的显示方式---怪异模式(没定义doctype或者doctype错误等等情况,都会让界面进入quirk模式)，
既可以显示标准的，也能够显示不标准的(过渡类型的文档类型定义transitional）;

规范和时间线

HTML 规范和时间线

规范	推荐
HTML 3.2	1997年1月14日
HTML 4.0	1998年5月24日
HTML 4.01	1999年12月24日

XHTML 规范和时间线

规范	草案/提议	推荐
XHTML 1.0		2000 年 1 月 26 日
XHTML 1.0 修订版		2002 年 8 月 1 日
XHTML 1.1		2001 年 5 月 31 日
XHTML Modules		2001 年 4 月 10 日
XHTML Modules 1.1	2006 年 7 月 5 日
XHTML Basic		2000 年 12 月 19 日
XHTML Basic 1.1	2006 年 7 月 5 日
XHTML Events		2003 年 10 月 14 日
XHTML Events 2	2007 年 2 月 16 日
XHTML Print		2006 年 9 月 20 日
XHTML Media Types	2002 年 8 月 1 日
XForms 1.0		2003 年 10 月 14 日
XForms 1.0 (SE)		2006 年 3 月 14 日
XForms 1.1	2007 年 2 月 22 日
XHTML 2.0	2006 年 7 月 26 日
XLink		2001 年 6 月 27 日
HLink	2002 年 9 月 13 日

!DOCTYPE 切换也许是让浏览器进入正确呈现模式并正确显示网页的一种有效手段，前提是你注意到了各种浏览器的不一致，并能积极主动地避免各种问题。

一般来说 !DOCTYPE 后面会有一个包含命名空间的 html 标签：

<html xmlns="http://www.w3.org/1999/xhtml">

xmlns 是 XHTML namespace 的缩写。

作用：由于xml允许定义自己的标记，但你定义的标记和其他人定义的标记有可能相同，但表示不同的含义。当文档交换或者共享的时候就容易产生错误。为避免这种错误产生，xml采用名字空间声明，允许你通过一个网址来识别你的标记。

XHTML是HTML先xml过度的标记语言，它需要符合xml文档规则，因此，也需要定义名字空间，又因为XHTML1.0不能自定义标识，所以，它的名字空间都相同，就是：http://www.w3.org/1999/xhtml

额外资料：文档模式

参考自：打开

文档模式也回影响到**文档类型, **<meta http-equiv="X-UA-Compatible"> 与 <!DOCTYPE> 结伴影响文档模式 ;

所有IE浏览器在默认情况下（<meta http-equiv="X-UA-Compatible">与<!DOCTYPE>均没有），是采用怪异模式（Quirks）；当有<!DOCTYPE>时，均采用浏览器版本对应的标准模式（如IE8就采用IE8标准模式，IE11就采用IE11标准模式）。

现在要注意的是，当出现<meta http-equiv="X-UA-Compatible">时，文档模式将会如何呢？我们首先了解一下IE11下它的content属性值范围吧，具体范围如下：

IE=5、IE=7、IE=EmulateIE7、IE=8、IE=EmulateIE8、IE=9、IE=10、 IE=11、 IE=Edge

IE=5：表示采用怪异模式；
IE=7等纯数字的值：表示采用对应IE版本的标准模式，即使不是以<!DOCTYPE>作为文档第一行，文档模式依旧使用标准模式；
IE=EmulateIE7等含EmulateIE字符串的值：表示采用模拟对应IE版本的模式，如果是以<!DOCTYPE>作为文档第一行则采用该版本的标准模式，否则采用怪异模式。
IE=Edge：表示采用浏览器自身版本的文档模式，如IE11，以<!DOCTYPE html>作为文档第一行则采用IE11标准模式，否则采用怪异模式。

IE的怪异模式：

IE进入backCompat的模式的方式，常见的原因有

DOCTYPE写错了
DOCTYPE没有写
DOCTYPE前面有别的字符

实例：

_____ <!DeeeeeeeeeeeOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitionaleeeeeeeeee//EN" "http://www.ssssssssw3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<style> body{ margin:0; padding:0; width:1000px; padding:200px;
}
</style>
<body>
    
    <script>
        function getStyle(el, prop) { return el.currentStyle[prop];
        }; var node = document.createElement("div");
        node.innerHTML = document.compatMode ;// 
 document.body.appendChild( node );
        node = document.createElement("div");
        node.innerHTML = document.getElementsByTagName("body")[0].offsetWidth;
        document.body.appendChild( node ); </script>
</body>
</html>

IE兼容模式开启的话，相对于当前的界面会以IE5.5的方式进行渲染，如果IE浏览器以IE5.5的方式进行解析，会导致以下问题;

1. 盒模型

在怪异模式下，盒模型为IE盒模型而非标准模式下的W3C 盒模型：在 IE 盒模型中， box width = content width + padding left + padding right + border left + border right， box height = content height + padding top + padding bottom + border top + border bottom。而在 W3C 标准的盒模型中，box 的大小就是 content 的大小。

2. 图片元素的垂直对齐方式

对于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 属性默认取值为baseline。而当inline元素的内容只有图片时，如table的单元格table-cell。在 IE Quirks Mode 下，table单元格中的图片的 vertical-align 属性默认为bottom，因此，在图片底部会有几像素的空间。

3. `<table>` 元素中的字体

CSS 中，描述font的属性有font-family，font-size，font-style，font-weigh,上述属性都是可以继承的。而在 IE Quirks Mode 下，对于table 元素，字体的某些属性将不会从body或其他封闭元素继承到table中，特别是 font-size属性。