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 根本不支持伪元素