如何修复HTML中文乱码显示错误-html教程-PHP中文网

html文件实际编码必须为无bom的utf-8，且须紧贴开头；bom或前置内容会导致浏览器fallback至gbk等默认编码而乱码。

如何修复html中文乱码显示错误

确认 HTML 文件实际编码是否为 UTF-8（含 BOM 问题）

浏览器只看文件开头几个字节来猜编码，如果文件保存时带了 BOM（EF BB BF），但 <meta charset="UTF-8"> 又没放在最开头，就极大概率 fallback 到系统默认编码（Windows 是 GBK，Linux/macOS 常是 ISO-8859-1），导致中文变 ÃÂ 或一堆问号。

VS Code 底部状态栏显示 “UTF-8 with BOM” → 点击它 → 选 Save with Encoding → UTF-8（不带 BOM）
Linux/macOS 验证：运行 head -c 4 index.html | xxd，输出含 ef bb bf 就说明有 BOM，需删掉
PowerShell 验证：运行 Get-Content index.html -Encoding Byte | Select -First 3，若前三字节是 239, 187, 191，就是 BOM
Sublime Text 或 Notepad++ 保存时务必选 “UTF-8”，不是 “UTF-8 with BOM” 或 “ANSI”

`<meta charset>` 必须紧贴开头，且只能有一个

HTML 解析器只扫描前 1024 字节找 charset 声明，任何前置内容（空格、换行、注释、零宽字符、BOM）都会让它失效。哪怕只是前多一个空行，<meta charset="UTF-8"> 就可能被忽略。

正确写法（无空行、无注释、无隐藏字符）：
```
<meta charset="UTF-8"><title>页面标题</title>
```
错误写法示例：<meta charset="UTF-8">、\n<meta charset="UTF-8">、<meta charset="utf8">（小写 utf8 非标准）
别写 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> —— HTML5 已不推荐，且容易和真实 HTTP 头冲突
确保整个 HTML 中只有一个 <meta charset>，重复会引发不可预测行为

检查浏览器 Network 面板中的 Response Headers

当页面通过 http:// 或 https:// 访问时，服务器返回的 Content-Type 响应头优先级高于 <meta charset>。如果它写着 charset=gbk 或压根没声明 charset，浏览器就会无视 HTML 里的 meta 标签。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

F12 → Network → 刷新 → 点击 HTML 请求 → 查看 Response Headers 下的 Content-Type
Nginx 配置要加：add_header Content-Type "text/html; charset=utf-8"; 或全局 charset utf-8;
Node.js/Express：在 res.send() 前调用 res.set("Content-Type", "text/html; charset=utf-8")
PHP：在输出 HTML 前调用 header("Content-Type: text/html; charset=utf-8");，且不能有任何输出（包括空格、BOM）在它之前
本地双击打开（file:// 协议）时，HTTP 头完全无效，此时唯一靠的就是 <meta charset> 和文件实际编码

排查编辑器自动转码和 FTP 传输模式

有些编辑器（如旧版 Notepad++）在打开 GBK 文件后，即使你手动写了 <meta charset="UTF-8">，保存时仍按原编码（GBK）写入，导致文件本身仍是乱码字节 —— 浏览器再怎么读 meta 也救不回来。

VS Code 打开 HTML 后，右下角编码显示为 GBK 或 GB2312 → 点击它 → Reopen with Encoding → 选 GBK → 再点右下角 → Save with Encoding → UTF-8
FTP 上传时，必须用“二进制模式”（Binary），不能用“ASCII 模式”，否则会悄悄转换换行符甚至中文字符
Git 用户注意：.gitattributes 中避免对 *.html text 这类设置，它可能触发 Git 的自动换行转换
如果页面里只有部分字段乱码（比如从数据库读出的内容），问题大概率不在 HTML 文件本身，而在后端接口或数据库连接层的编码设置