html不是交互基石，仅定义结构；button无点击响应因未绑定js事件，交互须由javascript通过addeventlistener等驱动。
HTML 不是页面交互的基石代码逻辑，它压根不处理逻辑，也不驱动交互——它是结构骨架，仅此而已。
为什么
浏览器渲染 <button>提交</button> 后，DOM 里确实多了一个节点，但它默认没有任何事件监听器，也不执行任何函数。所谓“点不动”，本质是没绑定 JS 行为。
- 常见错误：只写 HTML 标签，以为加了
onclick属性就算完成交互 → 实际是混用内联 JS，调试困难、逻辑散落 - 正确路径：用
id或class标识元素，再用addEventListener()绑定函数 - 示例：
<button id="saveBtn">保存</button>
document.getElementById("saveBtn").addEventListener("click", () => { console.log("已触发"); });
form 提交刷新页面，是不是 HTML 的锅
不是。<form></form> 本身不发送请求，它只是容器；刷新是浏览器对默认提交行为的响应。是否刷新、提交到哪、传什么数据，全由属性和 JS 控制。
- 关键配置：
action（目标地址）、method（"get"或"post"）、enctype（上传文件时必须为"multipart/form-data"） - 容易踩坑：
action空着 + 没调event.preventDefault()→ 页面跳转或刷新，表单数据丢失 - 敏感信息别用
method="get"：参数会暴露在 URL，被缓存、记录、转发
语义化标签（如 <nav></nav>、<main></main>）对交互有没有用
不直接提供点击、输入等行为，但极大影响 JS 操作的稳定性与可维护性。
- 用
document.querySelector("main")比靠 ID 查找更健壮，避免因改 ID 导致脚本断裂 - 屏幕阅读器依赖
<nav></nav>跳转导航区，间接决定键盘焦点流转是否合理 → 影响 tab 键能否正常触达按钮 - CSS 选择器如
main:has(:focus-visible)已开始支持基于语义标签的状态判断，未来 JS 框架也可能据此优化渲染逻辑
真正容易被忽略的是：HTML 的任何“行为感”都来自 JS 的即时介入。哪怕一个最简单的切换 class 动画，也得靠 element.classList.toggle() 驱动——HTML 自身连 class 都不会主动解析成样式或动作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
