html-制作按钮-<button>或<div>?

我想知道网页上的按钮使用什么html元素-我想像Twitter一样设置“按钮”的样式。 例如:

[HTTP://Twitter.com/Twitter]

tweet列表底部的“更多”按钮-是<button>元素还是<div>元素? 我想知道该使用哪个。 我认为无论是<button>还是<div>555,我们都可以提供翻转状态以及所有这些东西来使它看起来令人愉悦?

user246114 asked 2020-08-01T08:30:53Z
6个解决方案
106 votes

不要使用<div>标签制作可点击的元素。 使用<a><button>元素。 这使禁用了JavaScript的浏览器可以按预期与它们进行交互。 即使您的功能需要JavaScript并且没有合理的默认行为,您也可以分配给<a>,无论使用它,它都可以使用-它传达了“可点击”的语义。

通常,选择最能描述其内容功能的标签,而不是最能描述其内容外观的标签,并避免使用不必要的<div>标签,以免您的文档遭受三叉戟。

meagar answered 2020-08-01T08:31:19Z
8 votes

Twitter上的“更多”按钮是<a>,具有背景图片,CSS3圆角和边框。 这是完整的CSS(元素为<a>):

<a>
<a>

您应该使用<a><button>,而不是<div>

bcherry answered 2020-08-01T08:31:44Z
1 votes

通常,您想使用<a>进行导航,并使用<button>进行该屏幕上的某些操作。

我能想到的是,在测试期间首选<button><a>标记而不是<anything-else>标记的最佳原因是,在测试过程中,它更易于定位可操作的项目。 我以Capybara和Rspec为例,当方法click_on引用<button>时,其方法更可靠,与方法click_link<a>相同。

这里给出的其他原因也很好:语义,屏幕阅读器等。

务实的是,您的听众将决定页面上的每个元素是否都是真正的<button>,或者您是否想与其他Web开发生态系统一起玩。 这可能仅取决于您的观众是否都使用X浏览器。

一个陷阱:由于<button>可以提交表单,或者<a>带您进入另一页,因此您必须确保阻止这些默认操作。 在处理点击的JavaScript函数中,您必须指定它仅执行您编程的操作。

function onClickEvent(e)
{
  e.preventDefault();
  // What you want to do instead
}
fet answered 2020-08-01T08:32:23Z
1 votes

如果您想使用<div>而不是<button>来实现所见即所得的编辑器或其他功能,请不要忘记在下面添加样式,因为<button>标记不会删除选择,而div会删除。

否则它将以意外的行为使您感到惊讶:)

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Eugene answered 2020-08-01T08:32:47Z
0 votes

使用a标记而不是button。我的推理涉及较旧版本IE的兼容性问题(IE6讨厌button标记)。

<button>与<input type =“ button” />。 使用哪个?

Ballsacian1 answered 2020-08-01T08:33:12Z
-2 votes

我建议使用CSS样式的<input id="Button1" type="button" value="button" />,以提供您要寻找的外观。

Germ answered 2020-08-01T08:33:32Z
translate from https://stackoverflow.com:/questions/2777256/making-buttons-button-or-div