html 是声明式标记语言，不执行交互逻辑；所有交互必须由 javascript 驱动，如按钮点击、表单提交、动态行为等均需 js 绑定事件或控制流程。

HTML 不是交互开发工具，它是网页内容结构的声明式标记语言——所有交互（点击、输入、动画）都必须依赖 JavaScript 驱动，HTML 本身不执行任何逻辑。

为什么写 <button></button> 不会自动响应点击

HTML 的 <button></button> 标签只定义“这里有个按钮”，它不包含点击行为。浏览器渲染后，这个元素只是 DOM 树上的一个节点，没有监听器、没有回调、不触发任何事件。

常见错误现象：

• 页面上写了 <button>提交</button>，但点击毫无反应
• 以为加了 onclick="alert(1)" 就算“会交互”，却没意识到这是在混用 HTML 属性调用 JavaScript，本质仍是 JS 在工作

正确做法：

• 用 HTML 搭好结构：<button id="submitBtn">提交</button>
• 用 JavaScript 绑定行为：document.getElementById("submitBtn").addEventListener("click", () => { /* 处理逻辑 */ });
• 避免内联 JS（如 onclick），便于维护和调试

<form></form> 提交不是“自动交互”，而是浏览器默认行为

<form></form> 标签本身不会发送数据，它只是告诉浏览器：“接下来的内容是一组可提交的控件”。是否提交、提交到哪、怎么提交，全由属性控制。

关键参数差异：

• method：决定 HTTP 方法（"get" 或 "post"），影响数据可见性与长度限制
• action：指定接收数据的 URL；留空则提交给当前页面地址
• enctype：上传文件时必须设为 "multipart/form-data"，否则 <input type="file"> 无法工作

容易踩的坑：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 没写 action 又没用 JS 阻止默认行为 → 表单提交刷新页面，用户输入丢失
• 用 method="get" 提交敏感信息 → 数据暴露在 URL 中，被记录、缓存、分享
• 忘记给 <input> 加 name 属性 → 该字段根本不会被提交

HTML 语义化标签（如 <nav></nav>、<main></main>）对交互没直接影响，但决定 JS 能否可靠操作

这些标签不改变视觉表现，也不自带功能，但它们让 DOM 结构更清晰，使 JavaScript 查询和操作更稳定。

使用场景：

• 用 document.querySelector("main") 替代 document.getElementById("content")，减少对 ID 的强依赖
• 屏幕阅读器靠 <nav></nav> 快速定位导航区，提升可访问性（间接影响交互体验）
• 未来 CSS 选择器或 JS 框架可能基于语义标签做优化（如 main:has(:focus-visible)）

性能影响很小，但兼容性需注意：

• IE8 及更早版本不识别 <section></section> 等新标签，需用 document.createElement “注册”或引入 html5shiv
• 所有现代浏览器（Chrome/Firefox/Safari/Edge）均原生支持，无需 polyfill

HTML 属性里哪些能触发行为？哪些只是“摆设”

HTML 属性分两类：一类是纯配置（如 src、href、alt），一类是布尔开关（如 disabled、required、checked）。但没有一个属性能“独立完成交互”。

典型误区：

• 以为 required 会自动弹窗提示 → 实际只触发浏览器原生校验 UI（且可被绕过），真正拦截仍需 JS 监听 submit 事件
• 以为 autofocus 能保证焦点获取 → 在某些移动端或 iframe 场景下失效，需配合 element.focus() 补充
• contenteditable="true" 让元素可编辑，但复制粘贴、撤销重做、光标位置等高级行为仍需 JS 协助

真正起作用的只有两个“行为型”属性：

• href（配合 <a></a>）：点击后跳转或触发下载，是唯一原生导航能力
• src（配合 <script></script>、<img>、<iframe></iframe>）：触发资源加载，但加载完成后的处理仍要靠 JS（如 onload）

复杂交互永远绕不开 JavaScript —— HTML 只负责“把东西放对地方”，JS 才负责“让它动起来”。别指望靠堆砌 HTML 属性实现完整功能，那只会让代码难以调试、不可预测。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！