必须置于开头且为第一个非空白/非注释标签，否则浏览器仅扫描前1024字节无法识别，将fallback至系统默认编码（windows为gbk，linux/macos为iso-8859-1），导致中文乱码或js报invalid or unexpected token错误。
meta charset="UTF-8" 必须放在 开头、且是第一个非空白/非注释的标签，否则浏览器在解析前 1024 字节时找不到它，就会 fallback 到系统默认编码（Windows 是 GBK，Linux/macOS 是 ISO-8859-1），直接导致中文显示为乱码或 JS 报 Uncaught SyntaxError: Invalid or unexpected token。
为什么 meta charset="UTF-8" 放错位置就失效
浏览器只扫描 HTML 前 1024 字节来找 charset 声明。一旦前面有：
- 空格、换行、
<!-- 注释 --> - BOM 字节（
EF BB BF，常见于 VS Code 默认保存的 “UTF-8 with BOM”） - 其他非
<meta>标签（比如<title></title>写在了<meta charset>前面）
就会跳过该声明，不生效。验证方式：用 file -i index.html（Linux/macOS）或 Get-Content index.html -Encoding Byte | Select -First 3（PowerShell）检查是否有 BOM；打开开发者工具 → Network → 刷新 → 点 HTML 请求 → Headers → Response Headers，看 Content-Type 是否含 charset=utf-8。
VS Code 保存为真正 UTF-8（无 BOM）的操作要点
VS Code 右下角显示 “UTF-8 with BOM” 或 “GBK”，说明文件实际编码和 meta 声明不一致——这是最常被忽略的根源。
- 点击右下角编码标识 → 选 “Reopen with Encoding” → 选 “GBK”（如果当前是乱码）→ 确认能正常显示中文 → 再点编码标识 → “Save with Encoding” → 严格选 “UTF-8”（不是 “UTF-8 with BOM”）
- 保存后，右下角应只显示 “UTF-8”，且状态栏无 “with BOM” 字样
- 若已存为 “UTF-8 with BOM”，BOM 会卡在
<meta>前，导致声明被跳过，必须重存
HTTP 响应头比 meta 更优先，别只改 HTML
当页面通过 HTTP（http:// 或 https://）访问时，服务器返回的 Content-Type 响应头会覆盖 meta 声明。哪怕 HTML 里写对了，响应头是 text/html; charset=gbk 或压根没 charset，照样乱码。
- Nginx：在
server或location块加charset utf-8;（注意不是charset gbk;） - Express：在
res.send()前调用res.set("Content-Type", "text/html; charset=utf-8") - PHP：在任何输出前调用
header("Content-Type: text/html; charset=utf-8")，且确保 PHP 文件本身无 BOM - 静态文件直连
file://时，响应头不存在，才完全依赖meta——但开发阶段不该这么测
别用 meta http-equiv 替代 meta charset
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 是 HTML4 的兼容写法，HTML5 已不推荐。它在部分 WebView（如旧版 Android）、CI 工具（如 html-validate）中可能触发警告甚至报错，且语义不如 meta charset 清晰。
- W3C 验证器会标
charset="utf-8"为 warning，charset="UTF8"（缺短横线）为 error - 正确写法只有
charset="UTF-8"（U/T/F/-/8 全大写，短横线不能少，末尾 8 不能省） - 写成
charset="utf8"虽然多数浏览器能容错，但 Node.js 模块、某些构建流程会失败
真正卡住人的从来不是“要不要加 meta charset”，而是三个地方是否同时对齐：文件实际编码（UTF-8 无 BOM）、meta 标签位置与写法（ 第一个子元素、charset="UTF-8"）、HTTP 响应头（Content-Type: text/html; charset=utf-8）。漏掉任意一环，乱码就必然出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
