HTML中文乱码检测与处理实例-html教程-PHP中文网

先查network中response headers的content-type是否含charset=utf-8；若否，则meta被无视；若是，再确认是否位于内首个非空非注释标签且文件实际为utf-8无bom。

html中文乱码检测与处理实例

浏览器打开 HTML 页面显示中文乱码，基本就是编码声明、文件实际编码、HTTP 响应头三者中至少一个没对上。其他花哨原因占比极低，先盯死这三点。

这个标签不是写了就管用，它只在前 1024 字节内被扫描，且前面不能有任何干扰。

打开开发者工具 → Network → 刷新页面 → 找到主 HTML 请求 → 点开 → Headers → 查看 Response Headers 里的 Content-Type。如果值是 text/html; charset=gbk 或压根没 charset，那 <meta> 已被无视，直接跳到下个副标题
如果 Content-Type 正确（含 charset=utf-8），再检查 HTML 源码：<meta charset="UTF-8"> 必须是内第一个非空、非注释的标签；前面不能有空格、换行、、BOM 字节
常见写错：<meta charset="utf8">（缺横线）、<meta charset="UTF8">（大小写不标准）、<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（HTML5 不推荐，且优先级低于 charset 属性）

编辑器显示的编码，就是文件实际保存的编码。显示“GBK”，说明文件根本不是 UTF-8，<meta> 就是空中楼阁。

Wechat HTML Publisher

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

下载

右下角点击当前编码（如“GBK”或“UTF-8 with BOM”）→ 选 Save with Encoding → 严格选 UTF-8（注意：不是 UTF-8 with BOM）
保存后，右下角应显示“UTF-8”，且无“with BOM”字样；若仍显示“UTF-8 with BOM”，说明 VS Code 在 Windows 下默认加了 BOM，必须手动选纯 UTF-8
验证是否真清除了 BOM：Linux/macOS 运行 head -c 4 index.html | xxd，输出不应含 ef bb bf；Windows PowerShell 运行 Get-Content index.html -Encoding Byte | Select -First 3，前三字节不应是 239, 187, 191

服务器发的 HTTP 头比 HTML 里的 <meta> 权重更高。本地双击打开（file:// 协议）时它不存在，但只要走 HTTP（哪怕 python -m http.server），它就起决定作用。

F12 → Network → 刷新 → 主 HTML 请求 → Response Headers → 看 Content-Type 值。常见错误值：text/html（缺 charset）、text/html; charset=iso-8859-1（Python 默认）、text/html; charset=gbk（Nginx 旧配置）
Nginx 配置需加 charset utf-8;（在 http、server 或 location 块内），不是 add_header Content-Type（那是覆盖，可能出错）
Node.js/Express：必须在 res.send() 前调用 res.set("Content-Type", "text/html; charset=utf-8")；res.sendFile() 默认不带 charset，得手动设
PHP：必须在任何输出（包括空格、BOM）之前调用 header("Content-Type: text/html; charset=utf-8")；BOM 会导致 header() 失败，报 “headers already sent”

HTML 本身没问题，但外部资源加载时用了错误编码，一样会触发乱码——尤其是中文注释、字符串或字体名。

单独访问 JS/CSS 文件 URL（如 http://localhost/app.js），看浏览器地址栏是否显示乱码；如果是，说明该文件本身保存编码不对，按第二副标题方法处理
检查引入标签是否显式声明编码：<script src="app.js" charset="UTF-8"></script>（虽已过时，但某些老环境仍依赖）
更稳妥的是确保 Web 服务器对 .js 和 .css 响应头也设了 charset=utf-8；Nginx 可配 location ~ \.(js|css)$ { add_header Content-Type "text/javascript; charset=utf-8"; }
注意：现代浏览器通常按 HTML 的 charset 推断外部资源编码，但若 JS/CSS 文件开头有 BOM 或服务器返回了冲突的 Content-Type，仍会出问题