解决HTML中文乱码的关键是让<meta charset="UTF-8">真正生效：确保其位于<head>最开头且无BOM/空格/注释阻隔；HTML文件必须以UTF-8（无BOM）保存；HTTP响应头Content-Type需明确声明charset=utf-8，否则会覆盖meta声明。
解决 HTML 页面中文乱码，关键不是加不加 <meta charset="UTF-8">，而是让这个声明**真正生效**。90% 的生产环境乱码问题，都出在“声明写了，但浏览器根本没读到”——原因集中在三处：标签位置被阻断、文件编码不匹配、HTTP 响应头覆盖。下面直击这三类真实场景的配置要点。
确保 <meta charset> 在 head 开头真正“可见”
浏览器只扫描 HTML 前 1024 字节来找 charset 声明。只要它前面有任何不可见字符（BOM、空格、换行、HTML 注释），就会跳过，直接 fallback 到系统默认编码（Windows 是 GBK，Linux/macOS 是 ISO-8859-1）。
-
必须紧贴 <head> 开始，且是第一个子元素：写成
<head><meta charset="UTF-8"><title>...，不能有空行、注释或 script/link 标签插在中间 -
禁止任何前导字符：用命令行验证开头字节 —— Linux/macOS 执行
head -c 4 yourfile.html | xxd，输出含ef bb bf就说明有 BOM；Windows PowerShell 运行Get-Content index.html -Encoding Byte | Select -First 3，结果为239 187 191同样表示 BOM 存在 -
只保留一个，且严格写为 UTF-8：删掉所有重复声明；禁用
utf8、UTF8、utf-8等非标准写法；也不要混用<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（HTML5 已不推荐）
统一 HTML 文件实际保存编码为 UTF-8（无 BOM）
声明写对了，但文件本身是 GBK 或 UTF-8 with BOM 保存的，浏览器按 UTF-8 解码错误字节流，照样乱码。尤其 VS Code 在 Windows 下默认带 BOM，极易踩坑。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- VS Code 中操作：右下角点击编码显示（如 “UTF-8 with BOM”），选 “Save with Encoding” → “UTF-8”（注意不是 “UTF-8 with BOM”）
- Notepad++ 中操作：菜单栏 “编码” → “转为 UTF-8 编码”（明确避开 “UTF-8-BOM”）
- Sublime Text 中操作：File → Save with Encoding → UTF-8
- 验证方式：保存后右下角状态栏应显示纯 “UTF-8”，无 “with BOM”、“签名”等字样
校验并强制 HTTP 响应头中的 Content-Type
当页面通过 http/https 访问时，服务器返回的 HTTP 响应头中 Content-Type 字段优先级高于 <meta>。如果头里写着 charset=gbk 或压根没带 charset，<meta> 就完全失效。
立即学习“前端免费学习笔记（深入）”；
-
快速定位问题：F12 打开开发者工具 → Network → 刷新 → 点击主 HTML 请求 → Headers → Response Headers → 查看
Content-Type值 -
Nginx 配置：在
http、server或location块中添加charset utf-8;（注意小写，不是 UTF-8） -
Apache 配置：在
.htaccess或httpd.conf中添加AddDefaultCharset UTF-8 -
Node.js/Express：在
res.send()或res.sendFile()前调用res.set("Content-Type", "text/html; charset=utf-8") -
PHP：在输出任何内容前调用
header("Content-Type: text/html; charset=utf-8")，且确保 PHP 文件自身也无 BOM（可用 hexdump 检查）
别漏掉 JS 和 CSS 文件的编码一致性
HTML 本身没问题，但引入的外部 JS 或 CSS 文件用了 GBK 编码，也会导致脚本解析失败或样式错乱，甚至引发 Uncaught SyntaxError: Invalid or unexpected token。
- JS 文件：用同上方式确认保存为 UTF-8（无 BOM）；避免在文件开头写 BOM
-
CSS 文件：可在首行添加
@charset "UTF-8";（注意必须是第一行，前面不能有任何字符，包括空格和注释） -
构建工具（Webpack/Vite）：若源文件是 GBK，需在 loader 中显式指定 encoding，例如
encoding: 'gbk'，再转为 UTF-8 输出
