DOCTYPE是什么鬼？文档模式又是什么鬼？_html/css

집

웹 프론트엔드

HTML 튜토리얼

DOCTYPE是什么鬼？文档模式又是什么鬼？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:44 AM

　　 !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简化了这种声明，意在告诉浏览器使用统一的标准即可, 这个统一的标准去哪里找啊,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标准的界面：

　　1：标准的显示方式就是---标准模式(strict),

　　2：不标准的显示方式---怪异模式(没定义doctype或者doctype错误等等情况,都会让界面进入quirk模式)，

　　3：既可以显示标准的，也能够显示不标准的(过渡类型的文档类型定义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

额外资料：文档模式

　　参考自：打开

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

　　所有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 属性，能够影响该元素显示的大小尺寸。

元素的百分比高度:

CSS 中对于元素的百分比高度规定如下，百分比为元素包含块的高度，不可为负值。如果包含块的高度没有显式给出，该值等同于“auto”（即取决于内容的高度）。所以百分比的高度必须在父元素有声明高度时使用。

当一个元素使用百分比高度时，在 IE Standards Mode 下，高度取决于内容的变化，而在 Quirks Mode 下，百分比高度则被正确应用。

元素溢出的处理：

在 IE Standard Mode 下，overflow取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展box来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。

　　有关文档模式的参考资料:open

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworksporstylingandjavaScriptOfforIncincivity, WebDevelopment 향상.

HTML : 웹 페이지 구조 구축Apr 14, 2025 am 12:14 AM

HTML은 웹 페이지 구조를 구축하는 초석입니다. 1. HTML은 컨텐츠 구조와 의미론 및 사용 등을 정의합니다. 태그. 2. SEO 효과를 향상시키기 위해 시맨틱 마커 등을 제공합니다. 3. 태그를 통한 사용자 상호 작용을 실현하려면 형식 검증에주의를 기울이십시오. 4. 자바 스크립트와 결합하여 동적 효과를 달성하기 위해 고급 요소를 사용하십시오. 5. 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함되며 검증 도구가 필요합니다. 6. 최적화 전략에는 HTTP 요청 감소, HTML 압축, 시맨틱 태그 사용 등이 포함됩니다.

텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AM

HTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.