<meta charset="UTF-8">必须置于<head>最开头且前面不能有任何字符（含BOM、空格、注释、<script>），否则浏览器仅扫描前1024字节并中断，回退系统默认编码（如Windows的GBK）导致中文乱码。
<meta charset="UTF-8"> 必须放在 <head> 开头、任何其他标签（包括 <title>）之前，且文件本身必须是 UTF-8 编码（无 BOM 更稳妥）。这是唯一可靠、跨浏览器一致的起点。
为什么 <meta charset="UTF-8"> 放错位置就失效
浏览器解析 HTML 时，只扫描前 1024 字节来查找 <meta charset>。一旦遇到非 ASCII 字符（比如中文标题 <title>我的页面</title>）、BOM、注释或空行，就会中断扫描并 fallback 到系统默认编码（Windows 是 GBK，macOS/Linux 是 ISO-8859-1），直接导致乱码。
- 错误写法：
<head><title>我的页面</title><meta charset="UTF-8"></head>——<title>中文已触发 fallback - 错误写法：
<head><!-- 注释 --><meta charset="UTF-8"></head>—— 注释占用字节，可能挤出有效扫描范围 - 正确顺序：
<head><meta charset="UTF-8"><title>我的页面</title></head>，且前面不能有任何空格或换行
文件实际编码和 meta 值不一致会怎样
如果 HTML 文件物理上是 GBK 编码，但写了 <meta charset="UTF-8">，浏览器会强行用 UTF-8 解析 GBK 字节流，结果是每个中文变成两三个乱码符号（如 “й”）。反之，文件是 UTF-8 却写 charset="GBK"，也会解错。
- 验证文件真实编码：VS Code 右下角点击编码名 → 选 “Reopen with Encoding” 测试 GBK/UTF-8 显示效果；macOS/Linux 执行
file -i index.html；PowerShell 运行Get-Content index.html -Encoding Byte | Select -First 3查 BOM（239, 187, 191是 UTF-8 BOM） - 保存时务必选 “UTF-8”（不是 “UTF-8 with BOM”）——BOM 虽然在某些旧 IE 中有用，但会干扰
<meta charset>识别，且现代浏览器完全不需要 -
charset值必须严格写成"UTF-8"：大小写敏感，不能是"utf8"、"utf_8"或"Unicode"
HTTP 响应头比 meta 更优先，但别依赖它
服务器返回的 Content-Type: text/html; charset=UTF-8 会覆盖 <meta charset>，但本地双击打开 index.html 时没有 HTTP 头，此时全靠 meta。很多开发场景（比如 python -m http.server）默认不发 charset，Nginx/Apache 若没配也会 fallback 到 ISO-8859-1。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- Nginx 配置加一行：
charset utf-8;（注意小写，写在server或location块内） - Apache 在
.htaccess加：AddDefaultCharset UTF-8 - Express.js 设置响应头：
res.set('Content-Type', 'text/html; charset=UTF-8') - 调试方法：F12 → Network → 刷新 → 点 HTML 请求 → 查 Response Headers 中的
Content-Type字段
中文显示还乱？检查字体和 JS 字符串
<meta charset> 只管 HTML 文本解码，不解决渲染问题。如果页面中文字仍是方框或问号，重点排查：
- CSS 的
font-family是否包含中文字体，例如：body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; } - JS 里硬编码的字符串（如
console.log("你好")）是否被编辑器误存为 GBK —— 这会导致语法错误Invalid or unexpected token - 外部资源（CSS/JS）的
Content-Type响应头是否也声明了charset=UTF-8，否则其中的中文注释或字符串也可能解错
最易被忽略的是：HTML 文件开头那几字节的“洁净度”。哪怕一个看不见的 BOM、一个空格、一行注释，都足以让整个字符集设置失效。不要假设编辑器“自动处理好了”，每次保存后手动确认编码和开头结构。
