乱码本质是编码与解码规则不一致：文件实际编码、声明、http响应头content-type三者必须完全统一。bom存在或位置错误会使失效，本地file://协议下无响应头，更需确保文件为纯utf-8且紧贴开头。
乱码不是“浏览器坏了”，而是浏览器没读懂你的文件——它在用 GBK 解码一个 UTF-8 字节流，或反过来。核心就三点：文件实际编码、<meta charset> 声明、HTTP 响应头 Content-Type，三者必须完全一致，缺一不可。
怎么确认 HTML 文件实际是 UTF-8（无 BOM）？
VS Code 右下角显示 “UTF-8 with BOM” 或 “GBK”，就不是你要的；必须是纯 “UTF-8”。BOM（EF BB BF）会卡在文件开头，导致浏览器跳过前 1024 字节查找 <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就是 BOM - VS Code 中点击右下角编码 → “Save with Encoding” → 选
UTF-8（注意不是 “UTF-8 with BOM”） - Notepad++：菜单栏“编码” → “转为 UTF-8 编码”（不是 “UTF-8-BOM”）
为什么写了还乱码？
写了但无效，大概率是它没被浏览器“看到”——位置错了、被挡了、写法错了。
- 必须是
内第一个非空白、非注释的标签，前面不能有任何字符（包括空格、换行、<!-- 注释 -->、零宽空格） - 写法必须严格是
<meta charset="UTF-8">；utf8、UTF8、utf-8全部不认 - 别混用：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">是 HTML4 写法，HTML5 已不推荐，且和<meta charset>同时存在会冲突 - 用浏览器 F12 → Elements 标签页，展开
，确认<meta charset="UTF-8">是第一个子节点
HTTP 响应头 Content-Type 覆盖了 怎么办？
当页面通过 http:// 或 https:// 访问时，服务器返回的 HTTP 响应头中 Content-Type 的优先级高于 <meta>。如果它写着 charset=gbk 或干脆没带 charset，乱码必现。
- F12 → Network → 刷新 → 找主 HTML 请求 → Headers → Response Headers → 查
Content-Type值 - Nginx：配置里加
charset utf-8;（在http、server或location块内），别用add_header Content-Type，那会重复 - 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")，且前面不能有任何 echo、空行、BOM
本地双击打开（file:// 协议）时乱码怎么办？
此时没有 HTTP 响应头，全靠 <meta charset> 和文件实际编码。但很多编辑器（尤其 Windows 下 VS Code）默认保存带 BOM，而 <meta> 又被 BOM 挡住，双重失效。
- 务必按前面方法清除 BOM，并确认 VS Code 状态栏只显示 “UTF-8”（无 “with BOM” 字样）
-
<meta charset="UTF-8">必须紧贴开始，前面零字符容忍度为 0 - 别依赖双击测试：用 VS Code 安装 Live Server 插件，右键 “Open with Live Server”，走
http://127.0.0.1才能真实模拟线上环境 - 若仍不行，临时用 Notepad++ 打开 → “编码” → “转为 ANSI” → 再 “转为 UTF-8”，强制重置编码状态
最容易被忽略的是 BOM 和响应头的隐性覆盖——它们不报错，只是静默地让 <meta charset> 形同虚设。验证时别只看代码写了没，要查文件二进制头、看浏览器 Network 面板、盯死状态栏编码显示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
