HTML乱码主因是文件非UTF-8无BOM编码却声明，需用VS Code等编辑器保存为UTF-8无BOM，并确保该标签位于最前1024字节内，同时HTTP响应头Content-Type charset=utf-8优先级更高，外部JS/CSS文件也须统一为UTF-8编码。
确认文件实际编码是否为 UTF-8（不带 BOM）
浏览器显示乱码，90% 是因为文件本身不是 UTF-8 编码，却写了 <meta charset="UTF-8">。记事本默认保存为 ANSI（中文 Windows 下即 GBK），VS Code 右下角显示 “GBK” 或 “GB2312” 就是铁证。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 VS Code 打开
index.html，右下角点击当前编码 → 选 Save with Encoding → 选UTF-8（不是UTF-8 with BOM） - Sublime Text：菜单
File → Save with Encoding → UTF-8 - 命令行验证：
file -i index.html应输出charset=utf-8；Windows PowerShell 可用Get-Content -Encoding UTF8 -Raw index.html | Out-Null测试能否无错读取 - 十六进制检查开头是否有 BOM：
head -c 3 index.html | xxd，若输出ef bb bf，说明带了 BOM，需删掉重存
必须放在 最前面且不超前 1024 字节
浏览器只扫描 HTML 前 1024 字节找 <meta charset>，如果它被注释、空格、<title></title> 或其他标签挡在后面，就直接 fallback 到系统默认编码（比如 GBK），中文立刻变 æç。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<meta charset="UTF-8">必须是内第一个标签（允许前面有空白或换行，但不能有其他标签） - 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 这是 HTML4 写法，虽兼容但冗余，且容易因引号/空格出错 - 禁止把
<meta charset>放到里，或插在<script></script>后面 - 如果用了模板引擎（如 EJS），确保生成的 HTML 中该标签未被动态覆盖或遗漏
HTTP 响应头 Content-Type 与 meta 标签冲突时以响应头为准
本地双击打开 index.html 时走 file:// 协议，浏览器只看 <meta charset>；但一旦用 Nginx/Apache/Express 提供服务，HTTP 响应头里的 Content-Type 优先级更高。Nginx 默认不带 charset，可能返回 text/html，浏览器就按旧规则猜编码。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Nginx 配置中，在
location /块内加：charset utf-8;（注意是小写utf-8，不是UTF-8） - Express 中，
res.sendFile()前加：res.set('Content-Type', 'text/html; charset=utf-8') - Apache 可在
.htaccess加：AddDefaultCharset UTF-8 - 用
curl -I http://localhost/index.html确认响应头含Content-Type: text/html; charset=utf-8
外部 JS/CSS 文件也要统一为 UTF-8 编码
即使 index.html 没问题，如果引用的 app.js 或 style.css 是 GBK 编码，浏览器解析时仍会出错——特别是 JS 里含中文字符串、CSS 里含中文注释或字体名时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 VS Code 打开每个
.js和.css文件，右下角确认并保存为UTF-8 - 不要依赖
<script charset="UTF-8"></script>属性——现代浏览器忽略它，且 HTML5 已废弃该用法 - Node.js 读取静态文件时，确保
fs.readFileSync(path, 'utf8')显式指定编码 - 若用 Webpack/Vite，检查
resolve.alias或server.headers是否意外覆盖了编码逻辑
最常被忽略的是：改完 <meta charset> 后没清浏览器缓存，或者用记事本另存为时选错了编码下拉框——它默认不显示“UTF-8”，而是叫“ANSI”或“Unicode”。
