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

我正在执行以下操作：

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

效果很好，但出现HTML5验证错误，提示“元素'button'不能嵌套在元素'a button'内”。

谁能给我建议我该怎么做？

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

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

只要其中没有交互内容（例如按钮或其他链接），该元素就可以包裹在整个段落，列表，表格等，甚至整个节中。

换句话说，可以将<a>除以下内容之外的任何元素嵌套：

• <a>

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

• <button>

• <details>

• <embed>

• <iframe>

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

• <input>（如果type属性未处于隐藏状态）

• <keygen>

• <label>

• <menu>（如果type属性处于工具栏状态）

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

• <select>

• <textarea>

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

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

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

但是，如果您的<button>标签是使用CSS设置样式的，并且看起来不像系统的窗口小部件，请帮帮忙<a>。

如果您使用的是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>

没有。

以下解决方案依赖JavaScript。

<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>

如果要将按钮放置在现有的<form>中method="post"，请确保按钮具有属性，type="button"否则按钮将提交POST操作。这样，您就可以拥有<form>混合了GET和POST操作按钮的。

我刚刚遇到了同样的问题，并通过将“ button”标签替换为“ span”标签来解决。就我而言，我正在使用引导程序。它是这样的：

<a href="#register"> 
    <span class="btn btn-default btn-lg">
        Subscribe
    </span>
</a> 

如果那是有效的，那将真的很奇怪，我希望它是无效的。在另一个可点击元素中包含一个可点击元素意味着什么？它是-按钮还是链接？

另一个选择是使用按钮的onclick属性：

<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>

此方法有效，但是，用户将不会看到悬停时显示的链接，就像链接在元素内一样。

如今，即使规范不允许这样做，“似乎”仍然可以将按钮嵌入<a href...><button ...></a>标签FWIW中……

您可以将一个类添加到按钮，并添加一些脚本来重定向它。

我这样做：

<button class='buttonClass'>button name</button>

<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>

为什么不..您也可以在按钮上嵌入图片

<FORM method = "POST" action = "https://stackoverflow.com"> 
    <button type="submit" name="Submit">
        <img src="img/Att_hack.png" alt="Text">
    </button>
</FORM> 

此处的说明和可行的解决方案：方法 ：使用onclick的div包含另一个onclick javascript的div

通过在内部点击处理程序中执行以下脚本：

 if (!e) var e = window.event;
 e.cancelBubble = true;
 if (e.stopPropagation) e.stopPropagation();

在HTML5中将按钮元素嵌入链接是非法的。

最好在默认和：active（按下）状态下使用CSS：

body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */
a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none}
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}

<p><a class="Button" href="www.stackoverflow.com">Click me<a>

我尝试使用您的javascript解决方案，但为了工作，我需要e.preventDefault();在javascript函数中插入。

<!-- Add your HTML !-->
<a id="id_primary_link" href="my_primary_link.php">
  <button onclick="my_trick_function('my_secondary_link.php')">
</a>


<!-- Add your javascript function !-->
<script>
function my_trick_function(secondary_link){
    $('#id_primary_link').click(function(e) {
        e.preventDefault();
        window.location.replace(secondary_link);
    });
}   
</script>   

在按钮内使用formaction属性

PS！仅当您的按钮type =“ submit”时有效

<button type="submit" formaction="www.youraddress.com">Submit</button>