块级链接真让人头疼（也许只是一个坏主意）

正如我们在 完整的指南 中提到的，您可以将 <a href=""> 链接环绕在您喜欢的任何 HTML 片段周围。我们称之为“块级链接”。就像您想要链接整个内容“卡片”，因为它可以创建一个大的可点击目标。

<a href="/article/"> <!-- display: block; -->
  <div class="card">
    <h2>Card</h2>
    <img src="..." alt="...">
    <p>Content</p>
  </div>
</a>

关于这一点，Adrian Roselli

对于块级链接来说，最糟糕的事情可能是将所有内容都包裹在 <a href> 中。

[...]对于屏幕阅读器用户来说，在通过 Tab 键浏览控件时会读取整个字符串。在以下示例中，第一个链接包含标题、图像（未将其声明为图像）和文本块，大约需要 25 秒才能读取，然后才将其宣布为链接。在使用 Tab 键时，您并不总是知道控件类型，直到可访问名称完整。

（示例 是一张外观非常正常的卡片，包含标题、图像和段落。）

所以不要这样做。

另一种方法是让链接保持“正常”，就像标题一样。

<div class="card">
  <h2><a href="/article/">Article</a></h2>
  <img src="..." alt="...">
  <p>Content</p>
</div>

扩展链接的“可点击区域”以覆盖整个区域。

.card {
  position: relative;
}
.card h2 a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这适用于可点击区域，并解决了对屏幕阅读器用户造成的影响。

但还有另一个问题会损害这两种解决方案，那就是**文本选择**。您不能只是将光标放在卡片中的某个位置并正常选择文本。单击会激活链接，等待您在链接上mouseup才会触发。您无法像预期的那样选择文本的内部部分。它不会完全阻止选择文本的能力，但它会使操作变得笨拙且令人烦恼。

我不确定这是否容易解决。也许有一些奇特的 JavaScript 解决方案可以检测您是否已开始选择文本，然后不触发点击，但如果您单击而不拖动，则它会跳转到链接。不过，关于这一点，我有一些顾虑。

更新：查看 Heydon 的文章《卡片》中的“冗余点击事件”部分。

总而言之，我认为块级链接就是一个坏主意。但我希望被证明是错的，并看到一个真正好的实现，可以解决所有这些问题。