html - 标签 vs

Question

<button>在设计 UI 时使用 html 标签而不是使用html 标签是不正确的<div class="button">吗？在实现中，我没有注意到这两种方法之间的区别，并且<button>看起来更语义化，但我不确定它是否仅用于在表单中使用。该按钮不会在表单中。使用<div>标签似乎是制作按钮（引导程序）的最常见方式，但我不知道为什么。这有什么技术原因吗？

Answer 1

最好使用<button>而不是<div>或任何其他元素来表示按钮。“type”属性在这里很重要，应该是 type="button"，没有它，默认值是submit在表单之外没有意义。

是的，顺便说一句，有<button>一个表格的外部是非常好的。

很多时候，在设计 UI 时，<a>标签是最合适的元素，它是有意义的，但<button>对于通过 javascript 执行操作来说非常好（而且确实是预期的）。

使用<div>标签似乎是制作按钮（引导程序）的最常见方式，但我不知道为什么。

我真的没有看到这方面的证据，老实说，他们做什么并不重要。bootstrap 框架倾向于忽略语义，例如尽管使用空元素只是出于表示原因，例如<li class="divider"></li>.

Answer 2

从可用性的角度来看，最好根据浏览器处理交互性的方式来<button>实现。<div><a>

如果您的用户是草率的点击者并且他们错误地点击并拖动，或者在触摸屏上，他们最终可能会选择<div>内容而不是触发点击事件。使用<button>会大大减少这个问题。

但是，像<div>'s 这样的非按钮对象在应用 CSS 时会更加灵活。尤其是在较旧的浏览器中。