推荐用 VS Code 或 Sublime Text 编辑 HTML：VS Code 免费且插件丰富，Sublime Text 启动快并支持 UTF-8 转换；改源码前务必确认文件路径、构建输出位置及浏览器缓存，路径需按 HTML 文件所在位置计算相对路径或用服务器根目录绝对路径。
用什么工具打开 HTML 文件最不踩坑
直接双击用浏览器打开只能看效果，改不了源码；用记事本能改但会乱码、没语法高亮、保存时容易丢 UTF-8 编码。推荐立刻换用轻量可靠的编辑器：
- VS Code（免费，装上
Auto Close Tag和Highlight Matching Tag插件后写 HTML 很顺） - Sublime Text（启动快，
Ctrl+Shift+P调出命令面板，搜Convert to UTF-8防乱码） - 系统自带的「记事本」仅限临时改一两行，且务必在「另存为」时手动选
编码：UTF-8，否则中文变æ类乱码
修改 HTML 源码前必查的三处地方
很多人改完刷新没变化，不是浏览器缓存就是改错了文件。先确认这三点再动手：
- 浏览器按
F12→ 切到Elements面板，右键任意标签选Edit as HTML，改完实时生效——这只是临时调试，关页面就丢，不能替代改源文件 - 检查你实际编辑的文件路径是否和浏览器地址栏一致，比如地址是
http://localhost:8080/index.html，就得去改项目根目录下的index.html，不是桌面上那个同名文件 - 如果用了构建工具（如 Vite、Webpack），改的是
src/index.html，但最终生效的是生成在dist/里的那个，得运行npm run build再刷新，或者直接开发时用npm run dev
img 标签路径改不对？90% 是相对路径搞混了
本地双击打开 HTML 时，src="images/logo.png" 能显示，但放到服务器上 404——因为浏览器解析路径的基准是当前 HTML 文件位置，不是你心里想的那个“项目根目录”：
- 当前 HTML 在
/pages/about.html，想引用/images/icon.jpg，得写成src="../images/icon.jpg"（向上一级再进 images） - 想绕过层级、统一从网站根目录算起，用以
/开头的绝对路径：src="/images/icon.jpg"，但注意：这个/是服务器根目录，本地双击打开时无效（会变成file:///images/...） - Vite 或 Vue CLI 项目里，放在
public/下的资源才支持/xxx写法；放在src/下的要用import或new URL(..., import.meta.url)
改完不生效？先关掉这些“隐形干扰项”
不是代码写错，而是环境在悄悄捣鬼：
立即学习“前端免费学习笔记（深入）”；
- 浏览器强刷：Windows 用
Ctrl+F5，Mac 用Cmd+Shift+R，跳过缓存重载全部资源 - 服务端开了缓存头？比如 Nginx 返回了
Cache-Control: max-age=3600，改完 HTML 也得等一小时才更新——临时调试可加&t=xxx参数，如index.html?t=123 - 某些编辑器（如 VS Code）启用了 Live Server 插件，它默认监听文件变化并自动刷新，但如果插件卡住或端口被占，可能静默失败——关掉再重开一次服务更省时间
HTML 源码本身没有魔法，真正卡住人的永远是路径、编码、缓存这三个点，盯住它们比学一堆标签属性管用得多。
