正确设置 meta charset="UTF-8"（必须为 head 第一个标签、无BOM/空行/注释）并配合 lang="zh-CN" 于 html 标签，同时确保 HTTP 响应头 charset=utf-8，才能彻底避免中文乱码。
页面语言声明本身不解决乱码，但配合正确的字符编码设置，能避免浏览器解析偏差和开发工具警告。关键不是加 lang 属性，而是让它和 meta charset="UTF-8" 协同生效。
必须把 meta charset="UTF-8" 放在
浏览器只扫描 HTML 文件前 1024 字节找编码声明。如果 <meta charset="UTF-8"> 前有 BOM（EF BB BF）、空行、注释（<!-- -->）或 <script></script>，就会跳过它，退回到系统默认编码（Windows 是 GBK），直接导致中文显示为“”或方块。所以：
-
<meta charset="UTF-8">必须是内第一个标签，前面不能有任何字符（包括空格和换行） - 用 VS Code 打开文件，右下角确认编码显示为 “UTF-8”（不是 “UTF-8 with BOM”），点击后选 “Save with Encoding” → “UTF-8”
- Linux/macOS 可用
xxd -l 4 index.html检查开头是否含ef bb bf；PowerShell 用Get-Content index.html -Encoding Byte | Select -First 3
lang 属性要写对位置和值
lang 是语义标记，不影响解码，但写错会触发校验警告（如 W3C Validator），也影响屏幕阅读器和搜索引擎。它应放在 根标签上：
- 正确写法：
或（简体中文） - 不要写成
lang="cn"、lang="ch"或lang="Chinese"—— 这些不是标准 BCP 47 语言标签 - 避免在
内重复加lang，也不要在<meta>里模拟（如http-equiv="Content-Language"已废弃）
HTTP 响应头中的 charset 优先级更高
当页面通过 http:// 或 https:// 访问时，服务器返回的 Content-Type 响应头（如 text/html; charset=utf-8）会覆盖 HTML 中的 meta 声明。若响应头缺失 charset 或设为 gbk，即使 meta 写得再规范，也会乱码：
立即学习“前端免费学习笔记（深入）”；
- Chrome/Firefox 开发者工具 → Network → 刷新页面 → 点 HTML 文件 → Headers → 查看 “Response Headers” 中的
content-type - Nginx 配置加：
charset utf-8;（在server或location块内） - Apache 配置加：
AddDefaultCharset UTF-8（在.htaccess或虚拟主机配置中） - Node.js/Express 中：在发送 HTML 前调用
res.set('Content-Type', 'text/html; charset=utf-8')
静态文件部署时注意构建工具干扰
Webpack、Vite、html-webpack-plugin 等工具在压缩或注入脚本时，可能意外移动、删除或重写 meta charset，尤其开启 minify 后：
- Vite 项目检查
vite.config.ts中build.rollupOptions.plugins是否误删了meta - html-webpack-plugin 若启用
minify.removeAttributeQuotes: true，可能把charset="UTF-8"变成charset=UTF-8（虽仍有效，但部分 Linter 会报 warning） - Git 提交前用
file -i index.html（Linux/macOS）或 PowerShellGet-Content检查实际编码，别只信编辑器右下角显示
