必须放在第一行，否则浏览器进入怪异模式，导致flex、grid等现代css失效；常见错误包括bom、空格或注释前置，应确保文件开头无任何字符，编码为utf-8 without bom。
为什么必须放在第一行
不写或错位会导致浏览器进入怪异模式（Quirks Mode），IE 和旧版 Edge 会彻底放弃现代 CSS 布局逻辑，flex、grid、甚至 box-sizing: border-box 都可能失效。
常见错误是顶部有空格、BOM 字节、注释或服务器注入的 UTF-8 BOM（尤其 PHP/Node.js 模板中容易出现）。
- 用文本编辑器检查文件开头是否为纯
，无任何字符（包括不可见的 <code>U+FEFF） - VS Code 中右下角确认编码为
UTF-8 without BOM；Sublime Text 可通过File → Save with Encoding → UTF-8 - Node.js 模板（如 EJS、Pug）注意避免前置换行或空格，比如
后直接跟..，别换行
<meta charset="utf-8">位置不对会丢掉中文
它必须在 内且越靠前越好——最好紧随 <title></title> 之后。晚于其他标签（比如 <script></script> 或 <link>）时，Chrome 早期版本会按默认 ISO-8859-1 解析已加载的 HTML 片段，导致中文变成 或乱码。
- 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">—— 这是 HTML4 写法，HTML5 只认charset属性 - 如果使用 HTTP Header 发送
Content-Type: text/html; charset=utf-8，仍需保留该<meta>标签：HTTP Header 在某些代理或本地文件场景下不可靠 - Vue/React SSR 模板里，确保服务端渲染出的 HTML 中该标签未被框架自动移除或延迟注入
不用
缺失 lang 属性时，语音合成引擎无法正确读出中文声调，Google 也会弱化页面语言识别，导致搜索结果匹配不准。更隐蔽的问题是：CSS 中 :lang() 伪类、quotes 自动引号、甚至某些字体 fallback 行为都依赖它。
-
lang值要精确：简体中文用zh-CN，繁体中文用zh-TW或zh-HK，不能只写zh - 子文档嵌套时（如 iframe），内部文档也应声明自己的
lang，否则继承父级可能导致粤语内容被普通话引擎朗读 - 动态切换语言的 SPA 应同步更新
document.documentElement.lang，否则 Vue i18n 或 react-intl 切换后，辅助技术仍读旧语言
过早关闭
浏览器解析器遇到 开始标签前就看到 <div>，会自动补全缺失结构，但补全规则各引擎不同：WebKit 可能插入 <code> 后再开 ，而 Gecko 会把头尾元素塞进隐式 ，导致 CSS 选择器意外命中或 JS document.head 引用异常。
- 验证方式：打开 DevTools → Elements 面板，看 DOM 树顶层是否严格为
......
- 模板引擎中注意条件语句是否意外截断了
或提前输出了 <code>内容（如末尾漏了） - 避免在
里写<script></script>且没设defer或type="module"：执行时document.body还不存在，document.querySelector('body')返回null
lang 精确值——它们不报错，但会在特定设备或用户群体中静默失效。
