必须在第一行写<!DOCTYPE html>，否则浏览器进入怪异模式导致布局、盒模型、CSS解析不一致；它不是标签而是解析指令，前面任何字符（空格、注释、BOM）都会触发兼容模式。
没写 <!DOCTYPE html>，浏览器大概率会进怪异模式（Quirks Mode），页面布局、盒模型、CSS解析全都不按标准来——这不是“可能出错”，而是“必然不一致”。
为什么 <!DOCTYPE html> 必须放在第一行
它不是标签，是解析指令。浏览器一打开 HTML 文件，就靠这一行决定用哪套规则解析后续所有内容。哪怕前面多一个空格、一个注释、甚至一个 BOM 字节，IE 和旧版 Edge 就直接退化到兼容模式；现代 Chrome/Firefox 虽然宽容些，但部分 CSS 行为（比如 box-sizing 默认值、line-height 计算逻辑）仍会悄悄变化。
常见错误现象：
- 同一段 CSS 在本地双击打开正常，放到服务器后错位
- Flex 布局子项高度塌陷，或
margin: 0 auto居中失效 - IE11 控制台显示 “文档模式：IE7 标准” 或 “IE5 怪异”
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用编辑器检查文件开头是否真·无任何字符（推荐 VS Code + “显示不可见字符”）
- 避免在
<!DOCTYPE html>前插入任何<!-- 注释 -->或<meta charset> - 服务端渲染（如 PHP/JSP）注意模板拼接时有没有意外换行或空格
documentMode 和 X-UA-Compatible 已被弃用，别再依赖
IE 的 documentMode 是运行时只读属性，仅 IE8–IE11 暴露，且无法通过 JS 修改；而 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 这种写法，在 Edge（基于 Chromium）中完全无效，在 Chrome/Firefox 中被忽略，在 IE11 中也仅对内网站点或本地文件有有限作用。
关键事实：
- Edge Legacy（IE 内核版）已于 2021 年停更，新版 Edge 不识别该 meta
- Chrome 从 2013 年起就无视
X-UA-Compatible - 用 JS 读取
document.documentMode判断 IE 版本，现在只会返回undefined或11（且不可信）
替代方案只有两个：
- 用
!doctype强制标准模式（最可靠） - 用特性检测（如
'flex' in document.body.style）代替 UA 或 documentMode 判断
HTML4 DTD 声明在现代项目中毫无必要
像 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 这类声明，本质是告诉浏览器：“请加载 HTML4 的 DTD 规则集”。但现代浏览器早已不下载也不校验这些远程 DTD 地址，只是靠字符串匹配做模式切换。
问题在于：
- 这类声明容易拼错 URL（比如多空格、协议缺失），导致触发怪异模式
- Strict/Transitional/FrameSet 区分在 HTML5 下已无实际意义
- 引入外部 DTD 可能造成 DNS 查询阻塞（尤其在弱网下）
所以：
- 新项目一律用
<!DOCTYPE html>（小写、无空格、无引号、无换行） - 老项目迁移时，删掉所有带 PUBLIC/SYSTEM 的 DTD 声明，替换为 HTML5 声明即可
- 不要为了“向后兼容 IE6”保留旧 DTD——IE6 本身就不支持 HTML5，且早已退出主流
真正容易被忽略的点：构建工具（如 Webpack/Vite）生成的 HTML 模板、SSR 框架（Next/Nuxt）注入的 head 内容、甚至某些 CMS 导出的静态页，都可能在 <!DOCTYPE html> 前偷偷加了注释或空行。上线前用浏览器“查看页面源代码”，肉眼确认第一行是不是干净的 <!DOCTYPE html>，比任何自动化检查都管用。
