HTML中文乱码本质是meta charset声明、文件实际编码、HTTP Content-Type响应头三者不一致；任一错位即触发系统默认编码（如GBK），导致中文显示为“ä¸æ–‡”等乱码，须逐层排查并统一为UTF-8（不含BOM）。
HTML 中文乱码不是“换个编码试试就行”的问题，而是多层声明与实际字节不一致导致的显示失败。核心判断标准只有一条：meta charset 声明、文件实际编码、HTTP Content-Type 响应头三者必须完全一致；任一错位，浏览器就会 fallback 到系统默认（如 Windows 下是 GBK），中文立刻变 ä¸æ–‡ 或 。
怎么快速确认是哪一层出问题？
打开开发者工具 → Network → 刷新页面 → 找到主 HTML 请求 → 看 Response Headers 里的 Content-Type 值。如果它写着 text/html; charset=gbk 或压根没带 charset，那 meta charset="UTF-8" 就被无视了。此时改 HTML 里的 meta 没用，得先修服务器配置。
如果响应头正确（charset=utf-8），但页面还是乱码，再检查文件本身：
- 在 VS Code 右下角看当前编码显示 —— 若是
GBK或UTF-8 with BOM，就不是真正的 UTF-8 - 用命令行验证：
head -c 4 yourfile.html | xxd，输出含ef bb bf表示有 BOM，需清除 -
meta charset标签是否真在<head>开始后 1024 字节内？前面有空格、注释或 BOM 都会让它失效
为什么删掉 BOM 后乱码反而更严重？
BOM 是三个字节 ef bb bf，加在文件开头。很多编辑器（尤其是 Windows 下的）默认保存为 UTF-8 with BOM，而 HTTP 协议和现代 Web 栈普遍不期望它存在。BOM 一旦混入，会导致：
立即学习“前端免费学习笔记（深入）”；
- PHP 输出时提前发送了不可见字符，破坏
header()调用 - Nginx / Apache 的 gzip 压缩异常，部分浏览器解压失败
-
meta charset实际位置被推后，超出浏览器前 1024 字节扫描范围 - 某些旧版 IE 直接把 BOM 当作内容渲染，开头出现空白或乱码符号
解决方法：用 VS Code 点右下角编码 → Save with Encoding → 选 UTF-8（明确不含 with BOM）；Notepad++ 选“转为 UTF-8 编码”（非“UTF-8-BOM”）。
meta charset 放错位置或写错格式会怎样？
meta charset 必须是 <head> 内第一个非空、非注释的标签，且不能有任何前置字符。常见错误包括：
- 写成
<meta charset="utf8">——utf8不是标准值，必须是UTF-8（大小写不敏感但连字符不能少） - 放在
<title>后面，或前面有<!-- 注释 -->或空行 - 同时存在
<meta charset="UTF-8">和<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 浏览器可能取第一个，也可能冲突 - 路径中用了相对 URL 或 JS 动态插入该标签 —— 完全无效，必须是静态 HTML 解析时就能读到的原始标签
正确写法只有一种：
<head> <meta charset="UTF-8"> <title>页面标题</title> </head>
为什么本地 file:// 打开正常，部署后就乱码？
因为 file:// 协议下，浏览器完全忽略 HTTP 响应头，只认 meta charset；而通过 http:// 或 https:// 访问时，Content-Type 响应头优先级高于 meta。所以：
- 本地测试没问题，上线就乱码 → 一定是服务器返回的
Content-Type不对 - Apache 用户检查
.htaccess是否有AddDefaultCharset UTF-8 - Nginx 用户检查
nginx.conf的server或location块里有没有charset utf-8; - Node.js/Express 用户确保响应头设置了
res.set('Content-Type', 'text/html; charset=utf-8') - 静态托管平台（如 GitHub Pages、Vercel）通常默认 UTF-8，但若上传了带 BOM 的文件，仍会出问题
最易被忽略的一点：有些 CMS 或模板引擎会在输出 HTML 前自动注入额外字符（比如调试信息、空格、换行），哪怕源码里 meta 写对了，实际吐出来的 HTML 开头也可能偏移——务必用开发者工具直接查看「已加载的源码」，而不是编辑器里的源文件。
