Html 制作按钮 - <button> 还是 <div>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2777256/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making buttons - <button> or <div>?
提问by user246114
I'm wondering what html element to use for buttons on a web page - I'd like to style my 'buttons' like twitter does. For example:
我想知道网页上的按钮使用什么 html 元素 - 我想像 twitter 一样设置我的“按钮”的样式。例如：
the "more" button at the bottom of the tweet listing - is that a <button>element, or a <div>element? I'd like to know which to use. I think for either <button>or <div>we can supply rollover states and all that stuff to make it look pleasant?
推文列表底部的“更多”按钮 - 这是一个<button>元素还是一个<div>元素？我想知道用哪个。我认为，对于任何一个<button>或者<div>我们可以提供翻滚状态和所有的东西，使它看起来愉快？
回答by meagar
Don't use <div>tags to make clickable elements. Use <a>or <button>elements. This enables browsers with JavaScript disabled to interact with them as expected. Even if your functionality requires JavaScript and there is no reasonable default behaviour you can assign to an <a>, use it regardless - it conveys "clickable" semantics.
不要使用<div>标签来制作可点击的元素。使用<a>或<button>元素。这使禁用 JavaScript 的浏览器能够按预期与它们交互。即使您的功能需要 JavaScript 并且没有合理的默认行为可以分配给<a>，但无论如何都要使用它 - 它传达了“可点击”语义。
In general, choose the tag that most closely describes the functionof its content, not the appearance of its content, and avoid unnecessary <div>tags lest your documents suffer from divitis.
一般来说，选择最能描述其内容功能而不是其内容外观的<div>标签，避免不必要的标签，以免您的文档遭受分裂。
回答by bcherry
The "more" button on Twitter is an <a>with a background-image, CSS3 rounded corners, and a border. Here's the complete CSS (elem is <a class="more round">):
Twitter 上的“更多”按钮是一个<a>带有背景图像、CSS3 圆角和边框的按钮。这是完整的 CSS（元素是<a class="more round">）：
.more {
outline: none;
display: block;
width: 100%;
padding: 6px 0;
text-align: center;
border: 1px solid #ddd;
border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa;
background-color: #fff;
background-repeat: repeat-x;
background-position: left top;
font-size: 14px;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
height: 22px;
line-height: 1.5em;
margin-bottom: 6px;
background-image: url('/images/more.gif');
}
.more:hover {
border: 1px solid #bbb;
text-decoration: none;
background-position: left -78px;
}
.more:active {
color: #666;
background-position: left -38px;
}
.round {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<a href="#" class="more round">Sample Button</a>You should use <a>or <button>, not <div>.
您应该使用<a>or <button>，而不是<div>。
回答by fet
In general you want to use <a>for navigation and <button>for some action that takes place on that screen.
通常，您希望<a>用于导航和<button>在该屏幕上发生的某些操作。
The best reason I can think of to prefer a <button>or <a>tag to <anything-else>is that during testing, it makes it easier to locate the actionable items. I use Capybara and Rspecfor example, and the method click_onworks a lot more reliably when it refers to a <button>, the same with the method click_linkand <a>.
我能想到的更喜欢 a<button>或<a>tag的最好原因<anything-else>是，在测试期间，它可以更容易地找到可操作的项目。例如，我使用Capybara 和 Rspec，该方法click_on在引用 a 时工作得更可靠<button>，与方法click_link和<a>.
The other reasons given here are also good: semantics, screen readers, etc.
这里给出的其他原因也很好：语义、屏幕阅读器等。
Pragmatically, your audience will decide if every single element on your page is a really fancy <div>or if you want to play nice with the rest of the web dev ecosystem. It may simply depend on whether your audience all uses X browser or not.
实际上，您的受众将决定您页面上的每个元素是否真的很花哨，<div>或者您是否想与 Web 开发生态系统的其余部分打得很好。这可能仅取决于您的观众是否都使用 X 浏览器。
One gotcha: Since a <button>could submit a form or <a>take you to another page, you have to make sure to prevent those default actions. In the JavaScript function that handles the click, you have to specify that it only does the action you program.
一个问题：由于 a<button>可以提交表单或<a>将您带到另一个页面，因此您必须确保阻止这些默认操作。在处理点击的 JavaScript 函数中，您必须指定它只执行您编程的操作。
function onClickEvent(e)
{
e.preventDefault();
// What you want to do instead
}
回答by Eugene
If you want to use <div>instead of a <button>for WYSIWYG editor or something, don't forget to add styles below, because a <button>tag does not remove selection, but div does.
如果你想使用WYSIWYG 编辑器之类的<div>代替<button>，不要忘记在下面添加样式，因为<button>标签不会删除选择，但 div 会。
Or it will surprise you with an unexpected behavior :)
或者它会以意想不到的行为让你感到惊讶:)
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
回答by Ballsacian1
Use an atag instead of button. My reasoning involves compatibility issues with older version of IE (IE6 hates the buttontag).
使用a标签而不是button. 我的推理涉及与旧版本 IE 的兼容性问题（IE6 讨厌该button标签）。
回答by Germ
I'd suggest <input id="Button1" type="button" value="button" />with a css style to give the appearance that you're looking for.
我建议<input id="Button1" type="button" value="button" />使用 css 样式来提供您正在寻找的外观。
