button是浏览器和辅助技术识别交互意图的最小语义单元，必须用于表单提交、键盘操作、可访问性支持等场景，不可用div模拟。
button 标签不是“看起来像按钮就行”，而是浏览器和辅助技术识别交互意图的最小语义单元。用 div 或 span 加 onclick 模拟按钮，等于主动放弃默认行为、可访问性支持和表单集成能力。
为什么 button 必须用在表单提交场景
表单内点击 button（且未设置 type）默认触发 submit，无需额外绑定事件或阻止默认行为。而 div 点击后必须手动 event.preventDefault() + form.submit()，稍有遗漏就会刷新页面。
-
button在form内自动成为提交控件，type="submit"是隐式值 -
input type="submit"功能等价但不可嵌套内容，button支持图文混排 - 按回车键聚焦在
button上时，也会触发提交；div完全无此能力
键盘操作失效？大概率没用 button
视障用户依赖 Tab 键顺序导航、空格/Enter 触发操作。只有原生 button 自带 tabindex="0" 和按键响应逻辑。用 div 实现时，必须手动加 tabindex="0"、监听 keydown、过滤非 Enter/Space 键——漏掉任一环节，键盘用户就卡死。
-
button默认可聚焦、可激活，div默认不可聚焦 - 屏幕阅读器会把
button读作“按钮”，把div role="button"读作“按钮角色”，后者需额外声明且易出错 - 部分旧版 IE 对
role="button"支持不稳定，button兼容性更稳
button 的 type 属性不能省略
不写 type 时，button 在 form 内默认为 submit，这常导致意外提交。实际开发中，三类值必须显式声明：
-
type="button"：纯 JS 触发，不参与表单提交 -
type="submit"：明确用于提交表单 -
type="reset"：重置表单字段（慎用，多数情况应避免）
省略 type 不是“省事”，是埋雷——尤其在组件库中动态渲染 button 时，容易因上下文变化导致行为突变。
立即学习“前端免费学习笔记（深入）”；
禁用状态要靠 disabled，不是 CSS
用 class="disabled" 配合 pointer-events: none 只是视觉禁用，无法阻止键盘聚焦、JS 调用 .click()、也无法被屏幕阅读器感知。真正的禁用必须用原生 disabled 属性：
-
button[disabled]自动移除焦点、忽略所有鼠标/键盘事件 - 屏幕阅读器会读出“按钮，已禁用”
- 表单序列化时自动跳过
disabled的button，避免误传数据
样式覆盖不影响语义，但别用 display: inline 破坏块级行为
button 默认是 inline-block，能自然包裹内容、响应内外边距。强行设为 display: inline 后，vertical-align 和 padding 表现异常，尤其在多行文字或图标组合时易错位。这不是语义问题，但会间接导致开发者为“修样式”而改用 div，进而丢失语义。
- 用
appearance: none重置默认样式更安全 - 需要弹性布局时，直接对
button设display: flex即可，无需外包div - 若真要
inline行为，优先考虑a标签（配合href="#"+preventDefault），而非降级为div
button，是在团队协作中守住它不被“方便地替换成 div”。每次删掉一个 role="button"，换回原生 button，都是在降低未来某次无障碍审计或表单重构的成本。 
