优先选 <button>，因其语义更清晰、内容更灵活、样式更可控，支持嵌套元素和现代事件绑定；但需显式设置 type="button" 避免在表单中意外提交。
用 <button> 还是 <input type="button">？优先选 <button>
两者都能触发点击行为，但 <button> 语义更清晰、内容更灵活、样式更可控。浏览器默认把 <input type="button"> 渲染为“无文字按钮”，内部无法嵌套标签，连换行都做不到；而 <button> 是真正的容器元素，能放图标、<span>、甚至 SVG。
<button> 的内容和事件绑定更可靠
常见错误是把事件写在 <input type="button"> 的 onclick 上却忘了加引号或拼错函数名，结果点不动——其实问题常出在 HTML 解析阶段：比如写成 <input type="button" onclick=doSubmit()>（缺引号），某些浏览器会直接忽略。而 <button> 对内联事件容忍度略高，更重要的是它天然支持现代写法：
- 用
addEventListener绑定更安全，避免全局污染 - 可以配合
form属性指向任意表单，不局限于父级<form> - 点击时自动获得
:focus-visible状态，无障碍体验更好
<input type="button"> 唯一还值得用的场景
只有当项目受限于老旧系统（比如 IE8 或某些嵌入式 WebKit 内核）且无法升级 DOM 结构时，才考虑 <input type="button">。它的优势仅剩一点：表单序列化时不会被 form.serialize() 类方法误读（因为 <button> 默认 type="submit"，若没显式写 type="button"，点一下可能意外提交表单）。
所以实际使用中必须注意：
立即学习“前端免费学习笔记（深入）”；
-
<button>标签务必显式声明type="button"，否则在<form>内点击会触发表单提交 -
<input type="button">没有value以外的文本内容，想加图标只能靠 CSS::before，维护成本高 - 两者在 flex 布局中的基线对齐行为不同：
<input>默认按字符底线对齐，<button>按内容盒对齐，混用容易错位
别忽略表单上下文里的默认行为差异
最常踩的坑不是样式，而是语义隐含的行为。比如在 <form> 里写：<button>提交</button>，不加 type 就是 type="submit"；而 <input type="button"> 天然不会提交。反过来，如果用 <button type="reset">，它真会清空表单——<input type="button"> 则完全没这个能力。
也就是说，选哪个不只是“长得像不像”，而是“它打算干什么”。一旦涉及表单控制流，漏掉 type 属性或者混淆两者的默认行为，调试时很难一眼看出问题出在哪。
