浏览器显示乱码主要因meta charset缺失或错误、文件含BOM、服务器响应头charset优先级更高、内外联资源编码不一致及数据源编码不匹配所致，需全链路统一UTF-8（无BOM）并校验各环节。
浏览器显示乱码是因为 meta charset 没写对
HTML 页面出现中文变方块、问号或小方框，90% 是因为 <meta charset> 缺失或值错误。浏览器默认按 ISO-8859-1 或系统编码解析，根本没机会读到 UTF-8 的字节流。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须在
最开头（早于任何文本内容和外部 CSS/JS 引入）放这行：<meta charset="UTF-8"> - 不要写成
utf8、utf-8（带短横）、UTF8（少横）——只有UTF-8是标准写法，大小写不敏感但惯例全大写加短横 - 如果用 PHP/Node 等后端生成 HTML，确保响应头
Content-Type也带charset=UTF-8，否则浏览器可能忽略 meta 标签
文件保存编码不是 UTF-8-BOM 就别加 BOM
编辑器保存时选了 “UTF-8 with BOM”，会导致 HTML 开头多出三个不可见字节（EF BB BF），部分老浏览器或代理会把它当垃圾字符渲染，甚至让 <meta charset> 失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 VS Code、Sublime、Notepad++ 等工具检查右下角编码显示，保存为
UTF-8（无 BOM） - 如果已存成 BOM 版，用 Notepad++ → 编码 → 转为 UTF-8（无 BOM）→ 保存；VS Code 点右下角编码 → “Save with Encoding” → 选
UTF-8 - Linux/macOS 下可用
file -i your.html查是否含 BOM；head -c 3 your.html | xxd输出ef bb bf就是中招了
服务器返回的 HTTP header 优先级高于 meta charset
哪怕你写了正确的 <meta charset="UTF-8">，只要服务器返回的响应头里是 Content-Type: text/html; charset=gbk，浏览器就按 gbk 解析——meta 只是 fallback。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Chrome 开发者工具 → Network → 点开 HTML 请求 → 查看 Response Headers 中的
Content-Type - 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');
script 和 style 标签里的中文也要靠编码一致来保命
内联 <script></script> 或 <style></style> 里的中文注释、字符串、CSS 内容，如果文件编码、传输编码、meta charset 三者不统一，照样乱码——尤其常见于用 JS 动态插入含中文的 DOM 或 alert。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有 HTML、CSS、JS 文件统一用 UTF-8（无 BOM）保存
- 避免在
<script></script>里写document.write("你好")这种裸字符串，改用 Unicode 转义："\u4f60\u597d"（兼容性更强） - 如果引入外部 JS/CSS，确认它们的响应头也是
charset=UTF-8，否则单独加charset="UTF-8"属性也没用（HTML5 已废弃该属性）
最麻烦的其实是混合场景：比如 PHP 输出 HTML 时 header 设了 UTF-8，但 MySQL 连接用的是 latin1，查出来的中文字段一塞进页面就变乱码——这时候光调 HTML 编码没用，得一路追到数据源。
