乱码根源在于文件实际字节、html声明、http响应头三者必须严格对齐为utf-8（不含bom）；缺一即fallback至gbk，显示ä¸等符号。需用xxd/powershell验证bom，vs code保存为utf-8（无bom），须为首字符，且http响应头content-type优先级更高。
乱码不是“设个就能好”，而是文件实际字节、HTML声明、HTTP响应头三者必须严格对齐为UTF-8。缺一不可，错一个就 fallback 到系统默认编码（Windows 多为 GBK），显示成 ä¸ 或 这类符号。
检查 HTML 文件是否真为 UTF-8（不含 BOM）
VS Code 右下角显示 “UTF-8” ≠ 文件真是 UTF-8；它可能只是“以为”是。BOM（EF BB BF）最常坑人——它藏在文件开头，肉眼不可见，却会让 Node.js、PHP、Nginx 把 <meta charset="UTF-8"> 当作无效内容跳过。
- Linux/macOS：运行
xxd -l 4 index.html，输出含ef bb bf就有 BOM；用sed -i '1s/^\xEF\xBB\xBF//' index.html删除 - PowerShell：运行
Get-Content index.html -Encoding Byte | Select -First 3，若输出239 187 191即为 BOM - VS Code：Ctrl+Shift+P → 输入 “Change File Encoding” → 选
Save with Encoding→ 严格选UTF-8（不带 “with BOM”）
<meta charset="UTF-8"> 必须紧贴
浏览器只扫描 HTML 前 1024 字节找 <meta charset>，且必须出现在 标签内、**第一个有效字符位置**。任何前置内容（包括 BOM、空格、换行、注释 <!-- -->、甚至零宽空格 U+200B）都会让它失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ❌ 错误写法：
\n <!-- 注释 -->\n <meta charset="UTF-8"> - ❌ 错误写法：
<title>首页</title> <meta charset="UTF-8">（<title></title>挡在前面） - ✅ 正确写法：
<meta charset="UTF-8"> <title>首页</title>（无换行、无注释、无空格） - 验证方式：Chrome 打开页面 → F12 → Elements → 展开
→ 确认<meta charset="UTF-8">是第一个子节点
HTTP 响应头 Content-Type 会覆盖 <meta>
只要走 HTTP（http:// 或 https://），服务器返回的 Content-Type: text/html; charset=xxx 优先级永远高于 <meta>。改了 meta 却没动服务器配置，等于白干。
- Nginx 配置：在
http/server/location块中加charset utf-8;（注意小写、无分号外空格、不写charset=UTF-8） - Express.js：在
res.send()前加res.set('Content-Type', 'text/html; charset=utf-8') - Apache：确保
AddDefaultCharset未设为gbk，或显式设为UTF-8 - 验证方式：F12 → Network → 刷新 → 点 HTML 请求 → Headers → Response Headers → 查
Content-Type是否含charset=utf-8
双击打开（file://）时只靠 <meta> 和文件编码
本地双击 HTML 文件时，没有 HTTP 响应头，浏览器完全依赖文件字节 + <meta charset>。此时若文件含 BOM 或 <meta> 位置偏移，乱码必然发生，且无法通过服务器配置修复。
- VS Code 中务必确认右下角是 “UTF-8”（非 “UTF-8 with BOM”），然后保存
- Live Server 插件可绕过此限制：右键 → “Open with Live Server”，自动起
http://127.0.0.1服务，启用响应头控制 - Notepad++ 用户：编码 → 转为 UTF-8（**不是** “UTF-8-BOM”）→ 保存
- 别信 “我写了
<meta charset="utf8">”，HTML5 只认utf-8（带连字符、全小写）
最容易被忽略的是 BOM 和 <meta> 的物理位置——它们不是“写出来就行”，而是必须满足字节级精确：文件开头就是 UTF-8 字节流，紧接着就是 <meta charset="UTF-8">，中间不能有任何隐藏字符。一旦偏离，浏览器立刻放弃 UTF-8 解析，掉进 GBK fallback 陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
