button是容器元素，支持嵌套SVG、strong、换行等任意HTML内容；input type="submit"是自闭合控件，文案仅限value属性且会作为表单数据提交。
button 是容器元素，input type="submit" 是自闭合表单控件；前者能嵌套任意 HTML，后者只能靠 value 显示纯文本——这不是“能不能用”的问题，而是“要不要让按钮承载语义、图标、状态反馈”的设计选择。
button 为什么能放 svg、strong 和换行？
因为 button 是真正的 HTML 容器节点，它的内容模型是 flow content，和 div 类似。浏览器允许你在里面写任何合法的内联或短语级元素：
<button type="submit"><svg></svg><span>上传文件</span></button><button type="submit">确认<br><small>(不可撤回)</small></button>- 动态更新时可直接操作
innerHTML或appendChild，比如插入加载中spinner元素
input type="submit" 没有子节点概念，所有文案必须塞进 value 属性里，连空格缩进都难控制，更别说响应式图标切换或文字高亮了。
input type="submit" 的 value 会作为表单数据提交
这是最常被忽略的语义差异：当用户点击 <input type="submit" name="action" value="删除">，这个 value 会作为键值对进入表单序列化结果（FormData 或 URL 查询字符串），服务端能拿到 action=删除。
立即学习“前端免费学习笔记（深入）”；
而 <button type="submit" name="action" value="删除">删除</button> 中的 value 属性虽然存在，但现代浏览器（Chrome/Firefox/Safari）**不将其纳入提交数据**；真正提交的是按钮的 textContent 或 innerText（IE 除外，它按 value 提交）。
所以如果你依赖后端判断按钮文字来路由逻辑，用 input 更稳；但若想保持前端文案与提交值解耦（比如按钮显示“保存草稿”，实际提交 status=draft），就得用 button + 隐藏 input 或 JS 手动 append。
flex 布局中基线对齐错位怎么修？
混排 button 和 input 时，常见文字上下偏移——不是 CSS 写错了，是它们默认 vertical-align 基准不同：
-
input type="submit"按文本基线（baseline）对齐，受line-height和字体度量影响大 -
button按内容盒（content-box）对齐，更接近视觉居中 - 解决方法不是硬调
margin，而是统一用align-items: center+display: flex容器，或给input加vertical-align: middle
尤其在按钮组中混用图标按钮（button）和纯文本按钮（input）时，这种错位会非常显眼。
无障碍和焦点管理的实际影响
button 原生支持 :focus-visible，屏幕阅读器默认读出其全部子内容（如“上传文件，SVG 图标”）；input type="submit" 只暴露 value，且无 role 语义扩展能力。
如果按钮需要描述性辅助文本（比如“提交，将跳转到支付页”），button 可直接加 aria-describedby；input 必须额外挂载 aria-label 或关联 label 元素，否则读屏器只报“按钮”两个字。
复杂交互场景（如带下拉菜单的提交按钮、多步骤确认按钮）几乎无法用 input 实现语义完整——它从设计上就不是为这类需求存在的。
真正卡住人的从来不是“哪个能点”，而是当你需要按钮既承载图标又参与表单语义、既要适配屏幕阅读器又要支持 JS 动态注入状态时，input type="submit" 的封闭结构会让你反复绕路。别等压测才发现，button 的灵活性代价只是多敲几个字符，而 input 的“省事”会在第 3 个需求变更时翻倍偿还。
