我可以使用HTML5在<a>内embedded一个<button>元素吗？
我正在做以下事情：
<a href="www.stackoverflow.com"> <button disabled="disabled" >ABC</button> </a> 这工作良好，但我得到一个HTML5validation错误，说“元素”button“不能嵌套元素的一个button”。
任何人都可以给我build议我应该做什么？
不 ，根据W3C的HTML5规范文档 ，它不是有效的HTML5：
内容模型： 透明 ，但不能有交互式内容后裔。
只要内部没有交互式内容（例如button或其他链接），a元素就可以环绕整个段落，列表，表格等等，甚至是整个部分。
换句话说，除了下面的内容外，你可以嵌套<a>任何元素：
-
<a> -
<audio>（如果控件属性存在） -
<button> -
<details> -
<embed> -
<iframe> -
<img>（如果usemap属性存在） -
<input>（如果type属性不处于隐藏状态） -
<keygen> -
<label> -
<menu>（如果type属性处于工具栏状态） -
<object>（如果usemap属性存在） -
<select> -
<textarea> -
<video>（如果控件属性存在）
如果您试图将button链接到某处，请将该button包裹在<form>标签中，如下所示：
<form style="display: inline" action="http://example.com/" method="get"> <button>Visit Website</button> </form>
但是，如果您的<button>标签使用CSS样式化，并且看上去不像系统的小部件…请自己帮忙，为您的<a>标签创build一个新类并以相同的方式进行设置。
如果你使用的是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>
没有。
以下解决scheme依赖于JavaScript。
<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>
如果button被放置在一个现有的<form>并且method="post" ，那么确保该button具有属性type="button"否则button将提交POST操作。 通过这种方式，您可以使用包含GET和POST操作button的混合的<form> 。
如果这是有效的，这将是非常奇怪的，我希望它是无效的。 在另一个可点击元素内部有一个可点击的元素是什么意思？ 这是一个button，还是一个链接？
我刚刚跳进同样的问题，我解决了它代替'button'标签'span'标签。 在我的情况下，我使用引导。 这是它的样子：
<a href="#register"> <span class="btn btn-default btn-lg"> Subscribe </span> </a>
另一种select是使用button的onclick属性：
<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>
这个工作，但是，用户不会看到hover上显示的链接，因为如果它是在元素内部。
你可以添加一个类到button，并把一些脚本redirect。
我这样做：
<button class='buttonClass'>button name</button> <script> $(".buttonClass').click(function(){ window.location.href = "http://stackoverflow.com"; }); </script>
为什么不..你也可以在图片上embedded图片
<FORM method = "POST" action = "https://stackoverflow.com"> <button type="submit" name="Submit"> <img src="img/Att_hack.png" alt="Text"> </button> </FORM>
在链接中embeddedbutton元素在HTML5中是非法的。
更好的使用默认的CSS和：active（pressed）状态：
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>
在这里解释和工作的解决scheme： 如何：与onclick JavaScript的另一个div内的onclick
通过在内部点击处理程序中执行此脚本：
if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation();
这些天，即使规范不允许它，“似乎”仍然工作embedded一个<a href...><button ...></a>标签，FWIW …
我尝试你的JavaScript解决scheme，但是，为了工作，我需要插入e.preventDefault（）; 在我的JavaScriptfunction。
在这里我的代码。
再见
<!-- 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>
使用button内的formaction属性
PS！ 它只适用于你的buttontypes=“提交”
<button type="submit" formaction="www.youraddress.com">Submit</button>
<a href="index.html"> <button type="button">Submit</button> </a>
