Html 是否允许在链接中嵌套链接？

这看起来很基本，你可以把一个链接放在一个链接里面吗？见下图：

我试图让整个灰色条都可以点击到某个地方，但如果用户点击方向盘或移动箭头，它们就是其他链接。请参阅我的当前代码：

<a href="#" class="sp_mngt_bar">
    <h1><?php echo $v; ?></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a>
</a>

这是一种好的做法吗？我做错了吗？你会怎么做？ 谢谢你的帮助

直接来自W3C for HTML4：

12.2.2嵌套链接是非法的 由A元素定义的链接和锚点不得嵌套；A元素不得包含任何其他A元素

由于DTD将链接元素定义为空，因此链接元素也不能嵌套

HTML 5 还有

---

不能在元素中包含交互式内容包括锚定标签。

我将重新设置其样式，使其更像以下格式：

<div class="sp_mngt_bar">
    <h1><a href="#"<?php echo $v; ?></a></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a>
</a>

---

嵌套链接是非法的。要实现与嵌套链接相同的行为，可以执行以下操作：

使用@mikevoermans HTML格式，如下所示，并绑定单击事件

<div class="sp_mngt_bar">
    <h1><a href="#"<?php echo $v; ?></a></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a> 
</div>

---

虽然我完全同意所选答案，而且是的，但您不应该在A元素中包含交互式内容，有时您可能需要解决这个问题

下面是一个例子，您需要将一个交互元素放在一个标记中。右上角的那个小关闭按钮

这是这个的HTML。（这不是实际的构建，我简化了一点）

所以，基本上，当用户点击“X”时，我们想要隐藏这个框。否则，它应该像一个简单的标记一样工作。下面是实现了这个技巧的jQuery

$（'.hide'）。单击（函数（e）{
e、 预防默认值（）；
e、 stopPropagation（）；//这是关键部分
//你想怎么做就怎么做，比如我把盒子淡出了
$（this.parent（）.fadeOut（300）；
});

---

我希望这能帮助有同样问题的人

将嵌套链接包装在对象标记中：

<a href="#" class="sp_mngt_bar">
    <h1><?php echo $v; ?></h1>
    <object><a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a></object>
    <object><a href="#" class="t_icons t_icons_move sp_mngt_move"></a></object>
</a>

---

简单回答以下问题：

话虽如此，这里有一个纯html/css解决方案：

.block{
位置：相对位置；
}
.block.overlay{
位置：绝对位置；
左侧：0；顶部：0；底部：0；右侧：0；
}
.block.内部{
位置：相对位置；
指针事件：无；
z指数：1；
}
.block.内部a{
指针事件：全部；
}

整个框是一个超链接。（种类）

虽然从技术上讲，这不是问题的答案，但另一种解决方法是将单击事件绑定到

span

或

div

：

<a href="outer-link">
  Outer Link
  <span class='inner-link'>Inner Link</span>
</a>

$('.inner-link').click(function (e) {
    // Prevent the click-through to the underlying anchor
    e.stopPropagation();

    // Go to a link
    window.location.href = 'page.html';
    // Or call a javascript method
    doSomething();

    return false;
});

$（“.内部链接”）。单击（函数（e）{
//防止对基础锚点的点击
e、 停止传播（）；
//转到链接
window.location.href='page.html'；
//或者调用javascript方法
doSomething（）；
返回false；
});

一种解决方案是将链接绝对定位在父链接容器中

<div style="position: relative">
  <a href="#">
    <h1><a href="#"<?php echo $v; ?></a></h1>
    <div id="placeholder" style="height: 24px">
  </a>
  <div style="position: absolute; bottom: 0">
    <a href="#"></a>
  </div>
</div>

相反，块级别的

肯定放错了

@deceze:在HTML5中不再放了。重点是，为什么不在链接中包装h1，而不是在链接中包装洞的东西，只是让另外两个项目具有不同的链接为什么版本：最佳解决方案版本：

A

元素中应该有一些内容。虽然形式上正确，但是空的

元素对可访问性是有害的。（我想他们的想法是CSS设置包括背景图像，但这不利于可访问性。）为什么空元素不利于可访问性？我经常用它来减少HTML请求和精灵。谢谢你的链接，非常有用和直接！FWIW，即使它是无效的，我测试过的每个浏览器（Firefox 26、Chrome 34、IE8+）实际上都允许您嵌套链接标记而不会产生任何影响-没有插入任何隐含的结束标记。这是一个没有实际意义的观点-我认为嵌套链接导致不同URL的用户体验很难理解，永远不应该这样做。只是澄清一下：HTML5锚定标记不能包含锚定标记，即使锚定标记不是交互式内容（即没有href属性的锚定标记）@Jonz快进几年——Mac上的Chrome版本59.0.3071.115会调整HTML，如果一个锚嵌入到另一个锚中……我建议在你应用此黑客攻击后检查你的性能。我们将它添加到应用程序中，后来发现我们的pagespeed分数下降了。事实证明，像这样包装链接是我们案例中的原因。@sasha，你能详细说明一下吗？为什么？你是怎么修好的？太棒了。谢谢你也发了代码笔。我特别喜欢这是如何有效的html。绝妙的解决方案-如果我能给这个超过1票，我会！注意：对于未来的用户，
.internal
必须始终是内部链接正上方的元素-无论它相对于
嵌套了多远。block
我不需要z-index属性注意，这会阻止用户在新选项卡中打开链接。
<div style="position: relative">
  <a href="#">
    <h1><a href="#"<?php echo $v; ?></a></h1>
    <div id="placeholder" style="height: 24px">
  </a>
  <div style="position: absolute; bottom: 0">
    <a href="#"></a>
  </div>
</div>