前端Wiki/词条/字符编码 charset

字符编码 charset

定义告诉浏览器用什么编码规则解析字节流，配错了满屏乱码

计算机只存数字，编码规则负责把字节翻译成文字。GBK 是中文老规范，UTF-8 是覆盖全球所有文字的通用方案，现代页面一律用 UTF-8。声明方式是在 head 最前面写 meta charset=UTF-8，必须在文字出现之前——文档流是边收边解析的，读到声明点为止的所有字节都按默认编码猜过一遍，放晚了猜错就成乱码。

文件真实编码与声明必须一致，这是乱码问题的总根源：文件存成 GBK 却声明 UTF-8，浏览器按声明去读必然乱码，切换浏览器编码只是治标。另一个坑是引用的 JS/CSS 文件本身编码与页面不一致，此时给 script 或 link 单独加 charset 属性，或者更推荐统一整个工作流都存 UTF-8。数据库、接口、文件三条线编码对齐，乱码才能彻底绝迹。

统一 UTF-8，meta charset 写在 head 最前
文件真实编码必须与声明一致，否则必乱码
外部 JS/CSS 编码不一致时单独加 charset 属性

HTML

<style>
  .enc { border: 1px solid #4a9eff; border-radius: 8px; padding: 12px;
         font-family: Consolas, monospace; font-size: 13px; }
  .wrong { color: #e74c3c; }
  .right { color: #2ecc71; }
</style>
<div class="enc">
  <p class="right">正确声明（写在 head 第一个标签）：</p>
  <p>&lt;meta charset="UTF-8"&gt;</p>
  <p class="wrong">错误写法（放在 title 之后）：</p>
  <p class="wrong">&lt;title&gt;中文标题&lt;/title&gt;<br>
  &lt;meta charset="UTF-8"&gt;  ← 前面的中文已按错误编码解析</p>
</div>
<p>文件另存为时也要选 UTF-8，编辑器与声明保持一致。</p>

⚠ 常见误区

文件存成 ANSI 却声明 UTF-8，中文全部变成乱码
charset 写在 title 后面，声明前的文字按默认编码猜错
引用的外部 JS 是别的编码，执行时字符串变成火星文

🔗 相关词条字符实体编码风格