我可以使用 HTML5 将 <button> 元素嵌套在 <a> 中吗？

Question

我正在做以下事情：

  <a href="www.stackoverflow.com">
   <button disabled="disabled" >ABC</button>
 </a>

这很好用，但我收到一个 HTML5 验证错误，提示“元素‘按钮’不能嵌套在元素‘按钮’中。

谁能给我建议我应该做什么？

原文由 Marie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不，根据 W3C 的 HTML5 规范文档，它不是有效的 HTML5：

内容模型： 透明，但不得有 交互式内容 后代。

a 元素可以环绕整个段落、列表、表格等，甚至整个部分，只要其中没有交互式内容（例如按钮或其他链接）。

换句话说，您可以将任何元素嵌套在 <a> 中，但以下元素除外：

• <a>

• <audio> （如果存在 控件 属性）

• <button>

• <details>

• <embed>

• <iframe>

• <img> （如果存在 usemap 属性）

• <input> （如果 type 属性不在 隐藏 状态）

• <keygen>

• <label>

• <menu> （如果 type 属性在 toolbar 状态）

• <object> （如果存在 usemap 属性）

• <select>

• <textarea>

• <video> （如果存在 控制 属性）

---

如果您尝试使用链接到某处的按钮，请将该按钮包装在 <form> 标签内，如下所示：

 <form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

但是，如果您的 <button> 标签使用 CSS 设置样式并且看起来不像系统的小部件……帮自己一个忙，为您的 <a> 标签创建一个新类并设置样式一样的方法。

原文由 Andrew Moore 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您使用的是 Bootstrap 3 ，则效果很好

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

原文由 user2197018 发布，翻译遵循 CC BY-SA 3.0 许可协议