必须位于内首个位置（DOCTYPE后立即紧接），且HTML文件须为UTF-8无BOM编码，HTTP响应头Content-Type不得冲突，三者缺一不可；lang属性必须设于根标签，不可省略或错放。
meta charset 必须写，且必须放在 最前面；lang 属性不是可选，而是影响屏幕阅读器、搜索引擎和部分 CSS 行为的关键配置。两者缺一都会导致中文显示异常、语音朗读错乱或 SEO 识别偏差。
怎么写 meta charset="UTF-8" 才真正生效
它只在位置、编码一致性、BOM 三者都对时才起作用：
- 必须是
中第一个标签（DOCTYPE 之后立即跟上），不能被注释、空行或<script></script>挡住； - HTML 文件本身保存为 UTF-8 无 BOM — VS Code 默认符合，但 Sublime Text / Notepad++ 可能默认带 BOM，BOM 会卡在
前面，让 <code>meta charset失效； - HTTP 响应头里的
Content-Type: text/html; charset=...如果明确设为gbk或iso-8859-1，浏览器会直接忽略meta标签；可在浏览器 DevTools 的 Network → Response Headers 里确认实际返回值； - 别写
charset="utf8"或"UTF_8"— 只有"UTF-8"（短横、大写 U、T、F）是 HTML5 规范认可的合法值，其他写法可能被某些旧解析器降级处理。
lang 属性该加在哪儿、怎么填
它不是装饰，而是语义必需项：
- 必须加在
根标签上，例如：；写在或中间元素上无效； -
zh-CN是中国大陆简体中文的标准值，zh-TW对应繁体中文（台湾），zh-HK对应香港；不要用zh这种泛化写法，它不指定地区变体，会影响字体回退和拼音断词； - 如果页面含双语内容（比如中英混排段落），可对局部元素单独加
lang，如：<p lang="en">Hello world</p>； - 千万别混用
meta http-equiv="Content-Language"— 它已被废弃多年，现代浏览器完全不读取，且与lang属性语义不同（后者是内容语言，前者曾试图表示“文档首选语言”，但从未被实现）。
为什么改了 meta charset 还是乱码
常见真实故障链路，往往不是单点问题：
立即学习“前端免费学习笔记（深入）”；
- 你改了 HTML 里的
meta charset="UTF-8"，但服务器 Nginx/Apache 返回的是Content-Type: text/html; charset=GBK— 此时浏览器以响应头为准，meta被跳过； - 你用 PHP 输出 HTML，但 PHP 文件本身是 GBK 编码，
echo "<meta charset='\"UTF-8\"'>"这串字符串在输出时就被转成乱码字节，浏览器收到的其实是损坏的 HTML； - 你引入了外部 JS 或 CSS，它们文件本身是 ISO-8859-1 编码，哪怕 HTML 正确，JS 里的中文字符串（如
alert("提交成功")）也会报Uncaught SyntaxError: Invalid or unexpected token； - 你在本地双击打开 HTML 文件（
file://协议），此时没有 HTTP 响应头，浏览器只能依赖meta和文件 BOM — 若文件带 BOM 且编辑器又没识别好，就会出问题。
最易被忽略的一点：HTML 模板引擎（如 EJS、Twig、Nunjucks）生成页面时，meta charset 往往插在模板头部，但若模板继承链里某一层提前写了 <title></title> 或 <script></script>，就可能把 meta 推到第二位，直接失效。检查最终渲染出的 HTML 源码，确认它是 里第一个标签 — 这比任何教程都管用。
