<meta charset="UTF-8">必须置于<head>最开头且前面不能有任何字符（包括BOM、注释、空格），否则浏览器扫描前1024字节失败，将fallback至系统默认编码（Windows为GBK，Linux/macOS为ISO-8859-1）导致乱码；文件须保存为UTF-8 without BOM，HTTP响应头Content-Type中charset设置优先级高于meta标签。
meta charset 必须放在 开头，且前面不能有任何字符
HTML 解析器只扫描文件开头 1024 字节找 <meta charset>，一旦前面有 BOM、注释、空格、<script> 或其他内容，就直接跳过，退回到系统默认编码（Windows 是 GBK，Linux/macOS 是 ISO-8859-1），立刻乱码。
常见错误包括：
-
<!DOCTYPE html>前加了注释或空行 -
<head>和<meta charset="UTF-8">之间写了<!-- 注释 -->或换行符 - 用 VS Code 打开一个 GBK 编码的 HTML 文件，状态栏显示 “UTF-8”，但实际文件仍是 GBK —— 此时
<meta charset="UTF-8">无效，因为字节流本身不是 UTF-8
正确写法只有一种：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面标题</title>注意：
<meta charset="UTF-8"> 必须是 <head> 内第一个非空白节点，前面不能有任何字符（包括不可见的 BOM）。
保存 HTML 文件必须用 UTF-8 without BOM
VS Code 默认保存为 UTF-8 with BOM，而 BOM（EF BB BF）会卡在 <meta charset> 前面，导致解析失败。Sublime Text、WebStorm 等也需手动确认编码格式。
验证和修正方法：
立即学习“前端免费学习笔记（深入）”；
- macOS/Linux：运行
file -i your-file.html，输出含charset=utf-8才对；若显示charset=us-ascii或charset=unknown-8bit，大概率是 GBK 或带 BOM 的 UTF-8 - Windows PowerShell：运行
Get-Content your-file.html -Encoding Byte | Select -First 3，如果输出是239 187 191，说明有 BOM，必须去掉 - VS Code：右下角点击编码名称 → 选
Reopen with Encoding尝试 GBK/ISO-8859-1 看是否能正常显示中文；确认后点Save with Encoding→ 选UTF-8（**不带 BOM**）
HTTP 响应头 Content-Type 比 meta charset 更优先
当你用 localhost、Nginx、Apache 或 Express 启服务时，服务器发来的 HTTP 响应头里如果有 Content-Type: text/html; charset=gbk，哪怕 HTML 里写了 <meta charset="UTF-8">，浏览器也照着响应头执行 —— 直接把 UTF-8 字节当 GBK 解，满屏 。
检查与修复方式：
- Chrome DevTools → Network → 刷新页面 → 点 HTML 请求 → Headers → Response Headers → 查看
Content-Type值 - Nginx 配置需加
charset utf-8;（注意小写，不能写charset=UTF-8;） - Apache 配置需加
AddDefaultCharset UTF-8（不能写UTF8或utf-8） - Express 中用
res.set('Content-Type', 'text/html; charset=utf-8')（charset=utf-8小写，值不能是UTF-8） - 静态托管如 GitHub Pages、Vercel 默认发 UTF-8，但若你上传了带 BOM 的文件，仍会乱码
外部 JS/CSS/JSON 文件也必须是 UTF-8 without BOM
<script src="app.js"></script> 加载的 JS 文件如果存为 GBK，哪怕 HTML 正确，也会报 Uncaught SyntaxError: Invalid or unexpected token —— 特别是含中文注释、emoji 或变量名时。
关键点：
- 所有 .js、.css、.json 文件都得和 HTML 一样：UTF-8 without BOM
- 不要依赖
<script charset="UTF-8">，这个属性已废弃，多数现代浏览器忽略它 - JSON 接口返回时，后端必须设响应头
Content-Type: application/json; charset=utf-8，否则前端fetch()解析可能出错 - 表单提交用
<form accept-charset="UTF-8">没必要，现代浏览器默认 UTF-8，但后端接收时仍要显式调用request.setCharacterEncoding("UTF-8")（Java）或等效处理
最易被忽略的是：HTML 正确、服务器响应头正确、JS 文件却用 Notepad 默认保存为 ANSI（GBK），这种“局部编码不一致”比全盘错更难排查。
