90%的html中文乱码是缺失、错位或与文件实际编码不匹配所致；其必须紧贴开头，因浏览器仅扫描前1024字节且要求无bom、空格、注释等前置干扰，http响应头优先级高于meta，file://协议下则完全依赖meta生效。
直接结论：90% 的 HTML 中文乱码，是 <meta charset> 缺失、错位或与文件实际编码不匹配导致的，不是浏览器问题，也不是“自动识别失败”——是源头没写对、没写全、没写准。
为什么 <meta charset="UTF-8"> 必须紧贴
HTML 解析器只扫描前 1024 字节找 <meta charset>，且必须在任何非空白、非注释、非 BOM 的字符之前。一旦前面有 BOM（EF BB BF）、空格、换行、 后的多余回车，甚至一个中文注释，它就失效。
- VS Code 默认保存为 “UTF-8 with BOM”，BOM 会卡在
<meta>前面，直接让该标签被忽略 - Notepad++ 里点“转为 UTF-8”默认带 BOM；必须选“转为 UTF-8（无 BOM）”
- Linux/macOS 下用
head -c 3 your.html | xxd查看开头三字节，如果是ef bb bf，就得删 BOM - PowerShell 下用
Get-Content your.html -Encoding Byte | Select -First 3，输出239, 187, 191就是 BOM
HTTP 响应头里的 Content-Type 和 <meta charset> 谁说了算？
HTTP 响应头优先级永远高于 <meta charset>。如果服务器返回 Content-Type: text/html; charset=gbk，哪怕你写了 <meta charset="UTF-8">，浏览器也按 GBK 解码——然后显示一堆 0108。
- Nginx 配置中写
charset gbk;或add_header Content-Type "text/html; charset=gbk";是常见罪魁 - Apache 的
.htaccess里若有AddDefaultCharset GBK，必须删掉或改成AddDefaultCharset UTF-8 - Node.js/Express 中，
res.sendFile()不自动设 header，得手动加res.set('Content-Type', 'text/html; charset=utf-8') - Chrome DevTools → Network → 点 HTML 请求 → Headers → Response Headers，直接看
content-type值是否含charset=utf-8
本地双击打开（file:// 协议）时乱码怎么办？
这个场景没有 HTTP 响应头，<meta charset> 是唯一依据。但很多编辑器（尤其 Windows 上的 VS Code）默认用系统编码（GBK）打开非 UTF-8 文件，结果你看到的是“已乱码”的源码，再怎么改 <meta> 都白搭。
- VS Code 打开乱码 HTML 时，右下角状态栏会显示当前编码（如 “GBK”），点击它 → “Reopen with Encoding” → 选 “UTF-8”（不是 “UTF-8 with BOM”）
- 改完后立刻点右下角 → “Save with Encoding” → 再选 “UTF-8”（确认不带 BOM）
- Sublime Text / Notepad++ 同理：先“以编码方式重新打开”，再“另存为 UTF-8（无 BOM）”
- 别信编辑器右下角显示的“UTF-8”就代表文件真是 UTF-8——它只是按那个编码去读，文件本身可能还是 GBK
动态生成 HTML（EJS、Thymeleaf、PHP）时容易漏哪几处？
模板引擎拼接 HTML，<meta charset> 很容易被插在错误位置，或被上层框架覆盖 header。
- EJS 中，
<meta charset="UTF-8">这种条件写法极危险——万一条件不满足，整个<meta>就没了 - Thymeleaf 模板若继承 layout，
<meta charset>必须放在<fragment></fragment>内，且确保 layout 文件没重复插入 - PHP 输出 HTML 前调用了
header('Content-Type: text/html; charset=gb2312');，会直接覆盖 meta 效果 - Python Flask/Jinja2 中，
<meta charset="utf-8">必须出现在 base.html 的最开头，不能被{% block head %}{% endblock %}包裹后延迟注入
真正棘手的从来不是“怎么加 meta”，而是“谁在悄悄覆盖它”——BOM、响应头、模板继承顺序、编辑器编码误判，四者叠加时，改一处根本没用。每次修复前，先用 DevTools 看响应头、用 xxd 看文件头、用编辑器重载编码，三件事做完，再动代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
