html中文乱码主因是编辑器保存编码与meta声明不一致或误存utf-8 with bom：bom占用开头3字节致meta被跳过，浏览器回退gbk解码；vs code需选“save with encoding→utf-8”（不含bom），notepad++须“转为utf-8”后“另存为”并确认状态栏显示utf-8，且css/js文件也须同为utf-8无bom。
HTML文件保存导致的中文乱码，90%以上是编辑器保存编码与声明不一致，或误存为 UTF-8 with BOM 引起的——不是内容损坏，而是“读法错了”。
VS Code 保存时显示 “UTF-8 with BOM” 怎么办
VS Code 在 Windows 下默认给新 HTML 文件加 BOM（字节顺序标记），而 <meta charset="UTF-8"> 只在前 1024 字节内被浏览器扫描；BOM 占用开头 3 字节（ef bb bf），会挤占有效扫描空间，导致 meta 被跳过，浏览器 fallback 到系统默认编码（如 GBK）解码，出现 æç± 类乱码。
- 右下角点击当前编码（如 “UTF-8 with BOM”）→ 选
Save with Encoding→ 严格选UTF-8（不含 “with BOM”） - 保存后右下角应显示纯
UTF-8，状态栏不能带 “with BOM” 字样 - 验证：用 PowerShell 执行
Get-Content index.html -Encoding Byte | Select -First 3，输出不应是239 187 191（即ef bb bf） - 若已保存为 BOM 版本，不要选 “Reopen with Encoding”，而要先
Save with Encoding → UTF-8覆盖重存
Notepad++ 保存后仍是乱码，常见错在哪
Notepad++ 的“编码”菜单里，“UTF-8” 和 “UTF-8-BOM” 是两个独立选项，且“转为 UTF-8”不等于“以 UTF-8 保存”——很多用户点了“转为 UTF-8”，却没点“另存为”，结果仍按原编码（如 ANSI/GBK）写回磁盘。
- 必须执行完整流程：菜单栏
编码 → 转为 UTF-8→文件 → 另存为→ 确认底部状态栏显示UTF-8 - 避免点“使用 UTF-8 格式编码”，这个选项只影响新建文件，不改变当前文件保存行为
- 如果原始内容是 GBK 编码的中文，直接“转为 UTF-8”会错误解码再重编码，产生二次乱码；应先
编码 → 重新以 ANSI 编码打开（还原为 GBK 视图），再转为 UTF-8后保存
为什么改了 <meta charset="UTF-8"> 还是乱码
meta 标签本身不改变文件字节，它只是告诉浏览器“请用 UTF-8 解这堆字节”。如果文件实际保存为 GBK，浏览器硬用 UTF-8 去解，就会把每个 GBK 双字节当两个 UTF-8 单字节处理，必然出错。
- 先确认文件真实编码：
file -i index.html（Linux/macOS）或 VS Code 右下角编码标识（非猜测） -
<meta charset="UTF-8">必须放在开始后**第一个非空、非注释位置**，前面不能有空格、BOM、HTML 注释或换行 - 禁止写成
<meta charset="utf8">或<meta charset="UTF8">—— 浏览器识别宽松但不保证，应统一用UTF-8 - 如果文件开头有 PHP/Node.js 输出（如
<?php echo 'xxx'; ?>），确保这些服务端代码没输出 BOM 或空格到前
本地双击打开 HTML 乱码，但服务器上正常
这是典型的 file:// 协议限制：没有 HTTP 响应头，浏览器完全依赖 <meta charset> 和文件编码。一旦 meta 失效（BOM / 位置错 / 写错），就 fallback 到系统默认（Windows = GBK，macOS/Linux ≈ ISO-8859-1），立刻乱码。
- 开发阶段务必用本地服务器预览：VS Code Live Server 插件、Python
python -m http.server、或 Nginx 静态服务 - 双击打开仅作快速查看，不能作为编码是否正确的判断依据
- 若必须双击，唯一可靠方式是：文件保存为 UTF-8（无 BOM）+
<meta charset="UTF-8">紧贴开始 + 删除所有开头空白和注释 - 注意：某些老旧 Windows 应用（如 Outlook 附件预览）会强制用 GBK 打开 HTML，这属于客户端限制，无法靠 HTML 修复
最易被忽略的一点：CSS 和 JS 文件也必须是 UTF-8（无 BOM）。哪怕 HTML 完全正确，只要 style.css 里写了 content: "按钮"; 却保存为 GBK，浏览器加载时照样解错——它们不继承 HTML 的 meta，各自独立解析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
