1. button与input的基本区别
1.1 语义与行为的差异
本篇文章聚焦 HTML按钮类型全解析，深入对比 button 与 input 的区别、适用场景与最佳实践。button是一个容器元素，可以容纳文本、图标和复杂的 HTML 结构，以实现自定义文本与布局的按钮显示。相比之下，input是一个自闭合控件，通常通过value属性来定义显示文本，不能嵌套其他 HTML 元素。
重要点在于：button的内容决定其显示文本，且可以包含子元素；input不能包含子节点，显示文本由value属性决定（除了其他输入类型的文本提示）。
在表单中的默认行为也有所不同：如果将 button 放在 form 内且未显式设置 type，它通常会作为 submit 按钮；而 input 的按钮行为取决于它的 type，包括 button、submit、reset 三种常见类型。
此外，button可以嵌套图标、文本以及其他子节点，具有更强的自定义排版能力；input在文本标签方面受限，通常只能通过 value 来显示文本。
2. button与input在不同场景中的适用性
2.1 适用场景总览
在简单提交场景中，input type="submit" 的标签表达清晰且与表单结构耦合紧密，兼容性极好；如果你需要一个带有图标、文本混排或需自定义状态的按钮，推荐使用 button，因为它是一个可嵌套的容器，便于自定义内容与交互。
对于无障碍设计与可访问性，确保按钮有清晰的文本描述，或者为只含图标的按钮提供 aria-label，以便屏幕阅读器正确朗读按钮的作用。button 的默认焦点样式与键盘交互通常更直观，便于实现一致的无障碍体验。
两者都支持通过 form 属性将按钮与表单关联，即使它们不在同一个 form 标签内，也能实现灵活的布局与提交行为。
另外，image 类型的 input 也可用作图像按钮，提交时可传递点击坐标等信息，但在可访问性与灵活性方面通常不如带文本的按钮。
3. HTML 按钮类型的最佳实践与实现技巧
3.1 一致性命名与无障碍设计
在大型项目中，推荐对按钮使用一致的命名和样式系统。通过 统一的按钮类名（如 .btn、.btn-primary）可以让不同类型的按钮保持一致的外观与行为，降低维护成本，并提升 SEO 与可访问性间的协同性。
对于无障碍性，确保所有按钮都具备清晰的文本描述，或者为仅含图标的按钮提供 aria-label，避免仅以图标传达功能。与此同时，使用键盘可访问的焦点样式，确保用户在键盘导航时能清晰看到当前聚焦的按钮。
标签选择与表单行为的组合要清晰明确：若按钮的作用是提交或重置表单，请显式设置 type="submit" 或 type="reset"，避免因浏览器的默认行为差异而导致提交问题；在需要时，通过 form 属性将按钮关联到正确的表单，使布局更自由。
/* 基本按钮样式，确保可重复使用 */
.btn {display:inline-flex;align-items:center;justify-content:center;padding:.5em 1em;border:1px solid #ccc;border-radius:6px;background:#fff;color:#333;cursor:pointer;
}
.btn-primary {background:#0055ff;color:#fff;border-color:#0055ff;
}
.icon-btn .icon {width:1em;height:1em;margin-right:.5em;background:currentColor;
}
