HTML中文乱码需文件存储、HTTP响应头、<meta charset>、外部资源四者统一为UTF-8（推荐含BOM）；<meta charset="UTF-8">必须置于<head>最开头1024字节内且无前置字符，BOM验证用file -i或xxd，VS Code保存须选“UTF-8 with BOM”，HTTP头Content-Type优先级最高，CSS/JS等外部资源同样须UTF-8对齐。
HTML 中文乱码不是单一环节出错，而是编码链上任一环断裂都会导致——文件存储、HTTP 响应头、<meta charset>、外部资源（CSS/JS）必须全部对齐 UTF-8，缺一不可。
确认 HTML 文件实际编码是否为 UTF-8（含 BOM）
VS Code 右下角显示 “UTF-8” 不代表文件真是 UTF-8；它可能只是编辑器“猜测”的结果。真实编码需验证：
- Linux/macOS 执行
file -i index.html，输出中必须含charset=utf-8 - Windows PowerShell 执行
Get-Content index.html -Encoding Byte | Select -First 3，前 3 字节必须是ef bb bf（即 UTF-8 with BOM） - Notepad++：菜单栏「编码 → 转为 UTF-8-BOM 编码」再保存
- 若用 VS Code 保存，务必选「Save with Encoding → UTF-8 with BOM」，纯 UTF-8（无 BOM）在某些旧版 IE 或 PHP 环境下会 fallback 到系统默认编码（如 Windows 的 GBK）
<meta charset> 必须放在 <head> 最开头（1024 字节内）
浏览器只扫描 HTML 前 1024 字节来提取 <meta charset>，一旦位置靠后或前面有空格/注释/BOM 解析失败，就会跳过它，直接 fallback 到 HTTP 头或系统默认编码。
- 正确写法：
<head><meta charset="UTF-8">（紧贴<head>，无换行、无空格、无注释） - 错误写法：
<head><!-- 注释 --><meta charset="UTF-8">（注释占位，可能挤出扫描范围） - 禁止写成
<meta charset="utf8">或<meta charset="UTF8">—— 浏览器不识别，等同于没写 - 不要混用：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">是 HTML4 写法，HTML5 已不推荐，且与<meta charset>同时存在时行为未定义
检查 HTTP 响应头中的 Content-Type
HTTP 响应头的 Content-Type 优先级高于 <meta charset>。如果服务器返回 Content-Type: text/html; charset=iso-8859-1，哪怕 HTML 里写了 <meta charset="UTF-8">，浏览器也按 iso-8859-1 解析。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools → Network → 点开 HTML 请求 → Headers → Response Headers → 查看
Content-Type - Nginx 配置需加：
charset utf-8;（在http、server或location块中） - Apache 配置需加：
AddDefaultCharset UTF-8（在.htaccess或虚拟主机配置中） - Node.js/Express：用
res.set('Content-Type', 'text/html; charset=utf-8')显式设置，不能依赖res.sendFile()默认行为 - PHP：确保没有 BOM 输出（
hexdump -C file.php | head检查前 3 字节），否则header()会失效
CSS/JS 等外部资源也必须是 UTF-8（含 BOM）
即使 HTML 本身完全正确，只要引用的 <script src="app.js"> 或 <link rel="stylesheet" href="style.css"> 文件自身不是 UTF-8 编码，其中的中文（比如 content: "按钮";）照样显示为方块或问号。
- 用和 HTML 相同方式验证 CSS/JS 文件编码：
file -i style.css、Get-Content -Encoding Byte style.js | Select -First 3 - Notepad++ / VS Code 中打开这些文件，同样执行「转为 UTF-8-BOM 编码 → 保存」
- 避免在 CSS 中用非 ASCII 字体名（如
font-family: "微软雅黑"），改用英文别名或通用族：font-family: "Microsoft YaHei", "SimHei", sans-serif; - JS 中字符串若来自后端接口，需确认接口响应头也是
Content-Type: application/json; charset=utf-8，且 JSON 内容未被二次编码
最容易被忽略的是：BOM 在 HTML 中是“安全”的，但在 PHP、Node.js 的某些模板引擎或构建工具里，BOM 会被当作空白字符输出到响应体开头，导致 Content-Type 头已发送后再输出内容，从而让整个页面解析崩溃。所以生产环境是否保留 BOM，得看你的服务端栈是否真的兼容它。
