3. DOCTYPE 与文档类型声明

本节目标：理解 <!DOCTYPE html> 的作用，知道为什么它必须写在页面最前面。

上一节我们写了一个 HTML 页面，第一行就是 <!DOCTYPE html>。这一行看起来不起眼，但不能少。

DOCTYPE 是什么

DOCTYPE 全称是 Document Type Declaration，中文叫”文档类型声明”。

它的作用很简单：告诉浏览器用什么规则来解析这个页面。

早期的 HTML 基于 SGML（标准通用标记语言），DOCTYPE 需要引用一套复杂的规则文件（DTD），写法很长：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这串字符看着就头大，实际上很少有人能背下来。好在 HTML5 不再基于 SGML，DOCTYPE 变得超级简单：

<!DOCTYPE html>

就这五个字符，所有浏览器都能识别。

为什么必须有 DOCTYPE

DOCTYPE 的存在，是为了区分两种渲染模式：标准模式和怪异模式。

标准模式（Standards Mode）

浏览器按照 W3C/WHATWG 标准来渲染页面。你写的 CSS 会按预期工作，布局行为是规范的。

怪异模式（Quirks Mode）

如果页面没有 DOCTYPE，浏览器会切换到”怪异模式”。这时候浏览器会模拟老版本浏览器的 bug 和不规范行为，目的是让古老的网页不至于显示得一团糟。

Warning

不写 DOCTYPE 的后果：页面进入怪异模式，不同浏览器显示效果可能完全不同，CSS 布局可能”莫名其妙”地崩坏。

一句话总结

<!DOCTYPE html>

永远把这行放在 HTML 文件的第一行。 它确保浏览器用标准模式渲染，你的页面在所有浏览器上表现一致。

DOCTYPE 的几个特点

不区分大小写：<!doctype html>、<!DocType Html> 都有效，但习惯用小写
没有结束标签：它不是普通元素，只是一条声明
不是 HTML 标签：浏览器通过它来决定渲染模式，不会创建 DOM 节点

HTML 历史版本的 DOCTYPE（仅作了解）

这些写法已经淘汰了，但如果你在老项目里看到，能认出来就行：

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

现在写新项目，只用 <!DOCTYPE html> 就对了。

小结

DOCTYPE 告诉浏览器用什么规则渲染页面
写 <!DOCTYPE html> 进入标准模式，不写进入怪异模式
必须放在文件第一行
写法极简，只有 <!DOCTYPE html> 这一种

下一节，我们来看 <html> 标签和它的 lang 属性。