What the hell is DOCTYPE? What the hell is document mode? _html/css

!DOCTYPE

!DOCTYPE What is:

In all HTML documents specifies DOCTYPE It is very important so that the browser can understand the expected document type and tell the browser which specification (Document Type Definition DTD) to parse the document (such as HTML or XHTML specification);

　!The DOCTYPE declaration does not belong to the HTML tag; tag; it is an instruction that tells the browser the version of the tag used to write the page.

　The doctype in HTML 4.01 requires a reference to the DTD because HTML 4.01 is based on SGML. HTML 5 is not based on SGML, so there is no need to reference the DTD, but doctype is needed to standardize the browser's behavior (html 5 simplifies this declaration and is intended to tell the browser to use a unified standard , where can I find this unified standard? www.w3.org).

Common DOCTYPEs are as follows:

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>

Copy after login

!doctype in HTML5 is case-insensitive;

My DW default declaration template is as follows:

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

Copy after login

The default template in my webstrom is as follows:

<!DOCTYPE html>

Copy after login

Modern browsers require different modes,

should not only present the ancient HTML interface, so as not to make the interface structure confusing, also need to present the W3C standard Interface:

1: The standard display method is---standard mode (

strict),

2: Non-standard display method---weird mode (no Define

doctype or doctype errors, etc., will cause the interface to enter quirk mode),

　3: Can display both standard and non-standard ( Document type definition for transitional types

transitional);

Specification and timeline

tr>

Specification

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

Recommended

< td> HTML 3.2

January 14, 1997

规范	草案/提议	推荐
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 日

<🎜>HTML 4.0<🎜 > <🎜>May 24, 1998<🎜> <🎜>HTML 4.01<🎜> < 🎜>December 24, 1999<🎜> <🎜> <🎜> <🎜>　<🎜>XHTML specification and timeline: <🎜><🎜> < /tr>

<🎜><🎜>Specification<🎜><🎜>	<🎜><🎜>Draft/Proposal<🎜><🎜>	<🎜 ><🎜>Recommended<🎜><🎜>
<🎜>XHTML 1.0<🎜>		<🎜> January 26, 2000<🎜>
<🎜>XHTML 1.0 Revision<🎜>		<🎜> August 1, 2002<🎜>
<🎜>XHTML 1.1<🎜>		<🎜>2001 May 31<🎜>
<🎜>XHTML Modules<🎜>		<🎜>April 2001 10th<🎜>
<🎜>XHTML Modules 1.1<🎜>	<🎜>July 5, 2006<🎜>
<🎜>XHTML Basic<🎜>		<🎜>December 19, 2000< 🎜>
<🎜>XHTML Basic 1.1<🎜>	<🎜>July 5, 2006<🎜>
<🎜>XHTML Events<🎜>		<🎜>October 14, 2003<🎜> < /td>
<🎜>XHTML Events 2<🎜>	<🎜>February 16, 2007<🎜>
<🎜>XHTML Print<🎜>		<🎜>September 20, 2006<🎜>
<🎜>XHTML Media Types<🎜>	<🎜>August 1, 2002<🎜>
<🎜>XForms 1.0<🎜>		<🎜>October 14, 2003<🎜>
<🎜>XForms 1.0 (SE)<🎜>		<🎜>March 14, 2006<🎜>
<🎜>XForms 1.1<🎜>	<🎜>February 22, 2007<🎜>
<🎜>XHTML 2.0<🎜>	<🎜>July 26, 2006<🎜>
<🎜>XLink<🎜>		<🎜>June 27, 2001<🎜>
<🎜>HLink<🎜>	<🎜>September 13, 2002<🎜>

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

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

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

Copy after login

　　xmlns是XHTML namespace的缩写。
　　作用：由于xml允许定义自己的标记，但你定义的标记和其他人定义的标记有可能相同，但表示不同的含义。当文档交换或者共享的时候就容易产生错误。为避免这种错误产生，xml采用名字空间声明，允许你通过一个网址来识别你的标记。
　　XHTML是HTML先xml过度的标记语言，它需要符合xml文档规则，因此，也需要定义名字空间，又因为XHTML1.0不能自定义标识，所以，它的名字空间都相同，就是：http://www.w3.org/1999/xhtml

额外资料：文档模式

　　参考自：打开

　　文档模式也回影响到文档类型, 与结伴影响文档模式 ;

　　所有IE浏览器在默认情况下（与均没有），是采用怪异模式（Quirks）；当有时，均采用浏览器版本对应的标准模式（如IE8就采用IE8标准模式，IE11就采用IE11标准模式）。

　　现在要注意的是，当出现时，文档模式将会如何呢？我们首先了解一下IE11下它的content属性值范围吧，具体范围如下：

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

　　1. IE=5：表示采用怪异模式；

　　2. IE=7等纯数字的值：表示采用对应IE版本的标准模式，即使不是以作为文档第一行，文档模式依旧使用标准模式；

　　3. IE=EmulateIE7等含EmulateIE字符串的值：表示采用模拟对应IE版本的模式，如果是以作为文档第一行则采用该版本的标准模式，否则采用怪异模式。

　　4. IE=Edge：表示采用浏览器自身版本的文档模式，如IE11，以<!DOCTYPE html>作为文档第一行则采用IE11标准模式，否则采用怪异模式。

　　IE的怪异模式：

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

　　1：DOCTYPE写错了，

　　2：DOCTYPE没有写，

　　3：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>    <div id="div0"></div>    <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>

Copy after login

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

盒模型：

在怪异模式下，盒模型为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 的大小。
图片元素的垂直对齐方式:

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

元素中的字体:

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

内联元素的尺寸:

在 IE Standards Mode 下，non-replaced inline 元素无法自定义大小，而在 IE Quirks Mode 下，定义这些元素的width和height 属性，能够影响该元素显示的大小尺寸。

元素的百分比高度:

The percentage height of elements in CSS is specified as follows. The percentage is the height of the element’s containing block and cannot be a negative value. If the height of the containing block is not given explicitly, this value is equivalent to "auto" (i.e. depends on the height of the content). So the percentage height must be used when the parent element has a declared height.

When an element uses a percentage height, in IE Standards Mode the height changes depending on the content, while in Quirks Mode the percentage height is applied correctly.

Handling of element overflow:

In IE Standard Mode, overflow takes the default value visible, that is, the overflow is visible. In this case, Overflow content will not be clipped and will appear outside the element box. In Quirks Mode, the overflow is treated as an extended box, that is, the size of the element is determined by its content, the overflow will not be clipped, and the element box is automatically adjusted to include the overflow content.

References about Document Mode: open

Related labels：

DOCTYPE是什么鬼？文档模式又是什么鬼？

source：php.cn

Previous article：JS code request_html/css_WEB-ITnose Next article：V4.0 has arrived, the css sprite generation tool 4.0 has been updated_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What the hell is DOCTYPE? What the hell is document mode? _html/css_WEB-ITnose