<!DOCTYPE html>是唯一推荐的DOCTYPE写法，必须位于文件第一行且无BOM或空白；缺省或错误将触发怪异模式，导致盒模型、布局及JS行为异常。
DOCTYPE 声明不控制 HTML 语法，只决定浏览器用哪种模式解析和渲染页面——缺它或写错，大概率触发怪异模式（document.compatMode === "BackCompat"），布局、盒模型、JS 的 getBoundingClientRect() 行为都会出偏差。
为什么浏览器需要 DOCTYPE 来切换渲染模式
浏览器内核（如 Blink、WebKit、Trident）内置两套渲染逻辑：标准模式（Standards Mode）严格按 W3C 规范处理盒模型、浮动、行高计算；怪异模式（Quirks Mode）则模拟 IE5.5 等老古董的行为，比如 width 包含 padding 和 border，line-height 不撑开父容器等。DOCTYPE 是唯一能可靠触发标准模式的开关。
常见错误现象：
- 同一段 CSS 在 Chrome 和 Safari 中高度不一致
-
div包裹图片时底部莫名多出 3–5px 空隙（HTML5 DOCTYPE 下默认 inline 元素基线对齐，老 DOCTYPE 下行为不同） -
document.documentElement.clientHeight返回值比预期小，因怪异模式下视口计算逻辑不同
<!DOCTYPE html> 是唯一推荐的写法
HTML5 规范只要求这个字符串，大小写不敏感，前面不能有注释或空格，必须位于第一行、<html> 标签之前。其他写法要么过时，要么风险不可控：
立即学习“前端免费学习笔记（深入）”；
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">：仍可工作，但已无必要；若漏掉系统标识符或引号不匹配，部分旧浏览器可能降级为怪异模式 -
<!DOCTYPE html SYSTEM "about:legacy-compat">：非标准写法，Chrome 会忽略，Firefox 可能报 warning，毫无收益 - 省略 DOCTYPE 或写成
<doctype html>（小写开头）：IE 和 Edge Legacy 会直接进入怪异模式
如何快速验证 DOCTYPE 是否生效
打开开发者工具控制台，执行以下任一检查：
-
document.compatMode应返回"CSS1Compat"，不是"BackCompat" -
document.documentURI开头应为"http://"或"https://"，而非"about:blank"（后者常伴随无效 DOCTYPE） - 在 Elements 面板中右键
<html>→ “View page source”，确认<!DOCTYPE html>确实是文件第一行，且前面无 BOM 或空白字符
注意：某些构建工具（如 Webpack + HTML 插件）会在注入 HTML 模板时意外插入空行或注释，导致 DOCTYPE 失效——这不是浏览器问题，而是构建流程污染了源码结构。
服务端渲染或模板引擎里容易被忽略的细节
像 Next.js、Nuxt、Django 模板、PHP include 等场景，DOCTYPE 往往分散在多个文件中拼接。最容易踩的坑是：
- 主模板写了
<!DOCTYPE html>，但子模板（如header.html）开头又带了 BOM 或空格，最终输出时 DOCTYPE 被顶到第二行 - EJS、Pug 等模板语法中，
<% if (debug) { %>...<% } %>块如果放在 DOCTYPE 前，即使不渲染内容，也可能输出不可见字符 - Node.js 的
fs.readFile默认用 UTF-8 读取，但若文件带 BOM，Buffer.toString()会把\uFEFF当作普通字符塞进第一行
最稳妥的做法：所有模板入口文件手动检查前 10 字节是否为 3C 21 44 4F 43 54 59 50 45 20（即 /code> 的十六进制），而不是依赖肉眼观察。
