Notepad++编辑index.html教程

Notepad++编辑index.html看似简单，实则新手常因三个隐形陷阱——保存时未选“UTF-8无BOM”导致页面白屏或乱码、资源路径误按编辑器位置而非HTML文件位置设置引发图片/CSS加载失败、以及file://协议下仅按F5无法刷新缓存而误以为修改无效——而反复碰壁；真正阻碍效果呈现的并非代码语法，而是保存动作本身、路径逻辑和浏览器加载机制这些“写完代码之后”的关键细节，掌握这三点，才能告别玄学调试，高效进入前端开发正轨。

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 文件位置算

浏览器加载 时，找的是“相对于 index.html 所在文件夹”的路径，不是你当前打开 Notepad++ 的窗口路径，也不是桌面路径。

• 如果 index.html 在 C:\my-site\，图片在同目录，就写
• 如果图片在 C:\my-site\images\，就得写
• 控制台报 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 里就跑

把 放在 里，大概率报 Cannot read property 'innerHTML' of null——DOM 还没解析完，元素根本不存在。

• 最稳做法：把
• 别用 async 加载操作 DOM 的脚本，执行时机不可控

真正卡住新手的，从来不是标签怎么写，而是保存编码、路径理解、缓存刷新这三步没做对。每一步都发生在“写完代码之后、看到效果之前”，容易被当成玄学问题反复重开编辑器。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Notepad++编辑index.html教程》文章吧，也可关注golang学习网公众号了解相关技术文章。