确保HTML文件编码为UTF-8（无BOM），且<meta charset="UTF-8">声明正确、编辑器保存时选UTF-8（无BOM），三者一致才能避免中文乱码；记事本默认ANSI易致错，VS Code和Notepad++可精准控制编码与BOM。
直接保存为 UTF-8 编码的 HTML 文件，关键不是“选对格式”，而是确保三处完全一致：文件实际编码、<meta charset="UTF-8"> 声明、编辑器保存时选的是 UTF-8（无 BOM）。三者缺一或错位，中文就大概率乱码。
用记事本保存时为什么总乱码？
Windows 自带记事本默认用 ANSI（中文系统即 GBK），即使你写了 <meta charset="UTF-8">，文件本身仍是 GBK 编码，浏览器按 UTF-8 解就会错位显示。
- 复制好 HTML 源码后，打开记事本 → 粘贴 → 点击「文件」→「另存为」
- 在保存对话框中：必须手动展开「编码」下拉菜单，选
UTF-8（不是默认的 ANSI） - 文件名末尾加
.html，例如index.html；不要选「所有文件」以外的其他类型 - 保存后双击打开，若仍乱码，说明记事本可能偷偷加了 BOM —— 这种情况建议换 VS Code 或 Notepad++
VS Code 里保存为 UTF-8（无 BOM）的实操步骤
VS Code 默认识别编码较准，但保存动作仍需人工确认，尤其从别人手里拿到的文件，编码常被污染。
- 打开 HTML 文件后，看窗口右下角状态栏，会显示当前编码，如
GBK或UTF-8 with BOM - 点击该编码标识 → 选择「Save with Encoding」→ 再选
UTF-8（注意不是UTF-8 with BOM） - 保存后，重新打开文件，检查
<head>里是否有<meta charset="UTF-8">，且它位于<title>之前 - 如果原文件没这行 meta，手动补上；如果已有但写成
charset="utf8"（漏掉短横）或charset="utf-8 "（带空格），浏览器可能忽略
Notepad++ 中转码并验证是否真为 UTF-8
Notepad++ 是处理乱码最直观的工具，能明确看到编码切换前后效果，也支持快速验证 BOM 是否存在。
立即学习“前端免费学习笔记（深入）”；
- 用 Notepad++ 打开 HTML 文件 → 顶部菜单「编码」→ 查看当前状态，常见有
ANSI、UTF-8-BOM、UTF-8 - 若不是
UTF-8，先选「转为 UTF-8 无 BOM」→ 再点「文件」→「另存为」，确认扩展名是.html - 验证是否真无 BOM：按
Ctrl+H打开十六进制查看，看文件开头是不是EF BB BF—— 是则含 BOM，不是才对 - 顺便检查
<meta charset="UTF-8">是否存在且拼写正确；若原文件用的是gb2312，仅改 meta 不改文件编码，依然白搭
BOM 是最容易被忽略的坑：它看不见、不影响本地预览，但上传到服务器后，可能让 PHP 输出多一个空行、让 JS 报 Unexpected token、让 CSS 样式失效。只要不是明确要兼容 IE6 之类古董，一律选 UTF-8（无 BOM）。
