meta charset="UTF-8"必须置于最前以确保正确解码，lang="zh-CN"须写在标签上以保障中文渲染、语音朗读等关键功能，二者缺一不可且不可混淆。
meta charset="UTF-8" 必须写，lang="zh-CN" 也得写，但两者解决的是完全不同的问题：前者管字符能不能正确解码（不乱码），后者管浏览器和辅助工具“认不认得这是中文”。只做一半，大概率出问题。
为什么 meta charset="UTF-8" 一定要放在
浏览器解析 HTML 时，只扫描前 1024 字节来查找 meta charset。如果它被 <title></title>、注释、<script></script> 或 BOM 挡住，就会 fallback 到系统默认编码（Windows 是 GBK，Linux/macOS 常是 ISO-8859-1），导致中文变方块或问号。
- 正确顺序：
<meta charset="UTF-8"> <title>...</title>——meta是里第一个标签 - 错误示例：
<title>首页</title> <meta charset="UTF-8">—— 此时 title 内容已按 GBK 解析过一遍，再切 UTF-8 也晚了 - BOM 是个隐形陷阱：VS Code 默认保存为 UTF-8 with BOM，BOM（0xEF 0xBB 0xBF）会占用前 3 字节，但某些老编辑器或构建流程会把它当无效字符吞掉，导致实际扫描起点偏移
- 别写
charset=utf8或charset=UTF_8—— 只有"UTF-8"（带连字符、大小写不敏感但推荐大写）是 HTML5 合法值
lang="zh-CN" 不是可选项，而是影响渲染和行为的关键属性
lang 不控制编码，但它直接影响字体回退、语音朗读、拼写检查、搜索引擎语义识别，甚至 CSS 的 :lang() 伪类。设错或不设，中文页面可能被当成英文渲染（比如用英文字体显示中文），或被屏幕阅读器读成拼音而非汉字。
- 必须写在
标签上：，写在或其他元素上无效 -
zh-CN是标准写法，不是zh或zh-ch；港澳台地区用zh-HK、zh-TW - 不要混用
meta http-equiv="Content-Language"—— 这个早已被废弃，现代浏览器完全忽略它 - 双语内容要局部标注：
<p lang="en">Hello</p>，否则全局lang会让翻译插件误判整段
验证是否真正生效的三步检查法
光写对没用，得确认浏览器实际加载时用的是什么编码和语言。很多“写了但没生效”的问题，都卡在这一步。
- 打开 Chrome DevTools → Network → 刷新页面 → 点击
index.html→ 查看 Response Headers 中的Content-Type，必须含charset=UTF-8；若这里是gbk或缺失，说明服务器配置覆盖了meta - 右键网页 → “查看网页源代码” → 检查
meta charset是否真在开头，且没有被注释、BOM 或空格隔开 - 在 Elements 面板中选中
元素，看属性里是否有lang="zh-CN"；若没出现，说明写错位置或被 JS 动态覆盖
最容易被忽略的是服务器响应头与文件编码的冲突：比如 Nginx 没配 charset utf-8;，而 HTML 文件本身又是 GBK 编码，此时哪怕 meta 写对了，浏览器也会优先信 HTTP 头，直接用 GBK 解码整个文件——结果就是所有中文全变成乱码，且无法通过前端修复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
