浏览器按HTTP响应头＞meta charset＞BOM＞默认编码的优先级识别HTML5字符编码；meta charset必须位于head内首个可执行标记且文件实际编码需与声明一致。
浏览器怎么识别 HTML5 的字符编码
浏览器在解析 HTML 文档时，**不依赖文件后缀或编辑器保存编码**，而是按固定优先级顺序探测 charset：HTTP Content-Type 响应头 > <meta charset> 标签 > BOM > 默认（通常是 UTF-8 或系统 locale）。只要前一步能明确识别，后续就不再尝试。
<meta charset> 必须放在 <head> 最前面
这个标签必须是 <head> 中**第一个可执行的标记**（不能被注释、<script> 或空格前置干扰），否则可能被忽略。浏览器在解析到它之前已开始按默认编码读取内容，乱码就已发生。
- ✅ 正确：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
- ❌ 错误：
<head> <!-- 注释 --> <meta charset="UTF-8">
（部分旧版 IE 可能失效） - ❌ 错误：
<head> <script>console.log('hi');</script> <meta charset="UTF-8">（脚本先执行，编码未生效）
charset 值大小写不敏感，但推荐用大写缩写
UTF-8、utf-8、Utf-8 都合法，但建议统一用 UTF-8 —— 这是 W3C 推荐写法，也避免某些老旧工具（如部分静态分析器）误判。
- 所有主流浏览器都支持
UTF-8、GBK、ISO-8859-1等常见值 -
charset="GB2312"在中文环境仍可用，但GBK或UTF-8更稳妥（兼容更多汉字） - 不要写
charset="utf8"（缺横线）——虽多数浏览器容错，但不符合标准，UTF-8才是正确名称
为什么加了 <meta charset> 还是乱码
最常见原因不是标签写错了，而是**文件实际保存编码与声明不一致**。比如声明了 UTF-8，但用记事本以 ANSI（即本地 GBK）保存，浏览器按 UTF-8 解码字节，必然乱码。
立即学习“前端免费学习笔记（深入）”；
- 用 VS Code / Sublime / WebStorm 打开文件，右下角看当前编码显示，点击切换并「Save with Encoding」
- 终端可用
file -i filename.html（Linux/macOS）或Get-Content -Encoding Byte filename.html | Select -First 3（PowerShell）检查 BOM 和字节流 - 如果服务器返回了
Content-Type: text/html; charset=ISO-8859-1，<meta>会被完全忽略 —— 此时要改服务器配置或 .htaccess
实际编码问题往往卡在「声明」和「物理存储」的错位上，而不是标签语法本身。
