必须同时满足：html文件实际为utf-8无bom编码、紧贴开头（无空格/注释）、http响应头content-type含charset=utf-8；vs code右下角显示“utf-8”为理想状态，若为“utf-8 with bom”则需用save with encoding→utf-8（不选with bom）清除bom，linux/macos用head -c 4 | xxd验ef bb bf，powershell用get-content -encoding byte | select -first 3验239 187 191。
必须同时满足三个条件，缺一不可：HTML 文件实际是 UTF-8 编码（无 BOM）、<meta charset="UTF-8"> 在 开头、HTTP 响应头 Content-Type 声明 charset=utf-8（仅限 http/https 协议）。
怎么确认 HTML 文件真实编码是不是 UTF-8（且无 BOM）
VS Code 右下角显示 “UTF-8” 是理想状态；若显示 “UTF-8 with BOM”，说明文件开头有 EF BB BF 三字节标记，它会干扰 <meta charset> 解析。Linux/macOS 下用 head -c 4 index.html | xxd 查看前 4 字节，出现 ef bb bf 就要删掉。PowerShell 中运行 Get-Content index.html -Encoding Byte | Select -First 3，若输出 239 187 191 同样需清理。改用 VS Code 的 Save with Encoding → UTF-8（注意不选 “with BOM”）即可。
<meta charset="UTF-8"> 必须紧贴
浏览器只扫描 开始后最多 1024 字节内的 <meta charset>，任何前置内容都会让它失效：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 错误写法：
\n <!-- 注释 -->\n <meta charset="UTF-8"> - 错误写法：
<meta charset="UTF-8">（中间有全角空格或 U+200B 零宽空格） - 正确写法：
<meta charset="UTF-8">（紧挨着，无换行、无空格、无注释）
用 Chrome F12 打开 Elements 标签页，展开 ，确认 <meta charset="UTF-8"> 是第一个子节点。
为什么本地双击打开（file://）总乱码，而 Live Server 正常
因为 file:// 协议下 HTTP 响应头完全不存在，浏览器只能依赖 <meta charset> 和系统默认编码（Windows 默认 GBK）。此时只要文件不是 UTF-8（无 BOM）+ <meta charset="UTF-8"> 紧贴 开头，就必然失败。解决办法只有两个：
- 用 VS Code 安装 Live Server 插件，右键选择
Open with Live Server，走http://127.0.0.1:xxxx/协议 - 确保服务器配置了正确的响应头：Nginx 加
charset utf-8;，Apache 加AddDefaultCharset UTF-8，Express 中调用res.set("Content-Type", "text/html; charset=utf-8")
BOM 是最隐蔽的坑——它看不见、删不掉、还让所有努力白费。每次保存 HTML 文件前，务必确认编辑器显示的是 “UTF-8”，不是 “UTF-8 with BOM”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
