必须是内第一个标签，因浏览器在解析前512–1024字节时需确定编码，延迟声明会导致中文、emoji等乱码且不可逆；HTTP响应头中Content-Type的charset优先级更高，须同步配置。
<meta charset="UTF-8"> 必须是 内第一个标签（紧随 开始标签之后），这是 HTML5 规范明确要求的硬性顺序。
它不能放在 <title></title>、<script></script>、<link>、<meta name="viewport"> 或任何其他 <meta> 标签之后，也不能被注释、空行或内联脚本打断。
为什么必须放最前面？
浏览器解析 HTML 时，会在读取前 1024 字节（部分引擎为 512 字节） 就尝试确定字符编码。如果此时还没遇到 <meta charset>，就会按默认编码（如 ISO-8859-1 或系统本地编码如 GBK）解码后续内容——一旦中文、emoji 或特殊符号被错误解码，后续即使再声明 UTF-8 也无法挽回，页面会直接乱码或 DOM 解析异常。
正确的 head 内部顺序示例
<head> <meta charset="UTF-8"> <title>我的网页</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="这是一个UTF-8编码的HTML5页面"> <link rel="stylesheet" href="style.css"> <script src="script.js" defer></script> </head>
✅ 合规要点：
立即学习“前端免费学习笔记（深入）”；
-
<meta charset="UTF-8">是下首个子元素 - 它前面只有
开始标签，没有空格、换行、注释或 script - 不写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（冗余且兼容性不如前者） - 不加斜杠闭合（即不用
<meta charset="UTF-8">），HTML5 中自闭合写法非必需，也无实际影响，但标准写法不带/
常见错误顺序（会导致潜在乱码）
<head>
<!-- 页面描述 -->
<meta name="description" content="..."> ❌ 注释在前，可能挤出 charset 到 1024 字节外
<title>标题</title> ❌ title 在前，charset 晚到，已错过解析窗口
<script>document.write('')</script> ❌ 脚本执行前就需正确解码，此时编码未定
<meta charset="UTF-8"> ❌ 太晚，无效
</head>补充：HTTP 响应头优先级更高
若服务器返回的 HTTP 响应头中包含：
Content-Type: text/html; charset=GBK
那么即使 <meta charset="UTF-8"> 写得再规范，浏览器也会优先采用响应头中的 GBK，导致乱码。
所以最终验证方式是：
- 打开开发者工具 → Network → 刷新 → 点开 HTML 请求 → 查看 Response Headers 中的
Content-Type - 确保其值为
text/html; charset=utf-8（注意大小写不敏感，但utf-8推荐小写）
服务端配置示例：
- Nginx：
charset utf-8; - Apache：
AddDefaultCharset UTF-8 - PHP：
header('Content-Type: text/html; charset=utf-8');
不复杂但容易忽略
