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" 才禁用提交。

• <input> 等价于 <input type="submit">（不是 button）
• <button>点我</button> 等价于 <button type="submit">点我</button>
• 想确保不提交？两个标签都得显式写 type="button"

可访问性与脚本操作：button 支持 innerHTML，input 只能改 value

动态更新按钮文字或图标时，button 可直接操作 innerHTML 或插入元素，input 只能改 value 属性——这会影响 screen reader 对内容的读取方式，尤其当按钮含图标+文字组合时。

Comet AI 浏览器

下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。

下载

<button id="btn"><i class="icon-refresh"></i> 刷新</button>
<input id="inp" type="button" value="刷新">

如果运行 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 属性才是关键。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！