必须置于内且为首个编码声明标签,值严格小写、双引号、无空格;文件保存编码、http响应头与之三者须完全一致,否则仍会乱码。

meta charset 放错位置会导致乱码
浏览器解析 HTML 时,如果 <meta charset> 出现在 <title></title> 之后,或被 JavaScript、CSS 阻塞,就可能错过早期字节流的编码声明,直接按默认编码(如 ISO-8859-1)解码,导致中文变问号或方块。这不是“没写”,而是“写晚了”。
- 必须放在
内,且是中**第一个**有实际编码作用的标签(最好在<title></title>前) - 不能放在
里,也不能用 JS 动态插入——此时解析早已开始 - 如果用了 HTTP 头
Content-Type: text/html; charset=utf-8,<meta charset>仍需保留,因为部分离线场景或本地文件(file://)不走 HTTP 头
charset 值只能写 utf-8,别用 UTF-8 或 utf8
HTML 标准明确要求 charset 属性值**大小写敏感且只认 utf-8**。写成 UTF-8、utf8、UTF8 或 unicode,浏览器虽多数能容错识别,但属于非标准写法,W3C 验证会报错,某些老旧工具链(如某些构建插件或代理网关)可能直接忽略。
- 正确写法只有:
<meta charset="utf-8"> - 不要加空格、引号类型混用(单引号在某些模板引擎里可能出问题,统一用双引号)
- 不用写
utf-8bom或utf-8-no-bom——这些不是 charset 值,是文件保存选项
HTML 文件本身编码必须和 meta charset 一致
写了 <meta charset="utf-8"> 却用 GBK 编码保存 HTML 文件,浏览器会按 utf-8 解码一堆乱码字节,结果还是乱码。这是最常被忽略的“两层不匹配”问题。
- 编辑器保存文件时,务必选
UTF-8(不含 BOM 更稳妥,尤其对 PHP/Node.js 后端输出) - VS Code 默认是 UTF-8,但右下角编码显示可能被误点成 GBK;Sublime Text 新建文件默认不是 UTF-8,需手动设
- 用命令行检查:Linux/macOS 下运行
file -i your-page.html,看输出中的charset=是否为utf-8
服务端响应头优先级高于 meta charset
当服务器返回 HTTP 响应头 Content-Type: text/html; charset=gbk,哪怕 HTML 里写了 <meta charset="utf-8">,浏览器也以响应头为准。这时候改前端没用,得调后端或 Web 服务器配置。
立即学习“前端免费学习笔记(深入)”;
- Apache:在
.htaccess或虚拟主机配置中加AddDefaultCharset utf-8 - Nginx:在
server或location块中加charset utf-8; - Node.js(Express):
res.set('Content-Type', 'text/html; charset=utf-8') - PHP:在输出 HTML 前调用
header('Content-Type: text/html; charset=utf-8');











