<meta charset="UTF-8">必须置于<head>最前面，因浏览器仅扫描前1024字节查找该标签；若此前出现中文、emoji、注释或BOM后非ASCII内容，将fallback至系统默认编码（如GBK或ISO-8859-1），导致后续<meta>失效及乱码。
meta charset 必须放在 head 最前面
浏览器解析 HTML 时，只扫描 <head> 开头约 1024 字节来查找 <meta charset>；一旦遇到非 ASCII 字符（比如中文 <title>你好</title>、emoji 或注释），就会立刻 fallback 到系统默认编码（Windows 是 GBK，macOS/Linux 是 ISO-8859-1），之后再写的 <meta charset="UTF-8"> 就无效了。
常见错误写法：
-
<head><title>我的页面</title><meta charset="UTF-8"></head>——<title>里含中文，已超 ASCII 范围，meta 失效 -
<head><!-- 页面说明 --><meta charset="UTF-8"></head>—— 注释含中文或 BOM 后字节，同样失效 -
<head><meta charset="utf8"></head>—— 缺少连字符，utf8不是 IANA 注册值，IE/Safari 可能忽略
正确顺序只有一种：<head><meta charset="UTF-8"><title>我的页面</title></head>，且 <meta> 前不能有任何内容（包括空格、换行、BOM 以外的不可见字符）。
文件保存编码必须和 meta 声明一致
<meta charset="UTF-8"> 不是魔法开关——它只是告诉浏览器“请用 UTF-8 解码这个文件”，但如果文件实际是 GBK 编码保存的，浏览器就会拿 UTF-8 去硬解 GBK 字节，结果就是乱码（如 æç）。
立即学习“前端免费学习笔记（深入）”；
验证与操作要点：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- VS Code：右下角编码显示不是
UTF-8时，点击切换 → “Save with Encoding” → 选UTF-8 with BOM（BOM 能帮 IE 更早识别） - Sublime Text：File → Save with Encoding → UTF-8
- 命令行验证（Linux/macOS）：
file -i index.html应返回charset=utf-8；head -c 4 index.html | xxd前三字节应为ef bb bf（BOM） - PowerShell（Windows）：
Get-Content index.html -Encoding Byte | Select -First 3应输出239, 187, 191
HTTP 响应头 charset 优先级高于 meta
当 HTML 通过 HTTP 加载（即不是双击打开 file://），服务器返回的 Content-Type 响应头中的 charset 会覆盖 <meta charset>。例如：
Content-Type: text/html; charset=GBK
哪怕你写了 <meta charset="UTF-8">，浏览器仍按 GBK 解码。
配置建议：
- Nginx：在
server或location块加charset utf-8; - Apache：在
.htaccess加Header set Content-Type "text/html; charset=UTF-8" - Node.js/Express：响应前设
res.set('Content-Type', 'text/html; charset=UTF-8') - Python
http.server：需自定义 handler 设置响应头，否则默认无 charset
调试方法：F12 → Network → 点开 HTML 请求 → Headers → Response Headers → 查看 Content-Type 值；同时对比 Elements 面板中 <meta> 的 charset 属性是否一致。
不依赖 charset 的兜底手段：BOM + 统一工具链
仅靠 <meta charset="UTF-8"> 在老旧环境（尤其 IE）或编辑器误操作时仍可能失败。真正鲁棒的做法是组合加固：
- BOM 必须存在：它能在解析器读到第一个 HTML 标签前就声明编码，绕过 1024 字节限制
- 所有配套文件统一 UTF-8：CSS、JS、JSON、图片 alt 文本，避免外部资源引入编码冲突
- 禁用历史兼容写法：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">是 HTML4 遗留语法，HTML5 中已被<meta charset>取代，混用反而增加歧义 - CI/CD 中加入检查：用脚本校验
index.html前 4 字节是否为 BOM，且<meta charset="UTF-8">是否出现在<title>之前
最易被忽略的是：BOM 虽好，但会占用开头 3 字节，在某些构建工具（如 webpack + html-webpack-plugin）里会报 warning，此时不能删 BOM，而应配置插件忽略该提示——因为去掉 BOM 就等于放弃对 IE 和部分 WebView 的兼容底线。
