页面中文乱码主因是文件编码、http响应头、浏览器解析三者未对齐；须检查content-type响应头、document.characterset值、文件真实编码（含bom）、位置与格式，并清除缓存验证。
页面中文乱码，八成是编码没对齐——不是只写 <meta charset="UTF-8"> 就完事，得同时确认文件保存格式、HTTP 响应头、浏览器实际解析三者一致。
检查浏览器实际使用的编码
别信编辑器右下角显示的“UTF-8”，那是它“以为”的；浏览器加载时可能按别的规则解码。打开 DevTools → Network → 刷新页面 → 找到 HTML 请求 → 点开 Response Headers，重点看 Content-Type 字段是否含 charset=UTF-8。如果没出现，说明服务器没发对；如果出现了但页面仍乱码，再查 document.characterSet（在 Console 里输）——返回值不是 "UTF-8"，就证明浏览器最终没按 UTF-8 解。
验证 HTML 文件真实编码（含 BOM 检测）
VS Code 显示“UTF-8”可能是假象：它会根据文件前几个字节自动猜测，而 GBK 文件里混了中文，也可能被误标为 UTF-8。正确做法是：
- 用十六进制编辑器（如 VS Code 安装 Hex Editor 插件）打开文件，看开头三字节是不是
EF BB BF（UTF-8 BOM）；没有，就是无 BOM UTF-8 或其他编码 - Notepad++：菜单栏「编码」→ 看当前激活项，若显示“ANSI”或“GBK”，直接选「转为 UTF-8-BOM」再保存
- 命令行快速检测：
file -i your-page.html（Linux/macOS）或chardet your-page.html（需 pip install chardet）
确保 <meta charset> 生效的硬性条件
这个标签不是写进去就起作用，它必须满足三个物理前提：
- 必须位于
内，且**在任何可能触发解析的标签之前**——比如不能放在<title></title>后面，更不能包在<script></script>或注释里 - 不能拼错：
charset不是charaset，UTF-8不能写成utf8或UTF8（HTML5 规范只认连字符形式） - 不能有空格或换行干扰：
<meta charset="UTF-8">要写成单行紧凑格式，避免<meta>这类换行破坏早期解析器识别
服务器响应头与 meta 标签的优先级冲突
HTTP 响应头里的 Content-Type: text/html; charset=GBK 会直接覆盖 <meta charset="UTF-8">，哪怕 meta 写得再标准也没用。常见踩坑点：
- 本地双击打开
file://协议的 HTML：此时无 HTTP 头，全靠 meta 和 BOM，BOM 缺失时 Windows 记事本保存的文件大概率被当 GBK 解 - Apache 的
.htaccess里写了AddDefaultCharset GBK，会强制覆盖所有响应头 - Nginx 配置中
charset utf-8;必须放在location /块内，而非 server 块顶部，否则对静态 HTML 不生效
最易被忽略的是：改完代码后没清浏览器缓存，或者用旧版 IE 加载了带 BOM 的 UTF-8 文件——IE 会把 BOM 当作页面首字符渲染出空白，进而影响后续 DOM 解析。动手前先关掉所有标签页，用隐身窗口重试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
