HTML DOCTYPE 声明与文档模式
HTML文档类型声明详解：DOCTYPE的作用、HTML5简化的DOCTYPE、怪异模式Quirks Mode vs 标准模式、文档渲染模式的切换条件 · 难度：入门 · +10XP
HTML DOCTYPE 声明 —— 每个网页的第一行代码
打开任何一个网页，右键选择查看网页源代码，你会发现第一行总是：
<!DOCTYPE html>这一行虽然短，却极其重要。它告诉浏览器：请用最新的HTML5标准来渲染这个网页。
为什么要写 DOCTYPE？
浏览器很聪明，但它也很念旧。如果网页不声明 DOCTYPE，浏览器会进入怪异模式（Quirks Mode）——用几十年前的旧规则来渲染网页。结果就是：同样的CSS代码，在怪异模式下显示得乱七八糟。
用一句话记住：写 DOCTYPE = 告诉浏览器用最新标准来干活。
HTML5 的 DOCTYPE vs 旧版
HTML5 简化了一切。以前（HTML 4.01时代）写 DOCTYPE 是这样的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">HTML5 只需要一行，极其简洁：
<!DOCTYPE html>大小写不敏感——写 <!doctype html> 或 <!DOCTYPE HTML> 都可以，但推荐统一小写。
三个渲染模式对比
| 模式 | 触发条件 | 效果 |
|---|---|---|
| 标准模式 | 写了 <!DOCTYPE html> | 浏览器按最新W3C标准渲染 |
| 怪异模式 | 没写 DOCTYPE | 模拟旧版浏览器行为，CSS盒模型不同 |
| 准标准模式 | 写了旧版过渡型 DOCTYPE | 大部分标准，但细微差异 |
一个完整网页的 DOCTYPE 位置
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<h1>欢迎！</h1>
</body>
</html>注意：DOCTYPE 必须是整个文件的第一行，前面不能有空行或空格。
动手练习
- 基础练习：创建一个有 DOCTYPE 的完整 HTML 页面，包含标题和一段文字。然后删除 DOCTYPE 看看浏览器开发者工具里有什么警告。
- 进阶应用：在同一个 HTML 文件中，写一个宽度为 200px 的 div，分别测试有 DOCTYPE 和无 DOCTYPE 两种情况下它的实际渲染宽度。你会发现怪异模式下盒模型计算的差异。
- 项目实战：用 VS Code 的
!快捷键（输入 ! 然后按 Tab）自动生成一个完整的 HTML5 骨架，观察它自动生成了哪些代码，理解每一行的作用。
接下来学什么？
下一课我们将学习 lang 和 dir 属性——如何告诉浏览器你的网页是用中文还是英文写的。