使用<p><a>模拟的按钮与原生<button>标签有哪些差异？

核心语义与默认行为差异 #

• 元素本质不同：<a>是超链接元素，默认语义是导航跳转，即使添加了role="button"做无障碍适配，底层属性依然是链接，搜索引擎抓取时会默认识别为导航资源；<button>是原生交互控件，天生语义为「可点击触发操作的按钮」，不需要额外属性就能被屏幕阅读器、搜索引擎正确识别。
• 默认行为不同：<a>标签如果未在点击事件中阻止默认行为，即使没有写href属性，部分老旧浏览器点击后也会自动跳转到页面顶部；<button>仅在<form>表单内时默认会触发提交行为，非表单场景下无额外默认动作，更适合绑定自定义业务逻辑。

交互适配差异 #

• 原生键盘操作支持不同：原生<button>聚焦后，按回车、空格都可以触发点击事件，完全符合W3C无障碍规范；<a>标签默认仅支持按回车触发点击，按空格不会执行绑定的onclick逻辑，需要额外写JS做适配才能达到和按钮一致的交互体验。
• 降级表现不同：如果Bootstrap样式加载失败，<a>会直接显示为默认带下划线的超链接样式，用户可能无法识别这是操作按钮；<button>会保留系统原生按钮的外观，依然可以正常识别和操作。

性能影响 #

两者的性能差异几乎可以忽略不计，不存在可感知的页面加载、运行效率差距。唯一极其微小的差异是：使用<a>模拟按钮需要额外添加role属性、额外编写默认行为拦截和键盘交互适配代码，会多占用几字节的代码体积，完全不会影响实际使用体验。

最佳实践 #

• 点击后需要跳转页面、跳转到锚点的场景，优先用<a>加Bootstrap的btn类实现，符合元素语义
• 点击后触发页内逻辑、表单提交/重置的场景，优先用原生<button>，语义更清晰，适配成本更低，出问题的概率更小

内容的提问来源于stack exchange，提问作者Joe