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

Home

Web Front-end

HTML Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:44 AM

!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>

!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">

The default template in my webstrom is as follows:

<!DOCTYPE html>

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

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
XHTML Events 2	February 16, 2007	td>
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">

　　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，以作为文档第一行则采用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>

　　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

Statement

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

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

HTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

The Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesApr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

Is HTML easy to learn for beginners?Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

See all articles