<meta charset="UTF-8">放错位置即失效，因浏览器仅扫描前1024字节查找该标签，若其前存在BOM、空格、注释或<script>等标签，便会跳过而回退至系统默认编码（如Windows的GBK），导致乱码；必须紧贴<head>开头、前面零字符，且仅“UTF-8”为标准写法。
为什么放错位置就失效
浏览器只扫描 HTML 文件开头 1024 字节来查找 <meta charset>，一旦前面有 BOM、空格、注释或 <script> 标签，就会跳过它，退回到系统默认编码（Windows 常为 GBK，Linux/macOS 常为 ISO-8859-1）。结果就是页面明明写了 UTF-8，却显示成 。
正确做法是：<meta charset="UTF-8"> 必须紧贴 <head> 开始标签之后，前面不能有任何字符（包括空行、注释、BOM）：
<head> <meta charset="UTF-8"> <title>中文标题</title>
- 不要写成
<meta charset="utf8">或<meta charset="UTF8">—— 只有"UTF-8"是标准写法 - 不要把它放在
<title>后面，更不能夹在<script>之间 - 避免用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— HTML5 已不推荐，且兼容性差
VS Code 里显示“UTF-8”不代表文件真是 UTF-8
VS Code 状态栏显示 “UTF-8”，只是编辑器当前**按 UTF-8 解码**该文件，并不表示文件磁盘上存储的就是 UTF-8 编码。尤其 Windows 下打开一个 GBK 编码的 HTML 文件，VS Code 默认用 UTF-8 解码，就会把中文全解成乱码，你再保存，等于把乱码内容以 UTF-8 写回磁盘 —— 错上加错。
验证和修复步骤：
立即学习“前端免费学习笔记（深入）”；
- 先点右下角编码名称 → 选
Reopen with Encoding→ 依次试GBK、ISO-8859-1，直到中文正常显示 - 确认后 → 点右下角编码名称 →
Save with Encoding→ 选UTF-8（注意：不是UTF-8 with BOM，BOM 会破坏<meta charset>的前置要求） - Linux/macOS 下用
file -i filename.html查真实编码；Windows PowerShell 用Get-Content filename.html -Encoding Byte | Select -First 3检查是否含ef bb bf
HTTP 响应头里的 charset 优先级高于 meta
当 HTML 通过 HTTP 服务访问（比如 http://localhost），浏览器会先看响应头里的 Content-Type，例如 Content-Type: text/html; charset=gbk。这时哪怕 <meta charset="UTF-8"> 写得再规范，也会被无视 —— 浏览器直接按 GBK 解码整个文档，UTF-8 字节流被错误解读，必然乱码。
常见服务端配置检查点：
- Nginx：确保没漏掉
charset utf-8;，且add_header Content-Type "text/html; charset=utf-8";不要和它冲突（后者会覆盖前者） - Node.js/Express：必须在
res.send()或res.sendFile()之前调用res.set('Content-Type', 'text/html; charset=utf-8') - PHP：
header('Content-Type: text/html; charset=utf-8');必须在任何输出（含空格、BOM、echo）之前执行 - 静态托管（GitHub Pages、Vercel）：默认发 UTF-8，但若上传了带 BOM 的文件，仍可能触发 fallback
外部 JS/CSS 文件也得统一 UTF-8
即使 HTML 主体没问题，加载的 <script src="app.js"> 或 <link rel="stylesheet" href="style.css"> 如果是 GBK 编码，其中的中文注释、字符串、CSS 中文类名照样乱码 —— 浏览器对每个资源单独解码，不会继承 HTML 的 charset 声明。
实操要点：
- 所有 .js、.css 文件也要用 UTF-8（无 BOM）保存，VS Code 打开后同样走
Reopen with Encoding→Save with Encoding流程 - 避免在 JS 中写
document.write("中文")这类依赖文档编码的动态插入，改用 DOM 操作 - Webpack/Vite 等构建工具默认输出 UTF-8，但若源文件编码混杂，需在 loader 配置中显式指定
encoding: 'utf8'
<meta charset> 失效。每次保存 HTML/JS/CSS 前，务必确认编辑器状态栏是 “UTF-8”，且没勾选 “with BOM”。 
