<meta charset>必须位于HTML文档前1024字节内，否则浏览器将按默认编码解析导致乱码；应紧接<!DOCTYPE html>和<html>之后置于<head>最顶部，避免BOM、注释或空格前置。
meta charset 必须在 head 前 1024 字节内
浏览器解析 HTML 时，会先扫描文档开头约前 1024 字节（具体值因浏览器略有差异），寻找 <meta charset> 声明。如果没在这段范围内找到，就会按默认编码（通常是 ISO-8859-1 或系统 locale）解码后续内容，导致中文乱码、标签解析错位甚至脚本执行异常。
这不是“推荐放 head 里”，而是硬性限制：即使你写了 <meta charset="UTF-8">，只要它出现在第 1025 字节之后，多数浏览器就直接忽略。
- 最佳实践是把它放在
<head>的**最顶部**，紧接在<!DOCTYPE html>和<html>之后 - 避免在它前面插入注释、空格、BOM 或其他 meta 标签（比如 SEO 描述或 viewport）
- 不要依赖 HTTP 响应头的
Content-Type来覆盖缺失或延迟的<meta charset>—— 实际加载中，HTML 内声明优先级更高且更早生效
为什么不能放在 body 里或 head 尾部
<meta charset> 不是普通元数据，它是解码器启动前的“指令”。浏览器不会等到 DOM 构建完成再去读它，更不会回溯解析。一旦开始按错误编码读取，后续所有文本（包括 JS 字符串、CSS 注释、属性值）都已损坏，无法挽回。
常见误操作：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 把
<meta charset="UTF-8">放在<title>或<link>后面 → 可能超出 1024 字节边界 - 用构建工具自动注入 meta 标签到 head 底部 → 位置不可控，尤其当有大量 inline script 或模板变量时
- 在 PHP/JS 模板中动态拼接 head，导致 BOM 或空白字符前置 → 实际字节数超标
验证是否生效的简单方法
打开开发者工具 → 切换到 Network 面板 → 找到 HTML 请求 → 查看 Response Headers 中的 Content-Type，同时右键页面 → “查看页面信息”（Firefox）或检查 Elements 面板顶部的编码显示（Chrome）。两者都显示 UTF-8 不代表安全 —— 关键是看浏览器实际解码行为。
更可靠的方式：
- 用
curl -s http://yoursite.com | head -c 1200 | hexdump -C确认<meta charset="UTF-8">出现在前 1024 字节内 - 在 HTML 开头故意插入非 ASCII 字符（如中文标题），观察是否乱码；若乱码，说明 charset 未及时生效
- 避免使用编辑器自动添加的 UTF-8 with BOM —— 它会在文件开头塞入 3 字节
EF BB BF，挤占有效空间
服务端响应头和 meta charset 冲突怎么办
如果 HTTP 响应头中 Content-Type: text/html; charset=GBK，但 HTML 里写了 <meta charset="UTF-8">，浏览器以 HTML 内声明为准。但问题在于：响应头的错误编码可能已在 TCP 层影响初始字节流解析，尤其在代理或 CDN 缓存场景下。
所以必须双保险：
- 服务端确保响应头也设为
Content-Type: text/html; charset=UTF-8 - HTML 文档内仍保留
<meta charset="UTF-8">，且位置合规 - 静态资源（如 .js、.css）也要单独设置对应响应头，它们不读取 HTML meta
真正容易被忽略的是：某些老旧 CMS 或代理会强制覆写响应头，而开发者只盯着 HTML 源码改，结果线上依然乱码。
