必须紧贴开头，浏览器仅扫描前1024字节查找该标签；若开头存在bom、空行、注释或不可见字符（如zero width space），则声明失效，退为系统默认编码（如gbk/iso-8859-1），导致中文、emoji及js语法错误。
确认 <meta charset="UTF-8"> 是否写在
浏览器只扫描 HTML 前 1024 字节来查找 charset 声明，一旦开头有 BOM、空行、注释或不可见 Unicode 字符（比如 ZERO WIDTH SPACE），<meta charset="UTF-8"> 就可能被跳过。常见错误包括：
-
前存在<!-- 注释 -->或空格/换行 -
<meta>写在<title></title>或<script></script>后面 - 用了错写法：
<meta charset="utf8">（缺横线）、<meta charset="UTF8">（大小写不标准） - 误用旧式写法：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，HTML5 中已不推荐
正确写法必须紧贴 开始，且前面不能有任何内容：
<meta charset="UTF-8"><title>页面标题</title>
检查 HTML 文件是否真为 UTF-8（无 BOM）编码
VS Code 状态栏显示 “UTF-8” ≠ 实际是 UTF-8；它可能显示 “UTF-8 with BOM”，而 BOM（EF BB BF）会干扰 <meta charset> 解析。验证和修复方法：
- Linux/macOS：运行
head -c 4 index.html | xxd，若输出含ef bb bf，说明有 BOM，需清除 - Windows PowerShell：运行
Get-Content index.html -Encoding Byte | Select -First 3，确认前三字节不是239 187 191 - VS Code：按
Ctrl+Shift+P→ 输入 “Change File Encoding” → 选 “Save with Encoding” → 选 “UTF-8”（注意：不是 “UTF-8 with BOM”） - Sublime Text：菜单
File → Save with Encoding → UTF-8
保存后状态栏应只显示 “UTF-8”，不带 “with BOM” 字样。
区分 file:// 与 http:// 场景下的生效逻辑
双击打开本地 HTML 文件（即 file:// 协议）时，HTTP 响应头完全失效，<meta charset> 是唯一生效机制。但若通过 Web 服务器访问（如 http://localhost），响应头中的 Content-Type 优先级高于 <meta>：
- Nginx 配置需加：
charset utf-8;（在http或server块中） - Apache 需在
.htaccess加：AddDefaultCharset UTF-8 - Node.js/Express 中需在
res.send()前调用：res.set("Content-Type", "text/html; charset=utf-8") - PHP 中需在任何输出前加：
header("Content-Type: text/html; charset=utf-8")
用浏览器开发者工具的 Network 面板查看 HTML 请求的 Response Headers，确认 Content-Type 值是否含 charset=utf-8 —— 若是 charset=gbk 或缺失，<meta> 会被覆盖。
避免编辑器自动插入非 UTF-8 编码或 BOM
某些编辑器（如旧版 Notepad++）新建文件默认用 GBK，即使你手动写了 <meta charset="UTF-8">，文件本身仍是 GBK 编码，浏览器按 meta 解析后仍会乱码。更隐蔽的是：
- 用 FTP 工具上传时勾选了 “自动转换编码”，导致 UTF-8 文件被转成 GBK
- VS Code 在 Windows 下默认保存带 BOM，且状态栏不提示，仅靠肉眼无法识别
- AI 生成的 HTML 模板常把
<meta>放在<title></title>后，或混入不可见控制字符 - 复制粘贴中文时，从 Word 或微信等富文本来源带入格式字符，破坏编码一致性
最稳妥做法：所有 HTML 文件新建后立即用 VS Code 手动设为 UTF-8（无 BOM），再写内容；每次保存前确认状态栏无 “with BOM”；上线前用命令行二次验证编码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
