结论：必须顶格、无BOM、无空格；必须在内且紧随之后，否则将触发Quirks模式或编码回退（如GBK/ISO-8859-1），导致布局错乱、JS语法错误、中文乱码及辅助功能失效。
直接说结论： 必须顶格、无BOM、无空格，<code><meta charset="utf-8"> 必须在 内且紧随 <title></title> 之后——这两条不满足，后续所有兼容性努力基本白搭。
DOCTYPE 必须顶格且无 BOM，否则浏览器进怪异模式
这是所有 HTML 兼容问题的开关。一旦 前面有任意字符（包括 UTF-8 BOM <code>U+FEFF、空格、换行、注释），IE 和旧版 Edge 会强制进入 Quirks Mode，导致：
-
flex、grid、box-sizing: border-box失效 -
document.body.scrollTop返回 0（实际已滚动） - 浮动和宽度计算逻辑彻底错乱
实操建议：
- 用 VS Code 打开文件，右下角确认编码为
UTF-8 without BOM；若显示UTF-8（带 BOM），点击切换 - 在 Chrome DevTools 的 Elements 面板顶部查看渲染模式：必须显示
Standards，不是Quirks - Node.js 模板（如 EJS）中避免
\n 这类换行，应写成 <code>
位置不对会导致中文乱码
这个标签不是“写了就行”，它必须出现在 内、且尽可能靠前——理想位置是 <title></title> 之后、任何 <script></script> 或 <link> 之前。原因：
立即学习“前端免费学习笔记（深入）”；
- Chrome 早期版本会按默认
ISO-8859-1解析已加载的 HTML 片段，直到遇到该<meta>才切换编码 - 如果它晚于某个
<script src="xxx.js"></script>，脚本中含中文字符串可能被错误解析 - HTTP Header 中发了
Content-Type: text/html; charset=utf-8仍需保留该标签——代理或本地file://场景下 Header 不生效
常见错误写法：
<head> <script src="polyfill.js"></script> <meta charset="utf-8"> </head>
正确顺序应为：
<head> <title>页面标题</title> <meta charset="utf-8"> <script src="polyfill.js"></script> </head>
lang 属性缺失会影响屏幕阅读器和 CSS 行为
不写 看似不影响布局，但会引发一连串隐蔽问题：
- 语音合成引擎无法识别中文声调，朗读生硬甚至误读
- Google 弱化页面语言识别，影响搜索结果匹配精度
- CSS 中
:lang(zh)伪类、quotes自动引号、某些字体 fallback（如font-family: "PingFang SC", sans-serif）行为异常 - iframe 子文档未声明
lang时，会继承父级，可能导致粤语内容被普通话引擎朗读
注意点：
- 简体中文必须用
zh-CN，不能只写zh；繁体用zh-TW或zh-HK - SPA 动态切换语言时，必须同步执行
document.documentElement.lang = 'zh-TW'，否则辅助技术仍读旧值
最容易被忽略的是：这些设置都依赖「文件保存方式」与「模板输出逻辑」的配合。编辑器里看着没问题，但 PHP/Node 模板渲染时多一个空格、EJS 编译后插入 BOM、构建工具自动注入注释——都会让顶格声明瞬间失效。检查时别只盯 HTML 源码，要查最终 HTTP 响应体开头的字节序列。
