结论：仅写 <meta charset="UTF-8"> 不够，它必须出现在 <head> 开头、任何其他内容（包括注释、空格、<title>）之前，且 HTML 文件本身必须是 UTF-8 编码（无 BOM），同时 Web 服务器返回的 HTTP Content-Type 响应头也得带 charset=utf-8。三者缺一不可。
直接说结论：仅写 <meta charset="UTF-8"> 不够，它必须出现在 <head> 开头、任何其他内容（包括注释、空格、<title>）之前，且 HTML 文件本身必须是 UTF-8 编码（无 BOM），同时 Web 服务器返回的 HTTP Content-Type 响应头也得带 charset=utf-8。三者缺一不可。
为什么 <meta charset="UTF-8"> 放错位置就失效
浏览器只扫描 HTML 文件前 1024 字节来查找 charset 声明。如果开头有 BOM（ef bb bf）、空行、HTML 注释（<!-- -->）、<title> 或任意不可见字符，<meta charset> 就可能被跳过，浏览器 fallback 到系统默认编码（Windows 是 GBK，Linux/macOS 是 ISO-8859-1），立刻乱码。
常见错误顺序：
-
<head><title>我的页面</title><meta charset="UTF-8"></head>—— 失效 -
<head><!-- 设置编码 --><meta charset="UTF-8"></head>—— 失效 -
<head><meta charset="utf8"></head>—— 拼写错误，不被识别
正确写法只有一种：<head><meta charset="UTF-8"><title>我的页面</title></head>
如何验证 HTML 文件是否真为 UTF-8（无 BOM）
VS Code 显示“UTF-8”不代表就是无 BOM；它默认在 Windows 下保存带 BOM。BOM 会卡在 <meta charset> 前面，导致扫描失败。
验证和修复方法：
- macOS/Linux：运行
head -c 4 index.html | xxd，输出含ef bb bf就是有 BOM；用sed -i '1s/^\xef\xbb\xbf//' index.html删除 - Windows PowerShell：运行
Get-Content index.html -Encoding Byte | Select -First 3，若前三字节是239, 187, 191就是 BOM - VS Code：右下角点击编码名称 → “Save with Encoding” → 选
UTF-8（不是UTF-8 with BOM） - Sublime Text / Notepad++：菜单 → “Save with Encoding” → 选
UTF-8（明确不含 BOM）
HTTP 响应头 Content-Type 为什么比 <meta> 优先
当 HTTP 响应头里有 Content-Type: text/html; charset=GBK，哪怕你写了十遍 <meta charset="UTF-8">，浏览器也按 GBK 解析——因为 RFC 7231 规定响应头 > HTML meta。
检查与配置方式：
- 浏览器 F12 → Network → 刷新 → 点 HTML 请求 → Headers → Response Headers → 查
Content-Type - Nginx：在
server或location块中加charset utf-8;（注意小写，不能写UTF-8） - Apache：在
.htaccess或httpd.conf中加AddDefaultCharset UTF-8 - Node.js/Express：在
res.send()前加res.set('Content-Type', 'text/html; charset=utf-8')
本地双击打开（file:// 协议）时没有响应头，此时完全依赖 <meta charset> 和文件编码，更要严防 BOM 和位置错误。
外部 JS/CSS 文件也得统一 UTF-8
<meta charset> 只管 HTML 主文档。如果引入的 .js 或 .css 文件是 GBK 编码，浏览器仍会按 UTF-8 去读，JS 报 Uncaught SyntaxError: Invalid or unexpected token，CSS 注释或中文内容全变方块。
处理要点：
-
.js文件：确保保存为 UTF-8（无 BOM），不加@charset（JS 不支持） -
.css文件：保存为 UTF-8（无 BOM），开头可加@charset "UTF-8";（但非必需，现代浏览器默认按 HTML 的 charset 解析） - Vite/Webpack 等构建工具：确认模板 HTML 和静态资源都走同一套编码输出逻辑，避免模板编译后插入 BOM
最容易被忽略的是：改完 HTML 后忘了同步检查 main.js 和 style.css 的实际编码——它们乱码，整个页面照样挂。
