HTML中文乱码是链条问题，任一环节断开（文件编码、HTTP头、meta位置、BOM干扰）都会导致乱码；必须确保文件为UTF-8无BOM、meta紧贴<head>开头且前无任何字符、外部资源同为UTF-8，并用Live Server等本地服务器预览验证。
HTML 中文乱码不是“写了 <meta charset="UTF-8"> 就万事大吉”的事——它是个链条问题，任一环节断开（文件编码、HTTP 头、meta 位置、BOM 干扰）都会让汉字变成问号或方块。
确认 HTML 文件真实编码是否为 UTF-8（无 BOM）
VS Code 右下角显示 “UTF-8” ≠ 实际是 UTF-8；若显示 “UTF-8 with BOM”，就已埋雷。BOM（EF BB BF）会卡在 <head> 前，导致浏览器跳过 <meta charset> 自动检测逻辑，退回到系统默认编码（Windows 是 GBK，Linux/macOS 常是 ISO-8859-1）。
- Linux/macOS 检查：运行
head -c 4 index.html | xxd，输出含ef bb bf即有 BOM - PowerShell 检查：运行
Get-Content index.html -Encoding Byte | Select -First 3，看前三字节是否为239, 187, 191 - 修复方式：VS Code 按
Ctrl+Shift+P→ 输入 “Change File Encoding” → 选 “Save with Encoding” → 选 “UTF-8”（注意：不带 “with BOM”）
<meta charset> 必须紧贴 <head> 开始，且前面不能有空格或注释
浏览器解析 HTML 时，只扫描前 1024 字节找 <meta charset>，且要求它出现在 <head> 标签后**第一个有效字符位置**。任何前置内容（哪怕一个空格、回车、<!-- --> 或零宽空格 U+200B）都可能导致失效。
- 错误写法：
<head>\n <!-- 注释 -->\n <meta charset="UTF-8"> - 正确写法：
<head><meta charset="UTF-8">（中间无换行、无空格、无注释） - 验证方法：Chrome 打开页面 → F12 → Elements 面板展开
<head>→ 确认<meta charset="UTF-8">是<head>下的第一个子节点
本地双击打开（file://）时，HTTP 头完全失效，全靠 <meta charset> 和文件编码
直接双击 HTML 文件，没有 Web 服务器参与，Content-Type 响应头根本不存在。此时浏览器唯一依据就是文件本身的字节流 + <meta charset> 声明 —— 两者必须严格一致，否则必乱码。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">：HTML5 已不推荐，兼容性差，且在 file:// 下无效 - 开发阶段务必用本地服务器预览：VS Code 安装
Live Server插件，右键 “Open with Live Server”，此时走http://127.0.0.1:xxxx/，HTTP 头生效，容错更强 - 若必须双击测试，确保：文件存为 UTF-8（无 BOM） +
<meta charset="UTF-8">紧贴<head>开头 +<head>前无任何字符（包括 BOM）
外部资源（CSS/JS）也需 UTF-8 编码，否则会污染主页面
即使 HTML 本身没问题，如果 <link rel="stylesheet" href="style.css"> 或 <script src="app.js"></script> 对应的文件是 GBK 编码，浏览器解析时可能触发编码重协商，间接导致 HTML 中文渲染异常（尤其在旧版 IE 或某些嵌入式 WebView 中）。
- 检查方式：用 VS Code 分别打开 CSS/JS 文件，确认右下角编码显示为 “UTF-8”（非 “GBK”、“GB2312” 或 “ISO-8859-1”）
- 批量修复：终端进项目目录，运行
iconv -f GBK -t UTF-8 style.css -o style.css.utf8 && mv style.css.utf8 style.css（Linux/macOS） - 编辑器设置：在 VS Code 的
.editorconfig中强制统一：charset = utf-8
真正棘手的乱码往往藏在看不见的地方：BOM 被当普通字符吞掉、<head> 前有不可见 Unicode 符号、CSS 文件偷偷用了 GBK、甚至 Git 在 Windows 和 macOS 之间自动转码……解决它不靠运气，靠逐层验证文件字节、HTTP 头、DOM 结构三者是否咬合。
