所有HTML文件顶部第一行必须是<!DOCTYPE html>，前面不能有任何字符，否则触发怪异模式；它只影响渲染模式，与验证无关；HTML5的DOCTYPE是最简唯一有效形式。
没有 DOCTYPE 会触发怪异模式
浏览器看到没有 <!DOCTYPE html> 的 HTML 文件，会自动降级到“怪异模式（Quirks Mode）”，渲染行为退回 IE5.5 那套老规则：盒模型按 border-box 算、width 包含 padding 和 border、行内元素的 vertical-align 行为异常、表格布局各种错位。这不是兼容性增强，是主动退化。
实操建议：
- 所有 HTML 文件顶部第一行必须是
<!DOCTYPE html>（注意大小写不敏感，但推荐小写） - 前面不能有任何字符——包括空格、BOM、注释、
<meta>标签，否则同样触发怪异模式 - 不要用旧式声明如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">，它们在现代浏览器中反而可能引发解析歧义
DOCTYPE 不是 DTD 验证开关
很多人以为加了 <!DOCTYPE html> 就等于启用 HTML5 验证，其实它只影响渲染模式（rendering mode），和校验器（validator）是否报错无关。W3C 验证器判断文档类型靠的是 DOCTYPE 声明本身，但浏览器根本不关心你写的标签合不合规范——它只看有没有这个声明来决定用哪套渲染引擎逻辑。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写了
<!DOCTYPE html>，但用了<font>或未闭合的<p>，页面照样显示，只是语义错误不报 - 删掉 DOCTYPE 后，CSS 里
display: flex突然失效，不是语法错，是浏览器根本没加载 Flexbox 渲染路径 - 某些老 CMS 输出的 HTML 自动插入 XML 声明
<?xml version="1.0"?>在 DOCTYPE 前，直接导致整个页面进入怪异模式
HTML5 的 DOCTYPE 是最简且唯一的有效形式
HTML5 规范明确只要求一个字符串：<!DOCTYPE html>。它不关联任何 DTD 文件，不下载外部资源，也不做实体声明。相比 HTML4 那种带 PUBLIC ID 和 SYSTEM URI 的冗长声明，这个写法就是为“向后兼容 + 向前确定”设计的。
为什么这样做：
- 浏览器识别 DOCTYPE 只匹配开头的
<!DOCTYPE和紧随其后的单词（忽略大小写和多余空格），所以<!doctype html>、<!DOCTYPE HTML>都合法 - 多写东西反而危险：比如
<!DOCTYPE html SYSTEM "about:legacy-compat">是无效的，会被当成无 DOCTYPE 处理 - 某些构建工具（如旧版 Jekyll 模板）默认插入带 URL 的 DOCTYPE，需手动清理
服务端模板或框架可能悄悄覆盖 DOCTYPE
Node.js 的 Express、Python 的 Django、PHP 的 Laravel 这些框架常通过 layout 模板拼接 HTML，容易在引入 head 片段时漏掉 DOCTYPE，或者在多个 partial 合并时把 DOCTYPE 插到 body 里——结果是文档开头变成 <html><head>...，DOCTYPE 彻底丢失。
排查方法：
- 用浏览器开发者工具的“Elements”面板看最顶部，确认
<!DOCTYPE html>是第一个节点 - 右键“查看网页源代码”，别信 Elements 面板的实时 DOM，源码才是真实输出
- 如果用 Webpack + HtmlWebpackPlugin，检查
template选项指向的 HTML 文件是否自带 DOCTYPE，而不是依赖插件注入
最容易被忽略的是：HTTP 响应头里 Content-Type 值为 text/html 但没指定 charset，虽然不影响 DOCTYPE 解析，但可能让 BOM 问题更隐蔽。事情说清了就结束
