<meta charset="UTF-8">必须紧贴<head>开头、<title>之前，因浏览器仅扫描前1024字节查找该标签；遇BOM、注释、空格或中文<title>即停止解析，fallback至GBK等默认编码，导致中文、emoji及JS字符串乱码或报错。
meta charset 必须写成 <meta charset="UTF-8">，且必须放在 <head> 开头、<title> 之前，否则浏览器可能无法识别——尤其在 Windows 系统下 fallback 到 GBK，中文、emoji、JS 字符串都会出错。
为什么 meta charset 要紧贴 <head> 开头？
浏览器解析 HTML 时只扫描前 1024 字节寻找 meta charset；一旦遇到非 ASCII 字符（比如中文 <title>你好</title>、BOM、注释或 <script>），就会停止查找，转而用系统默认编码（Windows 是 GBK，macOS/Linux 是 ISO-8859-1）解码后续内容。
-
<head><meta charset="UTF-8"><title>首页</title></head>✅ 有效 -
<head><title>首页</title><meta charset="UTF-8"></head>❌ 失效（<title>已含中文，超前 1024 字节范围） -
<head><!-- 注释 --><meta charset="UTF-8"></head>❌ 注释内容也算字节，可能挤出有效位置
charset 的值哪些写法合法？
HTML5 规范只正式认可 "UTF-8"（全大写 U/T/F/-/8，带连字符，末尾是数字 8）；其他写法虽常被现代浏览器容忍，但存在兼容风险：
-
charset="UTF-8"✅ 推荐，W3C 验证通过，CI 工具（如html-validate）不报警 -
charset="utf-8"⚠️ Chrome/Firefox 可识别，但 W3C 验证警告，某些 CI 流水线会报错 -
charset="UTF8"❌ 缺连字符，IANA 未注册，Android WebView 可能 fallback 到 GBK -
charset="utf8"❌ 同上，且小写 + 缺连字符，问题叠加 -
charset=UTF-8✅ 合法（省略引号），但易被编辑器误删空格或改格式，建议统一加双引号
文件实际编码和 meta charset 不一致会怎样？
这是最隐蔽也最常见的乱码根源：标签写了 UTF-8，但文件本身是 GBK 编码保存的。结果是浏览器按 UTF-8 解码 GBK 字节流，产生“”或 JS 报 Uncaught SyntaxError: Invalid or unexpected token。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- VS Code 中右下角点击编码名称 → 选 “Reopen with Encoding” → 试 GBK，若中文正常显示，说明原文件是 GBK
- 确认后 → “Save with Encoding” → 选
UTF-8（**不要选 “UTF-8 with BOM”**，BOM 可能干扰某些 WebView 或构建工具） - Linux/macOS 终端验证：
file -i index.html看 MIME 类型，head -c 3 index.html | xxd看是否含ef bb bf - Windows PowerShell：
Get-Content index.html -Encoding Byte | Select -First 3，输出239, 187, 191即为 BOM
HTTP 响应头里的 Content-Type 和 meta charset 冲突怎么办？
HTTP 响应头优先级高于 meta 标签。如果服务器返回 Content-Type: text/html; charset=GBK，哪怕你写了 <meta charset="UTF-8">，浏览器仍按 GBK 解析。
- 本地开发用
file://协议时，无 HTTP 头，完全依赖meta和文件实际编码 - 部署到服务器后，用 Chrome DevTools 的 Network → Headers 查看响应头中的
Content-Type - Apache 用户可在
.htaccess加：AddDefaultCharset UTF-8；Nginx 用户在配置中加：charset utf-8; - Webpack +
html-webpack-plugin默认注入meta charset，但若你手动加了http-equiv版本，可能重复或冲突，建议删掉旧写法
真正卡住人的从来不是“怎么写”，而是“文件存的是什么编码”和“浏览器到底按什么解码”——这两者必须严丝合缝，meta charset 才不是摆设。
