HTML5需JavaScript实现交互，用addEventListener绑定事件并确保DOM加载完成；表单提交需preventDefault并用fetch发请求；file://协议下API受限，应使用本地服务器。
HTML5 本身不处理交互逻辑，真正让网页动起来的是 JavaScript —— 直接写 onclick 或用 addEventListener 绑定事件才是关键动作。
怎么给按钮加点击响应（不用框架）
很多人以为写个 就能“交互”，其实它默认什么也不做。必须通过 JavaScript 主动监听。
- 用
addEventListener是现代推荐方式，比直接写onclick="xxx()"更灵活、可复用 - 别在 HTML 里内联写函数调用，比如
，调试难、不易维护 - 确保 DOM 加载完再绑定事件，否则
document.getElementById("btn")可能返回null
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("myBtn").addEventListener("click", () => {
alert("点到了");
});
});
表单提交不跳转页面怎么实现
默认 提交会刷新页面，要“动态”就得拦截它，并用 JavaScript 发请求。
- 必须在事件回调里调用
event.preventDefault()，否则页面照常跳转 - 后端接口要用
fetch或XMLHttpRequest调用，不是靠action属性自动发 - 注意 CORS：如果接口域名和当前页不同，服务端没配
Access-Control-Allow-Origin就会静默失败
form.addEventListener("submit", (e) => {
e.preventDefault();
fetch("/api/login", {
method: "POST",
body: new FormData(form)
});
});
为什么本地双击打开的 HTML 文件里 JS 不工作
这是新手高频踩坑：用文件管理器双击打开 index.html，地址栏是 file:///...，这时 fetch、localStorage 甚至部分 canvas 操作会被浏览器限制。
- Chrome 等浏览器对
file://协议禁用跨域相关 API，fetch直接报Failed to fetch - 解决方法只有起一个本地服务，比如用
npx serve、python3 -m http.server，或 VS Code 的 Live Server 插件 - 不要花时间查“为什么 fetch 不执行”，先看地址栏是不是
http://开头
交互的核心从来不在标签有多新，而在于你是否清楚每个事件触发时机、每个 API 的约束条件，以及浏览器实际执行时的环境限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
