必须用支持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）在此协议下会被浏览器禁用
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个页面</title> </head> <body> <h1>Hello World</h1> <p>这是用 VS Code 修改后保存的 HTML。</p> </body> </html>
HTML 编辑本身门槛低，但真正卡住人的从来不是标签怎么写，而是文件路径不对、编码错了、浏览器缓存没清、或者误以为 DevTools 的修改已落地。把这三个动作做扎实：用对编辑器 → 保存为 UTF-8 + .html → 用 http 协议访问 + 手动刷新，剩下的就是语法问题，查 MDN 就行。
