Question

我想知道用于网页按钮的html元素 - 我想像twitter一样设置我的'按钮'。例如：

推文列表底部的“更多”按钮 - 是<button>元素还是<div>元素？我想知道使用哪个。我认为对于<button>或<div>我们可以提供翻转状态和所有这些东西以使其看起来令人愉快吗？

Answer 1

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

通常，选择最贴切描述其内容的功能的标记，而不是其内容的外观，并避免使用不必要的<div>标记，以免文档受到{{3 }}

Answer 2

Twitter上的“更多”按钮是<a>，带有背景图片，CSS3圆角和边框。这是完整的CSS（elem是<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>

您应该使用<a>或<button>，而不是<div>。

Answer 3

一般情况下，您希望<a>用于导航，而<button>用于在该屏幕上执行的某些操作。

我可以考虑选择<button>或<a>代码到<anything-else>的最佳原因是，在测试期间，可以更轻松地找到可操作的项目。我使用Capybara and Rspec作为示例，方法click_on在引用<button>时更加可靠，与方法click_link和<a>相同

这里给出的其他理由也很好：语义，屏幕阅读器等。

务实地，您的受众群体将决定您网页上的每个元素是否真的很<div>，或者您是否希望与其他网络开发生态系统保持良好关系。它可能仅取决于您的受众是否都使用X浏览器。

一个问题：由于<button>可以提交表单或<a>将您带到另一个页面，因此您必须确保阻止这些默认操作。在处理点击的JavaScript函数中，您必须指定它只执行您编写的操作。

function onClickEvent(e)
{
  e.preventDefault();
  // What you want to do instead
}

Answer 4

如果您想使用<div>代替<button>作为WYSIWYG编辑器，请不要忘记在下面添加样式，因为<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;

Answer 5

使用a代码而不是button。我的推理涉及旧版IE的兼容性问题（IE6讨厌button标签）。

<button> vs. <input type="button" />. Which to use?

Answer 6

我建议使用css样式的<input id="Button1" type="button" value="button" />来提供您正在寻找的外观。

制作按钮 - <按钮>或<div>？</div> </button>

6 个答案: