最稳妥编辑器是VS Code、Notepad++或Sublime Text；script应放前或加defer；刷新用Ctrl+F5清缓存；图片路径须按HTML文件位置写相对路径。
用什么编辑器打开 index.html 最稳妥
直接双击用浏览器打开只能看，不能改；用记事本改容易乱码或丢格式。Windows 自带的记事本默认保存为 ANSI 编码，而现代网页必须是 UTF-8（尤其含中文、emoji 或特殊符号时），一保存就变乱码。
推荐用轻量但靠谱的编辑器：VS Code（免费）、Notepad++（Windows 专用）、Sublime Text。它们默认识别并保存为 UTF-8，还能高亮 HTML 语法、自动补全标签、实时预览。
- VS Code 打开后右下角会显示当前编码，点它可手动选
UTF-8 - Notepad++：菜单栏
编码 → 转为 UTF-8 无 BOM 格式（BOM 会导致某些服务器解析异常） - 千万别用 Word、WPS 或微信内置浏览器“另存为”出来的文件——它们会塞进大量私有标签和样式
<script></script> 标签放哪儿才真正生效
很多人把 <script></script> 塞在 里，结果 document.getElementById 拿不到元素，报错 Cannot read property 'xxx' of null。不是代码写错了，是执行时机太早——DOM 还没加载完。
最省心的做法：把 <script></script> 放在 前面。这时整个页面结构已解析完毕，所有元素都可访问。
立即学习“前端免费学习笔记（深入）”；
- 如果非得放
，加defer属性：<script defer src="main.js"></script> -
async不适合操作 DOM 的脚本，它不保证执行顺序，也不等 DOM 就跑 - 内联脚本（没
src的）没defer或async就老老实实挪到上方
改完怎么立刻看到效果，而不是刷出旧页面
浏览器缓存很顽固，尤其是 index.html 和它引用的 .js、.css 文件。你明明改了文字，刷新后还是老内容，不是没保存，是浏览器在“演戏”。
强制跳过缓存的最快方式：开发时按 Ctrl + F5（Windows/Linux）或 Cmd + Shift + R（Mac）。这会清掉内存缓存，重新拉取全部资源。
- 更彻底的办法：打开开发者工具（
F12），右键刷新按钮 →清空缓存并硬性重新加载 - 如果用 VS Code，装个
Live Server插件，点一下就能起本地服务，自动监听文件变化并刷新 - 别依赖双击打开的
file://协议——部分 API（如fetch、Service Worker）会被禁用
图片路径不对，<img src="xxx" alt="html文档修改方法 网页文件怎么编辑【实操】" > 显示空白怎么办
路径写错是高频问题。浏览器控制台（F12 → Console）里出现 404 错误，后面跟着类似 GET file:///xxx/logo.png net::ERR_FILE_NOT_FOUND，说明路径根本找不到文件。
关键原则：路径是相对于当前 HTML 文件的位置算的，不是相对于编辑器打开的文件夹，也不是相对于桌面。
- 同目录下：直接写
<img src="logo.png" alt="html文档修改方法 网页文件怎么编辑【实操】" > - 子文件夹：比如图片在
images/logo.png，就写<img src="images/logo.png" alt="html文档修改方法 网页文件怎么编辑【实操】" > - 上一级目录：用
../，例如 HTML 在/pages/index.html，图片在/assets/logo.png，则写<img src="../assets/logo.png" alt="html文档修改方法 网页文件怎么编辑【实操】" > - 绝对路径（不推荐）：
<img src="/assets/logo.png" alt="html文档修改方法 网页文件怎么编辑【实操】" >中的/是网站根目录，只在部署到服务器后才有效，本地双击打开会失效
路径这事没有玄学，打开文件管理器，用鼠标从 HTML 文件拖拽图片到编辑器里，VS Code 会自动生成正确相对路径——比手敲可靠得多。
