HTML乱码根本原因在于文件实际编码、HTTP响应头、外部资源三者未对齐；需依次验证file -i确认真实编码、Network面板检查Content-Type头、确保JS/CSS/JSON等外部文件同为UTF-8无BOM。
HTML 里写了 <meta charset="UTF-8">，但页面还是乱码——这不是 meta 没用，而是它根本没生效。核心问题从来不在标签本身，而在文件实际编码、传输头、外部资源三者是否真正对齐。
HTML 文件实际保存编码 ≠ meta 声明编码
常见错误现象：VS Code 显示“UTF-8”，但打开文件后中文变成 ；或者改完 <meta charset="UTF-8"> 刷新没变化。
原因很直接：编辑器显示的只是“当前认为的编码”，不是文件磁盘上真实存的字节。比如你用 GBK 编码保存了 HTML 文件，却硬写 <meta charset="UTF-8">，浏览器就会把每个 GBK 字节当 UTF-8 解码，必然错乱。
- 在 VS Code 中：右下角点击编码名称 → 选
Save with Encoding→ 选UTF-8（不要选UTF-8 with BOM，BOM 会干扰 PHP/Node 输出或早期 IE） - 在 Notepad++ 中：菜单栏
编码 → 转为 UTF-8 无 BOM 格式 - 验证是否真为 UTF-8：Linux/macOS 下运行
file -i your.html，输出含charset=utf-8才算落地；Windows 可用head -c 3 your.html | xxd看前 3 字节是不是ef bb bf（BOM），有就是带 BOM
HTTP 响应头 Content-Type 优先级高于 meta
即使文件和 meta 都对了，Chrome Network 面板里看到 Response Headers 的 Content-Type: text/html; charset=gbk，那前面所有 UTF-8 设置全作废——浏览器以响应头为准。
立即学习“前端免费学习笔记（深入）”；
典型场景：
- Apache：检查
.htaccess或httpd.conf是否有AddDefaultCharset GBK，删掉或改为AddDefaultCharset UTF-8 - Nginx：检查
nginx.conf或站点配置里是否有charset gbk;，改为charset utf-8; - PHP 脚本输出 HTML 前调用了
header('Content-Type: text/html; charset=gb2312');，必须删或改成utf-8 - 静态文件托管（如 GitHub Pages、Vercel）默认不发 charset，此时
<meta charset="UTF-8">才起作用；但若你用自建服务，务必确认响应头没覆盖它
外部 JS/CSS/JSON 文件也得是 UTF-8
页面主体正常，但通过 <script src="app.js"></script> 加载的脚本里中文注释或字符串乱码，或 AJAX 返回 JSON 中文变问号——说明外部文件没统一编码。
关键点：
-
app.js和style.css文件本身也要用 UTF-8（无 BOM）保存，不能只改 HTML - 动态加载时（如 jQuery
$.get()或 fetch），服务器返回的 JSON 响应头必须是Content-Type: application/json; charset=UTF-8，否则浏览器可能按 ISO-8859-1 解析 - HTML 内联
<script></script>或<style></style>中的中文，只要 HTML 文件本身是 UTF-8 就没问题，无需额外声明 - HTMX 等现代库默认不设
Content-Type请求头 charset，后端需确保返回头明确带charset=UTF-8，否则文本型响应易出错
IE 和旧版 Edge 对 meta 位置极其敏感
在 IE11 或旧 Edge 中，<meta charset="UTF-8"> 必须出现在文档前 1024 字节内，且越靠前越好——如果前面有大段注释、空格、甚至 BOM，它就可能被忽略，导致自动编码探测失败，出现半个汉字或整页空白。
实操建议：
- 把
<meta charset="UTF-8">放到的第一行，紧贴开始标签，前面不要有任何字符（包括空格、换行、BOM） - 避免使用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，它兼容性不如charset属性，且更占字节数 - 如果必须兼容 IE，别依赖“自动识别”，强制用响应头控制；或在构建流程中用脚本清理 HTML 开头冗余内容
最常被忽略的一点：乱码从来不是单点问题。它要么是文件保存编码、meta 声明、HTTP 响应头三者之一不一致；要么是某个外部资源（JS/CSS/JSON）悄悄用了别的编码。逐层排查时，先看 Network 面板的响应头，再验文件真实编码，最后查外部依赖——跳过任何一层，都可能白调半天。
