DOCTYPE是什么鬼？文档模式又是什么鬼？_html/css_WEB-ITnose
!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，以<!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>
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
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7529
15
1378
52
81
11
54
19
21
76
& lt; Progress & Gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:34 PM
이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우
HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?
Mar 17, 2025 pm 12:20 PM
기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.
& lt; datalist & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:33 PM
이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159
HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?
Mar 17, 2025 pm 12:27 PM
이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.
& lt; meter & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:35 PM
이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?
Mar 20, 2025 pm 05:56 PM
이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.
& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?
Mar 20, 2025 pm 06:05 PM
이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.
HTML은 초보자를 위해 쉽게 배우나요?
Apr 07, 2025 am 12:11 AM
HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
