推荐将HTML结构与JS逻辑分离：index.html仅保留结构和挂载点，main.js单独编写并用script标签引入；务必通过Live Server启动，确保DOM加载完成后再绑定事件，优先使用addEventListener而非内联onclick。
VS Code 里写 HTML5 + JS 交互，文件怎么组织才不踩坑
直接放一起写（ 写在 底部）最省事，适合单页小功能；但一旦 JS 逻辑变多，立刻难调试、难复用、难维护。VS Code 本身不干预结构，但你得自己守住边界。
推荐做法：
-
index.html只负责结构和挂载点，比如 -
main.js单独建文件，用引入 - 在 VS Code 中右键「Open with Live Server」启动本地服务，避免
file://协议下 JS 读取失败 - 别用「直接双击打开 HTML」——这时
fetch、import、甚至部分localStorage行为都会被浏览器策略拦掉
按钮点击事件绑定：用 addEventListener 别碰 onclick 属性
写死 onclick="handleClick()" 看似快，但会污染 HTML、无法传参、不好解绑、跟现代 JS 模块化思路冲突。VS Code 里写 addEventListener 是唯一靠谱路径。
实操要点：
立即学习“前端免费学习笔记（深入）”；
