浏览器按HTTP响应头＞meta charset＞BOM＞默认编码的优先级识别HTML5字符编码；meta charset必须位于head内首个可执行标记且文件实际编码需与声明一致。

浏览器怎么识别 HTML5 的字符编码

浏览器在解析 HTML 文档时，**不依赖文件后缀或编辑器保存编码**，而是按固定优先级顺序探测 charset：HTTP Content-Type 响应头 > <meta charset> 标签 > BOM > 默认（通常是 UTF-8 或系统 locale）。只要前一步能明确识别，后续就不再尝试。

<meta charset> 必须放在 最前面

这个标签必须是 中**第一个可执行的标记**（不能被注释、<script></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 推荐写法，也避免某些老旧工具（如部分静态分析器）误判。

Web Accessibility (WCAG 2 AA))

将 WCAG 2 AA 无障碍标准应用于设计系统、UI 组件和网页——通过可运行的验证器进行对比度计算，采用设计 token 模式使颜色天生可访问，设定排版和焦点状态规则，并提供语义检查清单。适用于构建或审查 UI。

下载

• 所有主流浏览器都支持 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

实际编码问题往往卡在「声明」和「物理存储」的错位上，而不是标签语法本身。