根本原因是HTML文件实际编码与声明不一致，如文件为UTF-8但未声明或声明位置错误（须在最前），或声明与真实编码（如GBK）冲突。
为什么浏览器会把中文显示成乱码
根本原因是 HTML 文件保存时的编码格式和 <meta charset> 声明不一致。比如文件实际是 UTF-8 编码（推荐），但没写 <meta charset="UTF-8">，或者写了却放在了 <title></title> 后面——浏览器可能已按默认编码（如 ISO-8859-1）开始解析，此时再声明就晚了。
关键点：<meta charset> 必须是 中**第一个**有字符编码含义的标签，且最好在 <title></title> 之前。
charset 属性必须写在 meta 标签里吗
不是必须，但最可靠的方式就是用 <meta charset="UTF-8">。HTML5 明确支持这种简写形式，等价于老式的 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，但后者更冗长、易出错（比如漏写 http-equiv 或拼错 content 值）。
其他方式存在但不推荐：
立即学习“前端免费学习笔记（深入）”；
- HTTP 响应头
Content-Type: text/html; charset=UTF-8—— 有效，但依赖服务器配置，本地双击打开 HTML 文件时无效 - XML 声明
<?xml version="1.0" encoding="UTF-8"?>—— 只对 XHTML 有效，普通 HTML5 不认
UTF-8 和 GBK 该选哪个
绝大多数情况选 UTF-8。它能覆盖全球所有常用字符，兼容性好，现代编辑器和浏览器默认都用它。GBK 仅支持中文及部分东亚字符，且只在 Windows 旧系统或极少数遗留项目中出现。
选择依据：
- 新建项目、个人练习、静态页面 → 无条件用
UTF-8 - 接手老项目看到
GBK→ 先确认文件真实编码（用 VS Code 右下角编码提示判断），再统一改造成UTF-8，避免混用 - 如果强制写
GBK却保存为 UTF-8 文件 → 必然乱码，且浏览器不会自动纠错
VS Code 里保存为 UTF-8 却还是乱码
常见原因不是编码本身，而是保存时没勾选「带 BOM」或误选了「UTF-8（带签名）」——BOM 在 HTML 中非必需，反而可能导致某些旧环境解析异常。VS Code 默认「UTF-8」即无 BOM，这是正确选择。
检查与修正步骤：
- 右下角点击当前编码（如
UTF-8），选「Save with Encoding」→ 确认选的是UTF-8（不含“with BOM”字样） - 确保
<meta charset="UTF-8">在最开头，前面不能有空格、注释或其它 meta 标签 - 删掉所有
<meta http-equiv="Content-Type">类重复声明，只留一个<meta charset>
真正容易被忽略的是：即使代码完全正确，如果文件曾用 GBK 编码保存过，又直接改 charset 值而不重存，内容字节本身仍是 GBK 编码，浏览器按 UTF-8 解读自然出错。
