必须添加<!DOCTYPE html>声明以启用标准模式，否则浏览器回退至怪异模式；加后错位是因暴露旧代码兼容问题；声明须位于第一行开头，无任何前置内容；document.compatMode为"CSS1Compat"才生效；仅用极简形式<!DOCTYPE html>。
旧 HTML 文档要启用 HTML5 功能，必须显式添加 <!DOCTYPE html> 声明——它不是“切换版本”的开关，而是告诉浏览器：“请用标准模式渲染，别回退到怪异模式（Quirks Mode）”。
为什么加了 <!DOCTYPE html> 页面反而错位或样式异常？
这是最常见误判：以为加了声明就“升级成功”，实际是暴露了旧代码在怪异模式下被浏览器悄悄容错的问题。比如：
-
width和height在怪异模式下包含 padding/border，标准模式下默认不包含（box-sizing: content-box） - 某些 CSS 选择器（如
:last-child）在怪异模式下根本无效，加了 DOCTYPE 后才真正起作用，但旧布局没适配 - 表格单元格的垂直对齐、
inline元素的基线行为，在两种模式下差异显著
<!DOCTYPE html> 必须放在第一行、最开头，且不能有任何前置内容
哪怕一个空格、BOM 字符、注释或 PHP 输出都会让 IE9 及更早版本直接触发怪异模式——此时 DOCTYPE 形同虚设。
检查方式：在浏览器开发者工具的 Elements 面板顶部查看 document.compatMode，返回 "CSS1Compat" 才是标准模式；若为 "BackCompat"，说明 DOCTYPE 失效。
立即学习“前端免费学习笔记（深入）”；
常见陷阱：
- PHP 文件开头有 UTF-8 BOM（
EF BB BF），用编辑器另存为“UTF-8 无 BOM”格式 - 服务器端 include 或模板引擎在 DOCTYPE 前输出了空白或调试信息
- HTML 文件以
<?php开头但未关闭 PHP 标签，导致解析错误并提前输出
不需要也不应该写其他 DOCTYPE 变体
诸如 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 或 XHTML 声明，不仅冗长，还会在现代浏览器中引发兼容性问题或验证警告。HTML5 规范明确要求且唯一推荐的就是极简形式：
<!DOCTYPE html>
它不依赖 URL、不校验 DTD、不区分大小写（但惯例全小写），且对所有 HTML5 特性（如 <section>、<canvas>、localStorage）生效的前提条件就是这个声明存在且位置正确。
真正卡住人的从来不是怎么写 DOCTYPE，而是旧文档里那些在怪异模式下苟活多年的 CSS 计算、浮动清除逻辑和 JS 偏移量读取——加完声明后，得一行行核对渲染结果，而不是指望浏览器自动“智能升级”。
