浏览器按HTTP响应头>meta charset>BOM>默认编码优先级识别HTML5字符编码；仅写<meta charset="UTF-8">不够，因服务器Content-Type响应头优先级更高，若为GBK则强制按GBK解码导致乱码。
为什么只写 <meta charset="UTF-8"> 常常不够
因为浏览器解析 HTML 时，会按优先级顺序决定用什么编码读取字节：HTTP 响应头的 Content-Type > BOM > <meta charset>。如果服务器返回 Content-Type: text/html; charset=GBK，哪怕你写了 <meta charset="UTF-8">，浏览器也直接按 GBK 解码——后续所有 UTF-8 字节都会错乱，连 <title> 都可能显示为方块。
如何验证当前页面实际使用的编码
打开 DevTools → Network → 刷新页面 → 点击 HTML 请求 → 查看 Response Headers 中的 Content-Type 字段值；再切换到 Console，执行：document.characterSet 和 document.inputEncoding，两个都应返回 "UTF-8" 才算真正生效。
若 Content-Type 没带 charset，或两个 JS 属性返回 "GBK"、"ISO-8859-1" 等，说明编码链已断裂。
三个必须同步的位置：文件、HTTP 头、meta 标签
- HTML 文件本身必须以 UTF-8（含 BOM 或不含 BOM 均可，但 VS Code 默认无 BOM，IE 旧版对无 BOM 的 UTF-8 识别不稳定，建议保存为
UTF-8 with BOM） - Web 服务器需配置响应头：Nginx 加
charset utf-8;（在server或location块内）；Apache 用AddDefaultCharset UTF-8或Header set Content-Type "text/html; charset=UTF-8" -
<meta charset="UTF-8">必须出现在<head>内最靠前位置，且严格写成UTF-8（不能是utf8、UTF8、utf-8），前面不能有任何字符（包括空格、注释、BOM 之外的不可见符）
容易被忽略的“隐性污染源”
CSS 和 JS 文件如果本身不是 UTF-8 编码，即使 HTML 正确，也会导致样式错乱或脚本报错：Uncaught SyntaxError: Invalid or unexpected token 很可能就是 JS 文件存成了 GBK 却被当 UTF-8 读取。
检查方式：用 VS Code 或 Notepad++ 打开这些文件，确认右下角显示“UTF-8”；若显示“GBK”或“ANSI”，务必另存为 UTF-8（BOM 更稳妥）。
另外，PHP/Node.js 等后端拼接 HTML 时，若 PHP 文件自身是 GBK 编码，echo "<meta charset=\"UTF-8\">" 输出的其实是 GBK 字节流，浏览器收到的是乱码字节，<meta> 标签直接失效。
