<meta charset="UTF-8">必须置于<head>最前端，因浏览器仅扫描前1024字节查找该声明；若被注释、空格、BOM或<title>等标签阻隔，将回退至系统默认编码（如GBK）导致乱码。
meta charset必须放在最前面
浏览器解析 HTML 时，会在前 1024 字节内查找 meta charset 声明；如果它被注释、空格、BOM 或其他标签（比如 <script>、<title>）挡在后面，就可能直接跳过，回退到系统默认编码（Windows 下常为 GBK），导致中文显示为 或方块。
常见错误现象：
-
<!-- 注释 -->写在<meta charset="UTF-8">前面 -
<meta charset="UTF-8">前有空行、空格或不可见 Unicode 字符 - 把
<meta charset="UTF-8">放在<title>后面甚至<body>里
实操建议：
- 打开 HTML 文件，确认
<meta charset="UTF-8">是<head>内第一个非空白、非注释的子元素 - 用 VS Code 打开文件，按
Ctrl+Shift+P→ 输入 “Reveal in Explorer”，右键 → “Open with Code” 确保没被其他程序锁住 - 删除所有
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">这类旧式写法，只留一个<meta charset="UTF-8">
文件实际编码必须是 UTF-8 without BOM
声明写了 UTF-8，但文件本身是 GBK 或 UTF-8 with BOM，浏览器照样会解错字节流——比如把一个中文字符的三字节序列当成三个独立 Latin-1 字符渲染，结果就是乱码。
立即学习“前端免费学习笔记（深入）”；
验证和修正方法：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- VS Code 右下角查看当前编码，若显示
UTF-8 with BOM或GBK，点击它 → “Save with Encoding” → 选UTF-8（注意不是UTF-8 with BOM） - Notepad++：菜单栏“编码” → “转为 UTF-8 编码”（不是“UTF-8-BOM”）
- 命令行快速检测 BOM：
head -c 4 yourfile.html | xxd，输出含ef bb bf就说明有 BOM，需清除后重存
HTTP 响应头中的 Content-Type 优先级更高
服务器返回的 HTTP 响应头里如果带了 Content-Type: text/html; charset=gbk，或者压根没写 charset 子句，那 <meta charset="UTF-8"> 就会被无视。这是很多本地测试正常、上线就乱码的根本原因。
检查步骤：
- F12 打开开发者工具 → Network 标签页 → 刷新页面 → 找到主 HTML 请求（Type 为
document） - 点开它 → Headers → Response Headers → 查看
Content-Type值 - 正确值应为
text/html; charset=utf-8；若为charset=gbk、charset=iso-8859-1或缺失charset，就得改服务器配置
常见服务端修正方式：
- Apache：在站点根目录加
.htaccess，写入AddDefaultCharset UTF-8 - Nginx：在
server或location块中加charset utf-8; - Express（Node.js）：
res.set('Content-Type', 'text/html; charset=utf-8');
外部资源（CSS/JS）也要统一编码
就算 HTML 本身没问题，如果引入的 <link rel="stylesheet"> 或 <script src> 文件是 GBK 编码，且没在 HTTP 响应头里声明 charset，它们内部的中文注释或字符串也可能乱码——尤其当这些文件里有中文路径、中文提示或内联样式时。
排查要点：
- 对每个外部 CSS/JS 文件，同样用 VS Code 检查右下角编码，并保存为
UTF-8（无 BOM） - 确保 Web 服务器对
.css和.js文件也返回带charset=utf-8的Content-Type（如text/css; charset=utf-8） - 避免在 CSS 中写
content: "你好";这类中文时，文件编码和声明不一致
真正容易被忽略的是：HTML、CSS、JS、HTTP 响应头、数据库连接、甚至表单提交的 accept-charset，这五者只要有一处脱节，乱码就可能出现。别只盯着 <meta charset> 单点修复。
