<meta charset="utf-8">必须为<head>中首个标签且无前置字符，同时所有文件须以UTF-8编码保存；VS Code需禁用自动检测并配.editorconfig全局锁定编码。

团队协作写 HTML 时，光靠口头约定“统一用 UTF-8”没用——浏览器不会读你的会议纪要，Git 也不会自动修正乱码。真正起作用的只有两件事：meta charset="utf-8" 必须出现在 <head> 首行，且所有编辑器必须强制使用 UTF-8 编码保存文件。

为什么 VS Code 里设了 UTF-8 还会出乱码

VS Code 的「文件编码」设置（右下角点击）只影响当前打开的文件，且默认是“自动检测”。新人 clone 项目后如果第一次用 GBK 编码打开一个含中文的 index.html，再保存，就直接把 UTF-8 文件污染成混合编码。更糟的是，Git 不报错，但 diff 里全是 字符。

• 必须在项目根目录建 .editorconfig，显式锁定编码：

  root = true
  [*]
  charset = utf-8
  end_of_line = lf
  insert_final_newline = true

• .editorconfig 要提交到 Git，否则对新成员无效
• 禁用 VS Code 的“自动检测编码”：在 settings.json 里加 "files.autoGuessEncoding": false

HTML 里 meta charset 放错位置等于没写

W3C 明确要求：<meta charset="utf-8"> 必须是 <head> 中**第一个**元标签，且不能有任何前置空格或注释。放错位置会导致部分浏览器（尤其是旧版 IE、某些嵌入式 WebView）退化为 GBK 或 ISO-8859-1 解析。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 错误写法：

  <head>
    <!-- 页面描述 -->
    <meta charset="utf-8">

• 正确写法（顶格、无空格、无注释）：

  <head>
  <meta charset="utf-8">
  <title>...</title>

• 不要用旧式写法 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">，冗余且兼容性反而差

CI 流水线里怎么拦住非 UTF-8 文件

靠人眼检查 git diff 不现实。需要脚本在提交前或 CI 阶段扫描文件编码：

立即学习“前端免费学习笔记（深入）”；

• 用 file -i *.html 检查 MIME 类型和编码，但 Linux/macOS 行为不一致
• 推荐用 Node.js 脚本 + jschardet 库做精确检测（比 file 更准），例如：

  const jschardet = require('jschardet');
  const fs = require('fs');
  const content = fs.readFileSync('index.html');
  const { encoding } = jschardet.detect(content);
  if (encoding !== 'UTF-8' && encoding !== 'UTF-8-SIG') {
    console.error('非 UTF-8 编码:', encoding);
    process.exit(1);
  }

• 把这个脚本加进 lint-staged 或 husky pre-commit 钩子，失败即中断提交

最容易被忽略的点是：.editorconfig 只管编辑器行为，meta charset 只管浏览器解析，CI 校验只管落地结果——三者缺一不可。少一个，乱码就会在某个环节悄悄出现。