Simple Note

DOCTYPE的作用是什么?

2015.11.03

DOCTYPE是document type的简写,用来声明页面所使用的HTML版本。浏览器在读取到DOCTYPE时,会将其与内置的DOCTYPE表比对,决定如何渲染页面。为什么HTML5的DOCTYPE声明是<!DOCTYPE html>呢?据说,浏览器比对DOCTYPE表的时候,如果前面一大串都不满足,最后一个else就会给那些html后面什么字符都没有的定成标准模式,于是制定标准的那帮人说,干脆就把这个给HTML5吧,这么凑巧,完美兼容旧浏览器!

延伸:

  1. 渲染页面的方式有哪些呢?

    有怪异模式、严格模式和准严格模式(也叫混杂模式、标准模式和准标准模式)。怪异模式是不符合web标准的模式,准标准模式几乎符合标准,标准模式当然就是符合标准的了。DOCTYPE声明错误或者干脆没有声明时,浏览器用怪异模式渲染页面。

  2. 哪些DOCTYPE对应严格模式?

    详见文档类型的比较,简单来说,有两种常见的会触发严格模式的DOCTYPE,第一种是HTML5的DOCTYPE:<!DOCTYPE html>,第二种是XHTML 1.0:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,从上面的链接内容也可以看出,没有哪个DOCTYPE会在所有浏览器上都触发严格模式,这两种常用的,只是相对来说覆盖的更加全面而已。

  3. 这些DOCTYPE是怎么来的?为什么会有准严格模式这种东西?

    回望历史,微软曾经发布过一款非常先进的浏览器,叫IE5(莫吐槽...),它确实很先进,因为实现了当时最新的HTML4.0标准,但是事实证明搞前端真的是一个历史包袱很重的活,IE5按照最新标准渲染网页导致一些旧的不合规范的网页不能正常显示,这在开发者的眼里是网页写的不好,但在用户的眼里就是浏览器做的不行...微软为了解决这个问题,保证浏览器的向后兼容性,在IE6中给网页提供了决定浏览器渲染模式的方法,这就是DOCTYPE。这个方法很好,所以各大浏览器厂商纷纷效仿。当然现实总是不尽如人意,总会有些网页虽然跟浏览器说“我可是按照标准写的哦你渲染的时候对我严格点!”,但是它的实际内容中或多或少有一些混杂模式才有的特性,得,网页又不正常了。没办法,用户就是爹,Mozilla 1.1又提出了准严格模式,来满足这些网页的渲染要求。

  4. 怎么检测浏览器是否运行在严格模式?

    document.compatMode,"严格模式"返回"CSS1Compat","怪异模式"返回"BackCompat",准严格模式用这个方法也会返回"CSS1Compat"。

  5. 三个模式之间具体有什么区别?

    严格模式和怪异模式的区别详见:怪异模式表现

    主要有以下区别:

    • IE在怪异模式下CSS盒模型有缺陷,接近于现在box-sizing属性值为border-box的效果
    • 行内元素的垂直对齐,如怪异模式下图片会对齐到包含它们的盒子的下边框,标准模式对齐到盒内文本基线
    • 怪异模式下表格内部的字体样式不继承(除了font-family),严格模式下会继承

    准严格模式与严格模式只有一点不同:准严格模式下表格内部图片的布局与怪异模式相同。

    套用莎翁的一句话,严格模式总是相似的,怪异模式各有各的不同。

参考:
What is DOCTYPE
doctype的作用是什么
DOCTYPE 声明是否正确,如何评判
兼容性问题与浏览器的内核及渲染模式
怪异模式

Comments
Write a Comment