Notepad++编辑HTML需三步避坑：①保存编码选“UTF-8无BOM”，否则DOCTYPE前隐含字符致怪异模式；②图片/CSS路径须相对于HTML文件位置，非编辑器路径；③file://协议下必须Ctrl+F5强制刷新，或起本地服务http://localhost:8080。
Notepad++ 能直接编辑 index.html，但默认保存编码和路径处理不注意，改完页面可能空白、乱码或图片不显示——问题不在代码，而在保存动作本身。
保存时必须选 UTF-8（无 BOM）
Notepad++ 新建文件默认可能是 ANSI 或 UTF-8 with BOM，一旦含 BOM（字节顺序标记）， 前会多出不可见字符，IE 和部分解析器直接进怪异模式，页面布局错乱甚至白屏。
- 编辑完后，点菜单栏 编码 → UTF-8 无 BOM，再保存
- 右下角状态栏会显示当前编码，确认是
UTF-8，不是UTF-8-BOM或ANSI - 中文、emoji、版权符号 © 等全靠这个设置撑着，别跳过
图片和 CSS 路径要按 HTML 文件位置算
浏览器加载 <img src="logo.png"> 时，找的是“相对于 index.html 所在文件夹”的路径，不是你当前打开 Notepad++ 的窗口路径，也不是桌面路径。
- 如果
index.html在C:\my-site\，图片在同目录，就写<img src="logo.png"> - 如果图片在
C:\my-site\images\，就得写<img src="images/logo.png"> - 控制台报
GET file:///C:/xxx/logo.png net::ERR_FILE_NOT_FOUND，八成是路径错了
改完别只按 Ctrl+S，还要强制刷新浏览器
双击打开的 index.html 是通过 file:// 协议加载的，浏览器缓存特别狠。你明明改了文字，F5 刷新还显示旧内容，不是没保存成功，是它在“假装更新”。
- Windows 下按
Ctrl + F5（不是普通 F5），绕过内存缓存，重新读硬盘文件 - Mac 下按
Cmd + Shift + R - 长期开发建议起本地服务：
npx http-server -c-1（需装 Node.js），然后访问http://localhost:8080，缓存可控，API 也正常
script 标签别塞在 head 里就跑
把 <script>document.getElementById("app").innerHTML = "hi";</script> 放在 里，大概率报 Cannot read property 'innerHTML' of null——DOM 还没解析完，元素根本不存在。
- 最稳做法：把
<script></script>块挪到上方 - 非得放
？加defer：<script defer src="main.js"></script> - 别用
async加载操作 DOM 的脚本，执行时机不可控
真正卡住新手的，从来不是标签怎么写，而是保存编码、路径理解、缓存刷新这三步没做对。每一步都发生在“写完代码之后、看到效果之前”，容易被当成玄学问题反复重开编辑器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
