HTML DOCTYPE

学习目标

<!DOCTYPE>（Document Type Declaration，文档类型声明）是位于 HTML 文档最顶部的一条指令，用于告知浏览器：

“请按照哪种 HTML 标准来解析和渲染此页面。”

关键特性

HTML5 标准写法

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>...</body>
</html>

这是目前所有新项目应使用的唯一 DOCTYPE。

DOCTYPE 并不直接“告诉浏览器这是 HTML5”，而是触发浏览器的特定渲染模式：

渲染模式	行为特点	触发条件
标准模式 Standards Mode	严格遵循 W3C 现代 Web 标准	使用有效的 DOCTYPE（如 `<!DOCTYPE html>`）
怪异模式 Quirks Mode	模拟 1990s 浏览器行为，兼容旧网站	缺少 DOCTYPE 或使用过时 / 无效声明

怪异模式的危害

真实案例：一个未加 DOCTYPE 的页面，在 Chrome 中正常，但在 IE 中完全错位——这就是怪异模式的典型后果。

虽然页面仍能“显示”，但会带来严重隐患：

问题类型	具体表现
布局崩溃	`box-sizing: border-box` 失效，元素宽度计算错误
样式错乱	行高、字体大小、定位偏移不符合预期
调试困难	开发者工具中无法复现“标准环境”下的行为
功能受限	某些现代 CSS 属性（如 `grid`）被忽略
跨浏览器差异	同一代码在不同浏览器中外观大相径庭

结论：永远不要省略 DOCTYPE！

<!DOCTYPE html>
<html lang="zh-CN">
...

无需考虑旧版本，除非维护遗留系统。

某些旧 DOCTYPE（如带 Transitional 的）可能触发“接近标准”模式，仍有细微差异。统一用 <!DOCTYPE html> 可彻底规避。

包括空格、注释、XML 声明（如 <?xml version="1.0"?>），否则可能触发怪异模式！

❌ 错误示例：

<!-- 注释不能放这里！ -->
<!DOCTYPE html>

✅ 正确：

<!DOCTYPE html>
<!-- 注释可放这里 -->