<!DOCTYPE html>决定浏览器启用标准模式而非怪异模式，缺失或错误将导致盒模型、行高、表格对齐等异常；它不引用DTD，仅明确触发标准渲染，必须位于第一行且无BOM。
它决定浏览器用标准模式还是怪异模式解析整个页面，不写或写错，CSS盒模型、行高、表格对齐等都会出人意料地崩掉。
为什么没写 !DOCTYPE 会导致布局错乱
浏览器看到缺失或错误的 !DOCTYPE，会自动退回到“怪异模式”（Quirks Mode），模拟 IE5 那套老逻辑：比如 width 默认包含 padding 和 border，line-height 计算方式不同，img 在行内默认有底部空白。这些都不是你代码写错了，是解析器主动“降级”了。
常见现象包括：
- 同一段 CSS 在 Chrome 正常，在 Safari 或旧 Edge 上元素挤在一起或撑开
- Flex 布局失效，
align-items不起作用 - 表格中图片底部多出几像素空白，怎么设
vertical-align都没用
HTML5 的 !DOCTYPE html 为什么够用
它不引用任何 DTD，也不校验文档合法性，只干一件事：明确告诉所有现代浏览器——“请用标准模式渲染”。这个声明自 HTML5 起被标准化，大小写不敏感，前面不能有任何字符（包括空格、BOM、注释）。
立即学习“前端免费学习笔记（深入）”；
必须注意的细节：
-
!DOCTYPE html必须是文件第一行、第一个字符，前面零空格、零 BOM - 写成
<!doctype html>或<!DOCTYPE HTML>都可以，但别加引号、斜杠或多余空格 - 不要写成
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">这类 HTML4 遗留写法，现代项目里它没额外好处，反而容易手误漏字符
检查当前页面是否真的启用了标准模式
打开浏览器开发者工具（F12），在控制台执行：
document.compatMode
返回 "CSS1Compat" 表示标准模式；如果是 "BackCompat"，说明 !DOCTYPE 没生效。
常见失效原因：
- 编辑器保存时自动加了 UTF-8 BOM（尤其 Windows 下某些编辑器）
- 服务端模板引擎在
!DOCTYPE前注入了空行或注释 - 用了构建工具（如 Webpack + HtmlWebpackPlugin），但配置里漏写了
templateParameters或误删了!DOCTYPE
最稳妥的做法：新建一个纯文本文件，第一行只写 !DOCTYPE html，保存为 UTF-8 无 BOM 格式，再往里加 <html><head></head><body></body></html> —— 这个最小闭环能排除 90% 的模式误判问题。
