必须用支持UTF-8编码的纯文本编辑器（如VS Code）编辑HTML文件，保存为.html后缀、UTF-8无BOM编码，并通过http协议（如Live Server）访问+手动刷新才能实时生效。

直接编辑 HTML 代码不需要“编辑器”这个概念本身有多复杂，但选错工具或忽略底层机制，会导致改了文件却看不到效果、保存乱码、标签自动补全出错、甚至破坏结构。核心在于：用纯文本编辑器打开 .html 文件，修改后**必须手动刷新浏览器**，且所有更改都需符合 HTML 语法规范。

用什么工具打开和修改 HTML 文件

不是所有能“打开文本”的程序都适合写 HTML。关键看是否支持 UTF-8 编码、是否保留换行与空格、是否提供基础语法提示（非必需但强烈推荐）。

✅ 推荐：VS Code（免费，插件丰富，自带 HTML 高亮和 Emmet 快速生成）、Sublime Text、Notepad++（Windows 下轻量可靠）
❌ 避免：记事本（Notepad）（默认 ANSI 编码，中文易变问号）、Word 或 WPS（会插入不可见格式字符，保存为 .docx 后缀，根本不是 HTML）
⚠️ 注意：Chrome DevTools 中的 Elements 面板可以临时修改页面 DOM，但这些改动**不保存到源文件**，刷新即消失——仅用于调试，不能替代文件编辑

保存 HTML 文件时最容易踩的三个坑

很多初学者改完代码，双击打开还是旧页面，问题几乎全出在保存环节。

文件名必须以 .html 或 .htm 结尾（例如 index.html），不能是 index.txt 或没后缀
编码必须选 UTF-8（不是 UTF-8 with BOM，BOM 可能导致部分浏览器解析异常）；在 VS Code 右下角点击编码名称可切换
保存路径要明确——不要存在「桌面」或「下载」这类权限受限或路径含空格/中文的目录；建议新建一个英文命名的文件夹如 my-site，把 index.html 放进去

改完 HTML 怎么立刻看到效果

没有“自动预览”这回事。每次保存后，必须让浏览器重新加载当前文件。

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

最简单方式：在浏览器中按 F5（Windows/Linux）或 Cmd+R（Mac）强制刷新
如果用 VS Code，可安装插件 Live Server，右键 HTML 文件选择 Open with Live Server，它会起一个本地服务（地址类似 http://127.0.0.1:5500/index.html），保存即自动刷新
⚠️ 切忌直接双击文件打开（地址是 file:/// 协议），某些功能（如 fetch 加载本地 JSON、Service Worker）在此协议下会被浏览器禁用

我的第一个页面

Hello World

这是用 VS Code 修改后保存的 HTML。

HTML 编辑本身门槛低，但真正卡住人的从来不是标签怎么写，而是文件路径不对、编码错了、浏览器缓存没清、或者误以为 DevTools 的修改已落地。把这三个动作做扎实：用对编辑器 → 保存为 UTF-8 + .html → 用 http 协议访问 + 手动刷新，剩下的就是语法问题，查 MDN 就行。