一、核心作用一句话
DOCTYPE是页面的身份证，告诉浏览器用哪个HTML版本来解析页面，直接影响页面渲染模式。
二、两种模式对比表（必背）
| 模式 | 触发方式 | 盒模型计算 | 字体处理 | 典型表现 |
|---|---|---|---|---|
| 标准模式 | <!DOCTYPE html> | width=内容宽度 | 按CSS精确渲染 | 现代浏览器推荐方式 |
| 怪异模式 | 省略DOCTYPE或旧式DTD | width=内容+padding+border | 继承body字体大小 | 兼容老页面 |
三、代码示例理解
<!-- 标准模式触发 -->
<!DOCTYPE html>
<html>
<head>
<style>
.box { width: 100px; padding: 20px; }
</style>
</head>
<body>
<div class="box">实际宽度：100px</div> <!-- 内容区域保持100px -->
</body>
</html>
<!-- 怪异模式触发（省略DOCTYPE） -->
<html>
<head>
<style>
.box { width: 100px; padding: 20px; }
</style>
</head>
<body>
<div class="box">实际宽度：140px</div> <!-- 100+20+20=140px -->
</body>
</html>
四、模式检测方法（面试扩展）
// 控制台检测当前模式
console.log(document.compatMode);
// CSS1Compat 表示标准模式
// BackCompat 表示怪异模式
五、高频面试题精讲
1. 为什么DOCTYPE必须放在第一行？
<!-- 如果前面有空格或注释 -->
<!-- 这是注释 -->
<!DOCTYPE html> ❌ 会导致怪异模式
浏览器会优先检查文档开头，非空白字符前有其他内容则触发怪异模式。
2. 实际开发中遇到过哪些怪异模式问题？
- 盒模型宽度计算错误（如上代码示例）
- 行内元素间隙异常
- 字体大小继承不一致
六、记忆口诀
"身份证在第一行，标准怪异看有无，
盒模型、字体处理，渲染差异要记住"
"DOCTYPE主要控制浏览器的渲染模式，比如在标准模式下盒模型的width指内容宽度，而怪异模式会包含padding和border。我们可以通过document.compatMode来检测当前模式。"
