meta charset的作用是让浏览器在解析HTML时立刻知道用哪种字符编码读取文件内容，必须置于<head>最前面（前1024字节内、无BOM/注释/空格）、值为UTF-8、文件实际编码一致且HTTP响应头不冲突，否则将 fallback 至系统默认编码导致乱码。
meta charset 的作用是**让浏览器在解析 HTML 时，立刻知道该用哪种字符编码读取文件内容**。它不是可选的“美化标签”，而是防止中文乱码的第一道防线——如果缺失、写错位置或与文件实际编码不一致，浏览器大概率会按系统默认编码（比如 Windows 下的 GBK）去解码 UTF-8 文件，结果就是一堆 或方块字。
为什么必须放在 <head> 最前面？
浏览器在开始解析 HTML 的前 1024 字节内就会查找 meta charset 声明。一旦错过这个窗口，它就已按默认编码开始解码，后续再声明也无效。
-
<meta charset="UTF-8">必须是<head>中第一个非空白、非注释的子元素 - 前面不能有空格、换行、
<!-- 注释 -->、BOM 字节（ef bb bf）等任何字符 - 不能写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 这种写法在 HTML5 中已过时，且优先级低于charset属性
charset 的值写错会怎样？
浏览器对 charset 值大小写不敏感，但只认标准注册名。常见错误包括：
- 写成
utf8、UTF8、utf-8—— 正确写法只有UTF-8（IANA 注册名，推荐全大写） - 写成
GB2312或GBK—— 现代项目基本不用，除非明确兼容老旧系统 - 漏掉引号：
<meta charset=UTF-8>是无效语法，必须带引号
文件编码和 meta charset 必须严格一致
声明只是“告诉浏览器怎么读”，不代表文件真的按那个编码存。两者不匹配，照样乱码。
立即学习“前端免费学习笔记（深入）”；
- 用 VS Code 打开文件，右下角看编码显示 —— 若是
UTF-8 with BOM或GBK，点击后选 “Save with Encoding” →UTF-8（注意排除with BOM） - 用命令行验证：
head -c 4 yourfile.html | xxd，输出含ef bb bf就说明有 BOM，需清除 - 服务器返回的 HTTP
Content-Type头（如text/html; charset=gbk）优先级高于meta charset，若冲突，以响应头为准
真正起效的 meta charset 不是写出来就行，它依赖位置、拼写、文件编码、HTTP 响应头四者全部对齐。其中任意一环出问题，乱码就藏在加载完成前的那几百毫秒里，很难复现，却极难排查。
