html中文乱码主因是浏览器未读取到meta charset声明，根源在于文件实际编码错误、meta位置被干扰（如bom或前置注释）、http响应头覆盖声明；须用命令行验证真实编码、保存为无bom utf-8、确保meta为head内首个标签且值为"utf-8"、检查并修正服务器content-type头。
HTML 中文乱码不是“没写 meta charset”，而是“写了但浏览器根本没读到”——根源几乎全在三件事：文件实际编码不对、meta charset 位置被干扰、HTTP 响应头覆盖了声明。
确认文件真实编码，别信编辑器右下角显示
VS Code 右下角写着 “UTF-8”，不代表文件真是 UTF-8。Windows 下用记事本存过、邮件附件拖进来的 HTML，常被误标为 UTF-8，实则 GBK。
- 在 VS Code 中按
Ctrl+Shift+P→ 输入Reopen with Encoding→ 分别选GBK和UTF-8，看中文是否突然正常；能正常显示的那个才是真实编码 - Linux/macOS 终端执行：
file -i yourfile.html，若输出charset=gbk或charset=us-ascii（实为检测失败），就别信编辑器了 - Sublime Text：菜单
File → Reopen with Encoding → GB2312同理验证
保存为无 BOM 的 UTF-8，并验证开头三字节
BOM（EF BB BF）会占掉 HTML 开头三个字节，导致浏览器在扫描前 1024 字节找 meta charset 时偏移失效——哪怕后面紧跟着 <meta charset="UTF-8">，也可能被跳过。
- VS Code：
Ctrl+Shift+P→Save with Encoding→ 选UTF-8（注意不是UTF-8 with BOM） - Notepad++：菜单
编码 → 转为 UTF-8 无 BOM 格式 - 验证是否真去 BOM：
head -c 3 yourfile.html | xxd，输出不含ef bb bf才算成功
meta charset="UTF-8" 必须是
浏览器只在 开始后前 1024 字节内解析 charset 声明。前面哪怕一个空格、换行、HTML 注释 <!-- -->，都可能让声明失效，回退到 Windows 默认的 GBK 编码。
- 正确写法（开头即生效）：
<meta charset="UTF-8"><title>页面标题</title>
- 错误写法（带空格或注释）：
<p><!-- 页面编码声明 --> <meta charset="UTF-8"></p>
—— 这种会被跳过 - 不要写成
<meta charset="utf8">或<meta charset="UTF8">，只有"UTF-8"是标准值，大小写敏感
HTTP 响应头中的 Content-Type 优先级高于 meta
本地双击打开（file:// 协议）时，HTTP 头不存在，只能靠 meta；但只要走 HTTP（http:// 或 https://），响应头里的 Content-Type: text/html; charset=gbk 会直接压倒 HTML 内的声明。
- F12 打开开发者工具 →
Network标签 → 刷新 → 找主 HTML 请求 → 点开 → 查看Response Headers中的Content-Type - Nginx 配置需加：
add_header Content-Type "text/html; charset=utf-8";（注意不是charset utf-8;，后者不带 MIME 类型，无效） - Express 中必须在
res.send()前调用：res.set("Content-Type", "text/html; charset=utf-8"); - PHP 中
header()必须在任何输出（包括空格、BOM）之前调用，否则失效
真正卡住人的地方，往往不是“不知道要写 meta charset”，而是改完后发现还是乱码——这时候大概率是文件存成了 UTF-8 with BOM，或者服务器返回了 charset=iso-8859-1，又或者 meta 前面藏了个看不见的 Unicode 零宽空格。每一步都得用命令行或开发者工具实锤，不能凭感觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
