HTML文件必须声明charset且优先用UTF-8，否则中文会乱码；<meta charset="UTF-8">须置于<head>第一行，且文件保存编码、HTTP响应头需与之严格一致。
HTML 文件必须声明 charset 且优先用 UTF-8
不声明或声明错误会导致中文显示为乱码（如 、□ 或一堆问号），尤其在 Chrome/Firefox 新标签页直接打开本地 index.html 时最明显。浏览器不会自动猜中文编码，它只按声明或默认（通常是 ISO-8859-1）解析。
正确做法是在 <head> 中**第一行**插入：
<meta charset="UTF-8">
必须放在所有其他 <meta>、<title>、<link> 之前——否则部分浏览器（如旧版 Safari）可能已开始解析内容，再声明就晚了。
- 不要写
charset=gbk或charset=gb2312：兼容性差，现代工具链（Webpack/Vite）、CDN、HTTP 服务默认都倾向UTF-8 - 不要用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">：冗余且不如charset属性可靠 - 如果用 VS Code 编辑，确认右下角显示“UTF-8”而非“GBK”，否则文件本身保存编码就不对
检查实际生效的字符集：看响应头和页面源码
即使写了 <meta charset="UTF-8">，也可能被 HTTP 响应头覆盖。比如用 python -m http.server 启动时，默认不发 Content-Type 头，此时 meta 生效；但 Nginx/Apache 或某些静态托管（如 GitHub Pages）可能强制返回 charset=ISO-8859-1，那就压倒 HTML 内声明。
- 打开浏览器开发者工具 → Network → 刷新 → 点
index.html→ 查看 Response Headers 中的Content-Type字段，例如：text/html; charset=UTF-8 - 如果响应头没带
charset，才轮到 HTML 里的<meta charset>起作用 - 如果响应头写了别的 charset（如
charset=GBK），哪怕 HTML 里写了 UTF-8 也没用
VS Code / 编辑器保存编码必须匹配 charset 声明
声明是 UTF-8，但文件实际以 GBK 保存，浏览器照样读错——字节流和解码规则对不上。
立即学习“前端免费学习笔记（深入）”；
- VS Code：右下角点击编码名称（如 “GBK”），选 “Save with Encoding” → “UTF-8”
- Sublime Text：File → Save with Encoding → UTF-8
- 记事本（Windows）：另存为 → 编码选 “UTF-8”（注意不是 “UTF-8-BOM”）
- 避免 BOM：带 BOM 的 UTF-8 可能在某些 JS/CSS 解析中引发意外（如
Unexpected token ''），<meta charset>本身不解决 BOM 问题
服务端部署时别漏掉 MIME 类型配置
纯静态 HTML 在本地双击打开没问题，但一旦走 HTTP 服务器，就必须确保服务器返回正确的 Content-Type 响应头。否则前端声明形同虚设。
- Nginx：在
server或location块中加charset utf-8; - Apache：在
.htaccess或虚拟主机配置中加AddDefaultCharset UTF-8 - Vercel/Netlify：默认支持 UTF-8，但若上传后中文仍乱码，先查文件是否真以 UTF-8 保存（BOM 是常见元凶）
真正卡住人的往往不是“怎么写”，而是三处不一致：文件保存编码、HTML 中 meta charset、HTTP 响应头。只要其中一环错，中文就不可靠。
