必须紧贴开头且前面无任何字符（含bom、空格、注释），同时html文件须为utf-8无bom编码，http响应头content-type也需声明charset=utf-8，三者缺一即导致中文乱码。
meta charset="UTF-8" 必须放在 最开头，且 HTML 文件本身必须是 UTF-8 无 BOM 编码；否则打包发布后，中文大概率直接变问号或方块——这不是浏览器问题，是文件+传输+声明三者没对齐。
HTML 文件保存编码必须是 UTF-8 无 BOM
VS Code 右下角显示 “UTF-8” 不代表实际保存的就是 UTF-8：如果原文件是从 Windows 记事本、微信/QQ 粘贴、旧版 PHP 模板复制而来，很可能底层仍是 GBK。打开后不手动选 “Save with Encoding → UTF-8”（注意：**不能选 “UTF-8 with BOM”**），保存后的文件开头仍可能含 BOM（EF BB BF）字节。BOM 会卡在 前面，导致浏览器跳过 <meta charset="UTF-8">，fallback 到系统默认编码（Windows 是 GBK，Linux/macOS 是 ISO-8859-1）。
验证方式：
- Linux/macOS 执行
xxd -l 4 index.html，输出开头不是ef bb bf - PowerShell 执行
Get-Content index.html -Encoding Byte | Select -First 3，结果不是239 187 191 - VS Code 中用 “Reopen with Encoding” 强制以 GBK 打开，若中文能正常显示，说明原文件确实是 GBK，必须重存为 UTF-8
打包工具（Vite/Webpack/Next.js）会自动注入 meta 吗？
不会。大多数现代构建工具（如 Vite 的 vite build、Webpack 的 HtmlWebpackPlugin）默认只把 index.html 当作模板字符串读入，不做编码解析。如果你的源 index.html 是 GBK 编码，构建产物仍是 GBK；如果用了 EJS、Pug 等模板引擎，还要确认模板编译时的输入流编码是否设为 UTF-8。
关键动作：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 检查构建前的源
index.html文件编码（用上面方法验证） - Vite 用户：确保
vite.config.ts中未配置build.rollupOptions.output.manualChunks错误地拆分了内容 - Webpack + HtmlWebpackPlugin：在插件配置中显式指定
templateEncoding: 'utf8' - 所有场景：构建后立刻用
xxd或 VS Code 查看 dist 目录下的 HTML 文件编码，别只信开发时 localhost 的表现
HTTP 响应头 Content-Type 必须带 charset=utf-8
本地双击打开 file:// 时，浏览器只认 <meta charset>；但一旦部署上线（http:// 或 https://），服务器返回的 HTTP 响应头 Content-Type: text/html; charset=utf-8 优先级高于 HTML 内的 meta。如果服务器没配，或者配成 charset=gbk，哪怕 meta 写得再标准，也会被覆盖。
常见配置位置：
- Nginx：在
server或location块中加charset utf-8;（注意小写，不能写charset=UTF-8） - Apache：
.htaccess中写AddDefaultCharset UTF-8（大写 UTF-8） - Express.js：在
res.send()或res.sendFile()前调用res.set('Content-Type', 'text/html; charset=utf-8') - 静态托管平台（Vercel、Netlify、GitHub Pages）：默认发 UTF-8，但若你上传了带 BOM 的文件，部分边缘节点可能解析异常，所以源头仍要清 BOM
部署后怎么快速验证编码是否生效？
别只看页面渲染效果。打开 Chrome DevTools → Network → 刷新 → 点 HTML 请求 → Headers → Response Headers → 找 Content-Type 字段，值必须是 text/html; charset=utf-8；再点 Preview 或 Response 标签页，确认中文是否可读；最后在 Console 输入 document.characterSet，返回值必须是 "UTF-8"。
三个条件缺一不可：
- 响应头
Content-Type正确 - HTML 文件本身是 UTF-8 无 BOM
-
<meta charset="UTF-8">紧贴开始，前面零空格、零注释、零 BOM
最容易被忽略的是：构建产物目录里的 HTML 文件，和你本地编辑器里看到的不是同一个编码——因为构建过程可能触发了隐式转码，或者 CI/CD 流水线（比如 GitHub Actions 默认环境是 UTF-8，但某些 Docker 镜像不是）悄悄改了它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
