必须置于开头、任何其他标签（含和注释）之前，且文件须为utf-8编码（bom可选但需一致），否则浏览器仅扫描前1024字节失败即回退系统默认编码（如windows的gbk），引发中文乱码、emoji显示方块、js报invalid or unexpected token错误。
meta charset 必须写在 开头、任何其他标签（包括 <title></title> 和注释）之前，且文件本身必须是 UTF-8 编码（无 BOM 或带 BOM 都可，但需与声明一致），否则浏览器可能 fallback 到系统默认编码（如 Windows 上的 GBK），直接导致中文乱码、emoji 显示为方块、JS 报 Uncaught SyntaxError: Invalid or unexpected token。
为什么 meta charset="UTF-8" 放错位置就失效
浏览器解析 HTML 时，只扫描前 1024 字节寻找 meta charset 声明。一旦遇到非 ASCII 字符（比如中文标题、emoji、注释里的汉字），而文件又不是 UTF-8 编码，就会提前中断识别或误判。
-
<title>你好</title> <meta charset="UTF-8">—— 失效：中文你好出现在meta前，浏览器按默认编码（如 GBK）读取，你好的字节流被当乱码处理，后续meta可能根本没被识别 -
<!-- 测试 --><meta charset="UTF-8">—— 失效：注释含非 ASCII 字符，同样干扰前 1024 字节扫描 -
<meta charset="UTF-8"> <title>你好</title>—— 有效：纯 ASCII 的meta标签最先出现，被正确提取
如何验证 HTML 文件实际编码是否为 UTF-8
编辑器显示“UTF-8”不等于文件真是 UTF-8；VS Code 默认保存为 UTF-8（无 BOM），但 Notepad++ 或旧版 Sublime 可能默认存为 ANSI/GBK。
- macOS/Linux 终端：
file -i index.html查 MIME 类型和编码；或head -c 4 index.html | xxd看前 4 字节 —— 若输出含ef bb bf，说明有 BOM - Windows PowerShell：
Get-Content index.html -Encoding Byte | Select -First 3—— 输出239, 187, 191即 BOM - VS Code：右下角点击编码名称 → 选
Reopen with Encoding尝试 GBK，若中文正常显示，说明原文件实为 GBK；再用Save with Encoding→UTF-8转存
charset 的值大小写和拼写必须严格
规范要求 charset 属性值对大小写不敏感，但实际中部分老旧环境或工具链（如某些 Webpack 插件、IE 兼容模式）会因拼写错误直接忽略该标签。
- ✅ 正确：
charset="UTF-8"（推荐，IANA 注册标准名） - ❌ 错误：
charset="utf8"（缺短横线，RFC 不认可）、charset="UTF8"（缺短横线）、charset="utf-8"（小写虽常被兼容，但非标准） - ⚠️ 已淘汰：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— HTML5 中完全可用，但冗余，且某些构建工具会重复注入，引发冲突
HTTP 响应头 Content-Type 优先级高于 meta charset
当页面部署到服务器（非 file:// 协议），Web 服务器返回的 HTTP 响应头中 Content-Type: text/html; charset=GBK 会直接覆盖 HTML 内的 meta charset="UTF-8"，导致乱码——此时改 HTML 没用。
- Apache：
.htaccess中加AddDefaultCharset UTF-8或Header set Content-Type "text/html; charset=UTF-8" - Nginx：
server或location块中加charset utf-8;（注意小写） - 验证方式：F12 → Network → 刷新 HTML 请求 → Headers → Response Headers → 查看
Content-Type值
真正容易被忽略的是三者同步：HTML 文件磁盘编码、meta charset 声明、HTTP 响应头中的 charset。任一脱节，都可能在某个环节触发 fallback，而这个 fallback 行为在不同浏览器、不同系统上还不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
