meta charset未生效的根本原因是编辑器显示编码、文件实际字节编码、浏览器解码三者不一致；需依次检查右下角编码显示、BOM存在性、HTTP响应头是否覆盖，且meta标签必须是head内首个非空白非注释标签并写为UTF-8（带短横）。
meta charset 标签没生效，基本就是编辑器保存编码、文件实际字节、浏览器解码三者不一致。先查右下角编码显示，再看文件开头有没有 BOM，最后确认 HTTP 响应头有没有覆盖。
VS Code 右下角显示 “GBK” 却写了 <meta charset="UTF-8">
这是最常见也最容易忽略的冲突点：编辑器显示的编码名只是“当前打开方式”，不代表文件真实保存格式。VS Code 默认用系统编码（Windows 是 GBK）打开无 BOM 的文件，即使你写了 <meta charset="UTF-8">，它读出来的字节仍是 GBK 编码的乱码流。
- 点击右下角编码名（如 “GBK”），选 “Save with Encoding” → “UTF-8”（**不是** “UTF-8 with BOM”）
- 保存后右下角应变为 “UTF-8”，且状态栏不带 “with BOM” 字样
- 如果之前是用记事本或旧版 Notepad++ 保存过，很可能残留 BOM；可用
head -c 4 index.html | xxd（Linux/macOS）或Get-Content index.html -Encoding Byte | Select -First 3（PowerShell）检查前 3 字节是否为ef bb bf
<meta charset> 放在 <title> 后面或有空格/注释在前
浏览器只扫描 <head> 开头的前 1024 字节找 charset，一旦开头有空格、BOM、HTML 注释 <!-- --> 或 JS 注入，<meta charset> 就会被跳过，直接 fallback 到系统默认编码（Windows 是 GBK）。
-
<meta charset="UTF-8">必须是<head>内第一个非空白、非注释的标签 - 删掉
<head>和<meta>之间的所有空格、换行、注释 - 避免写成
<meta charset="utf8">或<meta charset="UTF8">—— 浏览器只认标准值UTF-8（带短横） - 不要混用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，HTML5 已不推荐，且兼容性不如原生charset属性
本地用 file:// 打开正常，但部署到 Nginx/Express 后乱码
HTTP 响应头中的 Content-Type 优先级高于 <meta charset>。Nginx 默认不加 charset，但若配置了 charset gbk; 或 add_header Content-Type "text/html; charset=gbk";，就会强制覆盖 HTML 内声明。
立即学习“前端免费学习笔记（深入）”；
- 浏览器按 F12 → Network → 刷新 → 点 HTML 请求 → 查 Response Headers 中的
content-type - Nginx 配置里删掉
charset指令，或明确写charset utf-8;（注意分号） - Express 中用
res.set("Content-Type", "text/html; charset=utf-8")，且必须在res.send()之前调用 - PHP 中
header("Content-Type: text/html; charset=utf-8")前不能有任何输出（包括 BOM、空格、echo）
CSS/JS 文件里的中文也乱码，比如 content: "按钮" 显示为
CSS 和 JS 文件不继承 HTML 的 <meta charset>，它们各自独立解析。如果 CSS 文件本身是 GBK 编码，但浏览器按 UTF-8 解，就会把两个 GBK 字节当一个 UTF-8 字符处理，出现 符号。
- 用同款编辑器（如 VS Code）打开
style.css，确认右下角是 “UTF-8”，并用 “Save with Encoding” → “UTF-8” 重存 - 确保构建工具（Webpack/Vite）中 raw-loader 或 asset 模块未设
encoding: 'latin1'等错误参数 - Nginx 对静态资源默认不加
charset，但可手动加：add_header Content-Type "text/css; charset=utf-8";（CSS）或add_header Content-Type "application/javascript; charset=utf-8";（JS）
BOM 是静默杀手 —— 它不显示、不报错，但会让 <meta charset> 失效、让 PHP header() 报“headers already sent”、让 Node.js res.send() 混淆编码。每次改完编码，务必用命令行验证字节，而不是只信编辑器右下角。
