文档声明
大约 3 分钟
文档声明
在 HTML 中，文档类型声明是必要的。在所有文档的头部，你都将会看到<!DOCTYPE html>序言。这个声明的目的是防止浏览器在渲染文档时，切换到我们称为"怪异模式"的渲染模式。<!DOCTYPE html>确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。
DOCTYPE 的历史背景
在 HTML 的形成期，web 标准还没有达成一致。浏览器供应商会以他们想要的方式创建新的特性。人们很少关注竞争性的浏览器。
其结果是，web 开发者不得不选择一个浏览器来开发他们的网站。这意味着网站在不支持的浏览器中无法很好地呈现。这种情况不能再继续下去了。
W3C（万维网联盟）制定了一套 web 标准来处理这种情况。所有的浏览器供应商和 web 开发人员都应该遵守这些标准。这将确保网站在不同的浏览器上都能很好地呈现。
该标准所要求的变化与一些现有的做法有很大的不同。遵循这些标准会破坏现有的不符合标准的网站。
为了解决这个问题，供应商开始在他们的浏览器中设置渲染模式。web 开发者需要在 HTML 文档的顶部添加一个 doctype 声明。doctype 声明将告诉浏览器对该文档使用何种渲染模式。
渲染模式详解
浏览器支持三种渲染模式：
标准模式（Standards Mode）
- 使用W3C标准解析和渲染页面
- 现代网页开发推荐使用的模式
怪异模式（Quirks Mode）
- 模拟旧版浏览器的行为
- 向后兼容早期的网页设计
近标准模式（Almost Standards Mode）
- 介于标准模式和怪异模式之间
- 只有少数特性使用怪异模式渲染
如何触发不同的渲染模式？
浏览器主要通过文档开头的 DOCTYPE 声明来决定使用哪种渲染模式。
标准模式与怪异模式的主要区别
1. 盒模型差异
- 怪异模式：width/height 包含 padding 和 border
- 标准模式：width/height 仅包含内容区域
- 现代解决方案：使用
box-sizing: border-box可在标准模式下实现怪异模式的盒模型
2. 行内元素尺寸
- 怪异模式：可以设置行内元素的 width 和 height
- 标准模式：width 和 height 对行内元素无效
3. 百分比高度计算
- 怪异模式：可以使用百分比高度，即使父元素没有明确的高度
- 标准模式：父元素需要明确的高度，子元素的百分比高度才能生效
4. 水平居中处理
- 怪异模式：
margin: 0 auto无效 - 标准模式：
margin: 0 auto可实现水平居中 - 怪异模式解决方案：
body {
text-align: center;
}
#content {
text-align: left;
}