不写type属性时button默认为submit，导致意外提交和页面刷新；必须显式声明type="button"以避免该坑，因其支持嵌套HTML、样式可控、可访问性好，而input type="button"仅限纯文本且兼容性差。
不写 type 属性时，button 会意外提交表单
这是上线后最常导致页面刷新、数据丢失的坑。W3C 规范明确规定：button 默认 type="submit"；而 IE 系统（尤其旧版）默认却是 type="button"。开发时在 IE 或 Edge 浏览器里点着没事，一上生产环境，Chrome/Firefox 用户点一下就触发表单提交。
安全写法只有一条：<button type="button">取消</button>。哪怕你用 JS 绑定 click 事件，也得先堵住这个默认行为。
input type="button" 没这个问题——它的 type 是必填属性，浏览器不会“猜”，没写 type 就直接当 type="submit" 处理（HTML5 规范），但实际中几乎没人漏写，所以反而更“省心”。
button 支持嵌套 HTML，input type="button" 只能靠 value
想加 SVG 图标、换行、<strong> 加粗文字、甚至动态插入 <span class="loading">？只有 button 能做到：
立即学习“前端免费学习笔记（深入）”；
<button type="button"> <svg aria-hidden="true"><use href="#icon-download"></use></svg> <span>下载报告</span> </button>
input type="button" 只能这样写：<input type="button" value="下载报告">。你往 value 里塞 HTML 字符串，浏览器原样显示为文本，不会解析。
动态更新时：btn.innerHTML = '已生成 ✓' 有效；inp.value = '已生成 ✓' 只能改文字，图标、状态标记全丢。
样式控制和伪元素支持差异极大
button 原生支持 ::before / ::after，加箭头、状态徽章、加载点都很自然：
button::after {
content: "→";
margin-left: 4px;
}
input type="button" 不支持伪元素。想实现同样效果，要么加额外 DOM 节点（破坏语义），要么用背景图（难对齐、缩放失真）。
其他样式细节也不同：button 的 padding、line-height 行为跨浏览器一致；input type="button" 在 IE8–10 中常出现文字垂直偏移、line-height 失效、边框计算方式异常（border 算在 width/height 外）。
表单序列化和可访问性表现不一致
只要 type 不是 submit 或 image，两者都不会出现在 FormData 或 $('form').serialize() 结果里——这点相同。
但如果你给 button 加了 name 和 value 属性，IE 会把标签内文本（如 <button name="act" value="del">删除</button> 中的“删除”）当提交值，Chrome 则用 value 属性值。这种分裂行为必须避开：别用 button 的 name/value 传参，改用 data-action 或 JS 显式取值。
可访问性方面：button 内部结构（图标 + 文字 + aria-label）被屏幕阅读器识别更准确；input type="button" 需额外补 aria-labelledby 才能等效，维护成本高。
button 的灵活性和语义优势压倒性胜出，但那个漏写 type="button" 的习惯性疏忽，足以让整个交互链路崩掉。不是选哪个“更好”，而是选哪个“更不容易出错”——答案永远是显式声明 type 的 button。 
