button 和 input[type="button"] 视觉相似但语义、DOM结构、可访问性及样式行为不同：button支持嵌套内容和innerHTML，input仅value；两者默认均提交，须显式设type="button"；button样式更可控，伪元素不支持，表单序列化中均不参与提交。
button 和 input[type="button"] 渲染效果几乎一样，但 DOM 结构和语义完全不同
浏览器默认把两者都渲染成可点击的矩形控件，视觉上难区分，但 button 是双标签、支持嵌套内容；input 是自闭合标签、只能靠 value 属性显示文字。这意味着：button 内能放 img、span 甚至图标字体，input 只能显示纯文本。
表单提交行为差异：button 默认不提交，input[type="button"] 也一样，但容易误配 type
很多人以为 input 更“安全”，其实两者默认都不会触发表单提交——前提是没写错 type。真正危险的是：input 不显式声明 type="button" 时，浏览器会按 type="submit" 处理（HTML5 规范），而 button 默认就是 type="submit"，必须手动写 type="button" 才禁用提交。
-
等价于（不是 button） -
等价于 - 想确保不提交？两个标签都得显式写
type="button"
可访问性与脚本操作：button 支持 innerHTML，input 只能改 value
动态更新按钮文字或图标时，button 可直接操作 innerHTML 或插入元素，input 只能改 value 属性——这会影响 screen reader 对内容的读取方式，尤其当按钮含图标+文字组合时。
如果运行 document.getElementById('btn').innerHTML = '已刷新'，图标会消失但文字更新；而 document.getElementById('inp').value = '已刷新' 只能换文字，无法加图标或样式节点。
立即学习“前端免费学习笔记（深入）”；
样式兼容性细节：button 的 padding 和 line-height 行为更可控
button 元素原生支持 line-height 垂直居中，且内边距对齐更稳定；input[type="button"] 在旧版 IE 中常出现文字上下偏移、padding 被截断等问题。现代浏览器虽已收敛，但若需精确控制高度/圆角/阴影，button 的盒模型表现更可预测。
- 统一高度需求下，
button推荐设height+line-height -
input设height后，内部文字常需额外vertical-align调整 - 所有浏览器中，
button的::after伪元素不可用，input根本不支持伪元素
button 和 input 在表单序列化（如 FormData 或 jQuery .serialize()）中的行为一致——它们都不参与提交，除非 type 是 submit 或 image。别只看标签名，盯紧 type 属性才是关键。 
