前言
- 什么是<!DOCTYPE>？
- 什么是严格模式和混杂模式？
- 列举几条怪异模式中的怪癖行为？
文档声明的概念
HTML文档通常以文档声明开始，该声明的作用是帮助浏览器确定其尝试解析和显示的 HTML 文档类型。
<!DOCTYPE html>
文档声明必须是 HTML 文档的第一行、且顶格显示，对大小写不敏感。因为任何放在 DOCTYPE 前面的东西，比如批注或 XML 声明，会令 IE9 或更早期的浏览器触发怪异模式。
文档声明并非一个 HTML 标签，它是一条“信息”，告知浏览器期望的文档类型。
HTML发展历史
| 版本 | 年份 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1996 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2014 |
不同的版本支持的HTML元素不同
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 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
这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块（例如为东亚语言提供 ruby 支持）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
为什么之前的文档声明这么长，是因为HTLM5不需要引入DTD文件，其他类型的文档声明需要引入DTD文件。
在早期的HTML版本中，<!DOCTYPE>声明之所以要引用DTD，是因为HTML 4.01基于SGML。 而DTD规定的是标记语言的规则，这样浏览器才能正确地呈现内容。最新的HTML5不基于SGML，所以不需要引用DTD。
我们有GML SGML、HTML、XML、XHTML、HTML5
ML即Markup language（标记语言）
GML 是第一代置标语言，使文档能够将标示和内容分开，所有文件使用同样的标示方法。
SGML 在GML的基础上进行了整理，形成了一套非常严谨的文件描述方法。它的组成包括语法定义、DTD、文件实例三部分。SGML 因太严谨，规范达500多页，故而不易学、不易用、难以实现，所以在它的基础上又发展出了其他的更易用的置标语言。
HTML抛弃了SGML复杂庞大的缺点,继承了SGML的很多优点。HTML最大的特点是简单性和跨平台性。它只使用了SGML中很少的一部分标记,例如HTML4.0中只定义了70余种标记。为了便于在计算机上实现,HTML规定的标记是固定的,即HTML语法是不可扩展的。
随着Web应用的不断发展,HTML的局限性也越来越明显地显现了出来,如HTML无法描述数据、可读性差、搜索时间长等。人们又把目光转向SGML,再次改造SGML使之适应现在的网络需求。1998年2月10日,W3C(World Wide Web Consortium,万维网联盟)公布XML 1.0标准,XML诞生了。很长一段时间,XML都作为网络传输的标准数据格式。
XHTML的出现是因为当时的HTML语法要求比较松散,这样对网页编写者者来说,比较方便,但对于机器来说,语言的语法越松散,处理起来就越困难,对于传统的计算机来说,,还有能力兼容松散语法,但对于许多其他设备,比如手机,难度就比较大。因此产生了由DTD定义规则,语法要求更加严格的XHTML。
最终,HTML5是HTML的第五个修订版,该版本不再基于SGML了,所以也就不用再引入DTD声明了。
HTML5的出现,其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入。
渲染模式
浏览器渲染模式分为3种:
- 怪癖模式(混杂模式)[Quirksmode]
- 严格模式(标准模式)[Standarsmode]
- 几乎标准模式[Almost standardsmode]
之所以出现不同的渲染模式,是由于历史原因造成的。
当年Metscope4(网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时,没有道循W3C提出的标准。Netscape4提供了糟糕的支持,而IE4星然接近标准,但依旧未能完全正确的支持标准。
所以,在M3C标准推出以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为 Compatibility Mode)
为了保障自己的网站在各个浏览器上显示正确,网页开发者们不得不依据各个浏览器自身的规范来使用CSS,因为大部分网站的CSS实现并不符合W3C规范的标准。
W3C标准推出后,浏览器渲染页面有了统一的标准(Strict mode也有叫做Standars mode)浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页还能继续浏览,在标准出来以前,很多页面都是根据旧的渲染方法编写的,如果用的标准来渲染,将导致页面显示异常。
为保持浏览器渲染的兼容性,使以前的页面能够正常浏览,浏览器都保留了旧的渲染方法(如:微软的IE)。这样浏览器渲染上就产生了Quircks mode和Standars mode,两种渲染方法共存在一个浏览器上。混杂模式服务于旧式规则,而严格模式服务于标准规则。
对于HTML文档来说,浏览器使用文档开头的DOCTYPE来决定用怪异模式处理或标准模式处理。
如果文档中没有DOCTYPE将触发文档的怪异模式。怪异模式最明显的影响是会触发怪异盒模型。
在DOCTYPE声明中,没有使用DTD声明或者使用HTML4以下的DTD声明时,基本所有的浏览器都是使用Quirksmode呈现,其他的则使用Standarsmode解析。
严格模式和怪异模式的部分渲染区别
1.盒模型的高宽包含内边距padding和边框border
在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在IE5.5及以下的浏览器及其他版本的Quirks模式下,IE的宽度和高度还包含了padding和border。
2.可以设置行内元素的高宽 在standards模式下,给span等行内元素设置wdith和 height都不会生效,而在Quirks模式下,则会生效。
3.可以设置百分比的高度 在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个 百分比的高度是无效的。
4.用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中,但在Quirks模式下却会失效,Quirks模式下的解 决办法,用text-align属性:body{text-align:center};#content{text-align:left}
5.Quirks模式下设置图片的padding会失效 6.Quirks模式下Table中的字体属性不能继承上层的设置 7.Quirks模式下white-space:pre会失效
总结
-
什么是<!DOCTYPE>？
它是HTML的文档声明,通过它告诉浏览器,使用哪一个HTML版本标准解析文档
在浏览器发展的历史中,HTML出现过很多个版本,不同版本在元素、属性等书写格式上略有差异,如果不预 先告诉浏览器,浏览器就不知道我们的文档标准是什么,在这种情况下,大部分浏览器将开启最大兼容模式 来解析网页,我们称之为怪异模式。这不仅会降低解析效率,而且且会在解析过程中产生一些难以预知的 bug,所以文档声明是必须的。
而文档声明有多种书写格式,对应不同的HTML版本,这种书写是告诉浏览器,整个文档使用 HTML5的标准进行解析。
-
什么是严格模式和混杂模式？
严格模式:又称标准模式,是指浏览器按照W3C标准解析代码。
混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。
如何区分:浏览器解析时到底使用严格模式还是混杂模式,与网页中的DTD直接相关。
1.如果文档包含严格的DOCTYPE,那么它一般以严格模式呈现。(严格DTD--严格模式)
2.包含过渡DTD和URI的DOCTYPE,也以严格模式呈现,但有过渡DTD而没有URI(统一资源标识符就是声明最后的地址)会导致页面以混杂模式呈现。(有URI的过渡DTD-一严格模式;没有URI的过渡DTD--混杂模式)
3.DOCTYPE不存在或形式不正确会导致文档以混杂模式呈现。(DTD不存在或者格式不正确--混杂模式)
4.HTML5没有DTD,因此也就没有严格模式与混杂模式的区别,HTML5有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。(HTML5没有严格和混杂之分)
意义:严格模式与混杂模式存在的意义与其来源密切相关,如果说只存在严格模式,那么许多旧网站必然受到影响,如果只存在混杂模式,那么会回到当时浏览器大战时的混乱,每个浏览器都有自己的解析模式。（为保持浏览器渲染的兼容性）
-
列举几条怪异模式中的怪癖行为？
1.宽高的算法与W3C盒模型不同
2.在表格中的字体样式不会继承
3.怪异模式下可以设置行内元素宽高
4.怪异模式下white-space:pre会失效
