最安全写法是显式写<button type="button">，因浏览器默认type不一致易致意外提交；优先用<button>而非<input type="button">，因其支持HTML嵌套；需重置CSS并规范JS绑定。
直接用 <button> 标签，显式写上 type="button"，别省略。这是最安全、最可控、语义最清晰的写法。
为什么不能省略 type 属性
<button> 在不同浏览器中默认行为不一致：Chrome 和 Firefox 默认是 submit，但某些旧版 Safari 或 WebView 可能表现异常。如果按钮意外嵌在 <form> 里又没设 type，点一下就触发表单提交，后端可能收到空数据或报错。
- 显式写
<button type="button">取消</button>，彻底切断默认提交逻辑 - 表单内需要提交时，只对明确要提交的按钮写
type="submit"，其他一律用type="button" - 哪怕按钮不在
<form>里，也建议统一加type——避免未来重构时漏改、埋雷
<button> 和 <input type="button"> 怎么选
优先用 <button>，除非你还在维护 IE8 以下的老系统（现在基本没有）。
-
<button>支持内部嵌套 HTML，比如图标 + 文字：<button type="button"><svg>...</svg> 导出</button> -
<input type="button">只能靠value显示纯文本，没法加<img>或<span> - 两者都支持
disabled、name、id等常用属性，JS 绑定方式完全一样 - 若按钮需放在表单内且仅作 UI 控制（如“展开更多”），仍必须用
<button type="button">，否则可能干扰表单 submit/reset 流程
美化按钮时最容易忽略的 CSS 兼容点
按钮是 display: inline-block，但它的盒模型和默认边框/内边距在各浏览器中差异明显，尤其在移动端。
立即学习“前端免费学习笔记（深入）”；
- 务必重置
border和padding：button { border: none; padding: 0.5em 1em; } - 不要只靠
height控制高度——文字垂直居中会出问题，改用line-height或flex布局更稳 - 禁用系统默认样式：
-webkit-appearance: none; appearance: none;，否则 iOS 上按钮圆角/阴影不可控 - 点击反馈别只靠
:hover，移动端没 hover，得加:active和touch-action: manipulation
JavaScript 绑定 click 的两个硬性要求
不管用哪种 HTML 写法，JS 事件绑定必须满足这两条，否则在部分安卓 WebView 或低版本 Edge 中会失灵。
- 按钮必须有明确的
id或可稳定选取的 class，避免用document.getElementsByTagName('button')[0]这类脆弱索引 - 必须用
addEventListener('click', handler)，禁用onclick="..."内联写法——后者在 CSP（内容安全策略）严格模式下直接被拦截 - 如果按钮是动态插入的（比如通过
innerHTML），记得在插入后立即绑定，或用事件委托到父容器 - 处理函数开头加
event.preventDefault()是保险做法，哪怕按钮类型已是type="button"——防止未来某天被误包进 form
真正麻烦的不是怎么写按钮，而是它在表单里“看起来没包”，其实被某个看不见的 <form> 标签包裹了三层；或者美化时忘了关 appearance，结果 iOS 上按钮自带灰色背景盖不住。这些细节不查 DOM 结构根本发现不了。
