HTML中文乱码主因是文件实际编码与<meta charset="UTF-8">声明不一致，或BOM/空格/注释干扰导致浏览器无法识别该标签；须确保文件真实为UTF-8无BOM、<meta charset="UTF-8">紧贴<head>开头且位于前1024字节内。
HTML源码里中文显示为乱码，基本就是文件保存编码和声明不一致，或者BOM干扰了识别。
检查 HTML 文件实际保存编码
VS Code 显示“GBK”但写了 <meta charset="UTF-8">，说明文件根本不是 UTF-8。浏览器只认文件真实字节，不看你写了什么声明。
- 在 VS Code 中右下角点击当前编码（如
GBK或UTF-8 with BOM）→ 选Reopen with Encoding→ 手动选UTF-8（不是UTF-8 with BOM） - 再点右下角 →
Save with Encoding→ 选UTF-8（确认无 BOM） - Sublime Text：菜单
File → Save with Encoding → UTF-8 - Notepad++：菜单
编码 → 转为 UTF-8 编码（不是“UTF-8-BOM”）
验证文件是否含 BOM 并清理
BOM（EF BB BF）会卡在 <meta charset> 前面，导致浏览器跳过它，回落到系统默认编码（比如 Windows 的 GBK）去解码，结果就是“鐢ㄦ埛”“éüá”这类。
- Linux/macOS：
head -c 4 index.html | xxd，输出含ef bb bf就有 BOM - Windows PowerShell：
Get-Content index.html -Encoding Byte | Select -First 3，若输出239 187 191就是 BOM - 删 BOM：用 VS Code 以 UTF-8 重新保存；或用命令行
sed -i '1s/^\xEF\xBB\xBF//' index.html（Linux/macOS）
确认 <meta charset> 位置与写法
浏览器只扫描 HTML 前 1024 字节找 <meta charset>，且必须在 <head> 开头、无任何前置内容（空格、换行、注释、BOM 都不行）。
立即学习“前端免费学习笔记（深入）”；
- 必须写成
<meta charset="UTF-8">，不能是<meta charset="utf8">或<meta charset="UTF8"> - 必须紧贴
<head>开始：第一行是<head>，第二行就是<meta charset="UTF-8">，中间不能有空行或<!-- 注释 --> - 不要混用：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">是 HTML4 写法，HTML5 不推荐，且和<meta charset>同时存在可能引发冲突
本地打开（file://）时没 HTTP 头，全靠 <meta> 生效
用双击或 python -m http.server 启服务，前者走 file 协议，后者走 HTTP 协议——但默认都不发 Content-Type 头，所以 <meta charset> 是唯一救命稻草。
- 确保开发时用 Live Server 插件或
http-server启服务，避免双击直接打开 - 如果用了 Node.js/Express，
res.sendFile()默认不设 charset，必须手动加：res.set("Content-Type", "text/html; charset=utf-8") - Nginx 配置里别只写
add_header Content-Type "text/html; charset=utf-8"（重复 header），改用charset utf-8;
真正容易被忽略的是：**BOM 和 <meta> 之间的“零宽度”干扰——一个看不见的换行、一个编辑器自动插入的注释、甚至 IDE 的文件模板自带空格，都会让声明失效。** 解决时先砍掉所有前置字符，再验证编码，比反复改 charset 值更有效。
