根本原因是记事本默认用GBK保存而浏览器默认按UTF-8解析，导致编码不匹配；应将文件另存为无BOM的UTF-8，并在<head>内首行添加<meta charset="UTF-8">。
记事本保存的 HTML 文件一打开就中文乱码，根本原因不是“记事本不行”，而是它默认用系统编码（Windows 下通常是 GBK）保存文件，但浏览器在没有明确提示时，会优先按 UTF-8 解析——两者对不上，字节就被错读了。
确认记事本实际保存的编码是 GBK 还是 UTF-8
双击打开乱码 HTML 文件后，别急着改代码。先看记事本右下角显示的编码名：
- 如果显示
ANSI：基本等于GBK（Windows 简体中文系统下），文件内容是 GBK 编码 - 如果显示
UTF-8：可能是带 BOM 的 UTF-8（新版记事本默认），也可能是误标；可用file -i yourfile.html（Linux/macOS）或 PowerShell 中运行Get-Content yourfile.html -Encoding Byte | Select -First 3验证头三字节是否为ef bb bf - 若显示
Unicode：实为 UTF-16 LE，极少见，需转成 UTF-8
用记事本强制另存为无 BOM 的 UTF-8
这是最直接、兼容性最好的修复方式（尤其适合后续要部署到服务器的页面）：
- 在记事本中打开乱码文件 → 点击「文件」→「另存为」
- 在「编码」下拉菜单中，**必须选
UTF-8**（注意：不是UTF-8-BOM，新版 Windows 记事本的UTF-8选项默认已去 BOM） - 保存后，立刻用浏览器双击打开，乱码应消失
- 验证是否真去 BOM：终端执行
head -c 3 yourfile.html | xxd，输出不含ef bb bf才算成功
补上 <meta charset="UTF-8"> 并确保位置正确
即使文件已是 UTF-8，没这个标签或位置错了，浏览器仍可能 fallback 到 GBK：
立即学习“前端免费学习笔记（深入）”；
- 在记事本中，把光标放在
<head>标签后、任何内容（包括空格、换行、注释）之前，插入：<meta charset="UTF-8"> - 必须写成
"UTF-8"，不能是"utf8"或"UTF8"—— 大小写和连字符都严格匹配标准 - 删掉任何出现在
<meta charset="UTF-8">前面的空白、<!-- 注释 -->或其他标签 - 正确结构示例：
<head> <meta charset="UTF-8"> <title>我的网页</title> </head>
为什么不用 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
这个写法在 HTML5 中已被废弃，且兼容性不如 <meta charset="UTF-8">：
-
<meta charset>是 HTML5 原生语法，浏览器解析更早、更可靠 -
http-equiv版本会被某些老旧工具误当成 HTTP 头模拟，反而引发歧义 - 两者功能等价，但前者更短、更准、更现代；除非维护古董级 IE6 页面，否则没必要用后者
真正容易被忽略的是：记事本里改完编码再保存，不代表浏览器会立刻刷新缓存。关掉所有标签页，重新双击打开，或者按 Ctrl+F5 强制硬刷新——否则你看到的可能还是上次的错误解析结果。
