HTML文件实际编码必须为无BOM的UTF-8，且<meta charset="UTF-8">须紧贴<head>开头；BOM或前置内容会导致浏览器fallback至GBK等默认编码而乱码。
确认 HTML 文件实际编码是否为 UTF-8（含 BOM 问题）
浏览器只看文件开头几个字节来猜编码，如果文件保存时带了 BOM（EF BB BF），但 <meta charset="UTF-8"> 又没放在 <head> 最开头，就极大概率 fallback 到系统默认编码（Windows 是 GBK，Linux/macOS 常是 ISO-8859-1），导致中文变 ÃÂ 或一堆问号。
- VS Code 底部状态栏显示 “UTF-8 with BOM” → 点击它 → 选
Save with Encoding→UTF-8（不带 BOM） - 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，就是 BOM - Sublime Text 或 Notepad++ 保存时务必选 “UTF-8”，不是 “UTF-8 with BOM” 或 “ANSI”
<meta charset> 必须紧贴 <head> 开头，且只能有一个
HTML 解析器只扫描前 1024 字节找 charset 声明，任何前置内容（空格、换行、注释、零宽字符、BOM）都会让它失效。哪怕只是 <head> 前多一个空行，<meta charset="UTF-8"> 就可能被忽略。
- 正确写法（无空行、无注释、无隐藏字符）：
<head> <meta charset="UTF-8"> <title>页面标题</title>
- 错误写法示例：
<head><!-- 注释 --><meta charset="UTF-8">、<head>\n<meta charset="UTF-8">、<head><meta charset="utf8">（小写utf8非标准） - 别写
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— HTML5 已不推荐，且容易和真实 HTTP 头冲突 - 确保整个 HTML 中只有一个
<meta charset>，重复会引发不可预测行为
检查浏览器 Network 面板中的 Response Headers
当页面通过 http:// 或 https:// 访问时，服务器返回的 Content-Type 响应头优先级高于 <meta charset>。如果它写着 charset=gbk 或压根没声明 charset，浏览器就会无视 HTML 里的 meta 标签。
- F12 → Network → 刷新 → 点击 HTML 请求 → 查看
Response Headers下的Content-Type - Nginx 配置要加：
add_header Content-Type "text/html; charset=utf-8";或全局charset utf-8; - Node.js/Express：在
res.send()前调用res.set("Content-Type", "text/html; charset=utf-8") - PHP：在输出 HTML 前调用
header("Content-Type: text/html; charset=utf-8");，且不能有任何输出（包括空格、BOM）在它之前 - 本地双击打开（
file://协议）时，HTTP 头完全无效，此时唯一靠的就是<meta charset>和文件实际编码
排查编辑器自动转码和 FTP 传输模式
有些编辑器（如旧版 Notepad++）在打开 GBK 文件后，即使你手动写了 <meta charset="UTF-8">，保存时仍按原编码（GBK）写入，导致文件本身仍是乱码字节 —— 浏览器再怎么读 meta 也救不回来。
立即学习“前端免费学习笔记（深入）”；
- VS Code 打开 HTML 后，右下角编码显示为
GBK或GB2312→ 点击它 →Reopen with Encoding→ 选GBK→ 再点右下角 →Save with Encoding→UTF-8 - FTP 上传时，必须用“二进制模式”（Binary），不能用“ASCII 模式”，否则会悄悄转换换行符甚至中文字符
- Git 用户注意：
.gitattributes中避免对*.html text这类设置，它可能触发 Git 的自动换行转换 - 如果页面里只有部分字段乱码（比如从数据库读出的内容），问题大概率不在 HTML 文件本身，而在后端接口或数据库连接层的编码设置
BOM 和 <meta charset> 位置是两个最常被忽略的硬性条件，只要其中任一不满足，其他所有配置都白搭。
