我可以嵌套一个 <button><a>内的元素使用 HTML5?

问题描述

我正在做以下事情:

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

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

This works good but I get a HTML5 validation error that says "Element 'button' must not be nested within element 'a button'.

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

Can anyone give me advice on what I should do?

推荐答案

否，根据 来自 W3C 的 HTML5 规范文档:

内容模型:透明，但必须没有交互式内容后代.

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

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

换句话说，您可以在 中嵌套任何元素，但以下内容除外:

In other words, you can nest any elements inside an <a> except the following:

(如果存在 controls 属性)

(如果存在 usemap 属性)

(如果 type 属性未处于 hidden 状态)

<input> (if the type attribute is not in the hidden state)

(如果 type 属性处于 toolbar 状态)

<menu> (if the type attribute is in the toolbar state)

(如果存在 usemap 属性)

(如果存在 controls 属性)

如果你想有一个链接到某处的按钮，将该按钮包裹在一个 标签中，如下所示:

If you are trying to have a button that links to somewhere, wrap that button inside a <form> tag as such:

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

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

However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way.

这篇关于我可以嵌套一个 <button><a>内的元素使用 HTML5?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！