将div放入锚点是否正确？

我听说将block元素放入内联元素是HTML的罪过：

<a href="http://www.mydomain.com"><div>
What we have here is a problem. 
You see, an anchor element is an inline element,
and the div element is a block level element.
</div></a>

但是，如果您像display:block样式表那样设置外部锚点，该怎么办？还是错吗？关于块级和内联元素的HTML 4.01规范似乎是这样认为的：

样式表提供了指定任意元素呈现的方法，包括将元素呈现为块还是内联。在某些情况下，例如列表元素的内联样式，这可能是适当的，但总的来说，不鼓励作者以这种方式覆盖HTML元素的常规解释。

有人对此问题有其他建议吗？

根据您要满足的HTML版本：

• HTML 5声明<a>元素“只要其中没有交互内容（例如按钮或其他链接），就可以包裹整个段落，列表，表格等，甚至整个节”。

• HTML 4.01指定<a>元素只能包含内联元素。A<div>是一个块元素，因此它可能不会出现在内<a>。

  当然，您可以随意设置内联元素的样式，使其看起来像是一个块，或者也可以对一个块进行样式化，以使其内联。在HTML中使用术语inline和block是指元素与文档的语义结构之间的关系，而在CSS中，相同的术语更多地与元素的视觉样式相关。如果使内联元素以块状显示，那很好。

  但是，当没有CSS时（例如，通过屏幕阅读器等辅助技术进行访问时，或者由强大的Googlebot进行检查时），您应该确保文档的结构仍然有意义。

不，它不会验证，但是是的，它通常可以在现代浏览器中运行。话虽如此，请在锚点内部使用一个跨度，并display: block在其上进行设置，这肯定会在任何地方都有效，并且它将验证！

W3C文档没有使用错误和犯罪之类的概念，但是确实使用了提供手段之类的概念，可能是适当的，不鼓励使用。

实际上，在第4节的第二段中，4.01规范的措辞如下：

本文档中的关键字“必须”，“不得”，“必须”，“应”，“应禁止”，“应”，“不应”，“建议”，“可以”和“可选”是如[RFC2119]中所述进行解释。但是，为了便于阅读，在本规范中，这些单词并非全部以大写字母出现。

考虑到这一点，我相信最终声明是在7.5.3块级和内联元素中，

通常，内联元素可以仅包含数据和其他内联元素。

条件“通常”似乎引入了足够的歧义，可以说HTML 4.01确实允许内联元素包含块元素。

当然，CSS2具有显示属性值inline-block，似乎适合您描述的目的。我不确定它是否曾经得到广泛支持，但是似乎有人预料到需要这种行为。

DTD在这里似乎不太宽容，但DTD的文本符合规范：

HTML 4.01规范包括不能在DTD中表达的其他语法约束。

在另一个注释中，建议您通过将其包装在锚点中来使其处于活动状态。我不认为HTML禁止这样做，而CSS显然允许这样做。因此，回答有关是否正确的标题问题，我说是。按照标准，有时是正确的。

使用HTML5规范...现在可以将块级元素放入内联元素中。因此，现在非常适合将'div'或'h1'放入'a'元素内。

你不能把<div>里面<a>-它不是有效的（X）HTML。

即使您使用display：块设置跨度样式，也仍然不能在其中放置块级元素：（X）HTML仍然必须遵守（X）HTML DTD（无论使用哪种样式），无论CSS如何改变事物。

浏览器可能会根据需要显示它，但这并不正确。

在http://www.w3.org/TR/REC-html40/sgml/dtd.html上有HTML 4的DTD 。此DTD是规范的机器可处理形式，其局限性在于DTD支配XML和HTML 4，尤其是“瞬态”风格，允许很多不是“合法” XML的事物。尽管如此，我认为这已经接近整理说明者的意图。

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

我会将在此层次结构中列出的标签解释为允许的标签总数。

尽管规范可能会说“内联元素”，但我很确定这并不是要通过声明块元素的显示类型为内联来绕开意图。内联标签具有不同的语义，无论您如何滥用它们。

另一方面，我发现引人入胜的是special似乎允许嵌套A元素。规范中可能有一些措辞强硬的措辞，即使它在XML语法上是正确的，也不允许这样做，但由于它不是问题的主题，因此我将不做进一步介绍。

诸如HTML之类的块级元素<div>可以由<a>标签包装。尽管根据MDN， a <div>被认为是流内容的容器/包装，而<a>s被认为是流内容。从语义上讲，创建充当块级元素的内联元素可能更好。

如果要避免将div放置在锚标记中的语义麻烦，只需将锚标记放置在与div相同的水平上，然后将它们全部包装在具有位置：相对的容器中，将锚标记的位置设置为绝对：并将其扩展为装满容器。另外，如果不在内容流的末尾，请确保将z-index放在其中，以将其放置在内容上方。

根据建议，我添加了一个标记代码：

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

和CSS：

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}

如果您要努力制作<a>块，为什么不放到<a>div内，作为块元素，它会给您同样的效果。

如果将其更改为块样式元素，则不会，它不再“错误”，但可能无法验证。但是做自己在做的事情没有多大意义。您应该只将anchor标签作为没有内部div的块级元素保留，或者将div放在外面。

这是错的。使用跨度。

我认为大多数情况下，当人们问这个问题时，他们只建立了一个div网站，现在，其中一个div需要成为链接。

我看到有人在锚标记内使用透明的空白图像PNG，只是为了在div内建立链接，并且图像的大小与div相同。

实际上非常难过...但是它可以工作...

您可以通过添加“ :: before”伪元素来实现

纯CSS技巧;）

a:before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0,0,0,0);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/250" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

就像供参考。

如果您的目标是使div可点击，则可以使用jQuery / Java Script。

像这样定义div：

<div class="clickableDiv" style="cursor:pointer">
  This is my div. Try clicking it!
</div>

然后，您的jQuery将像这样实现：

 <script type="text/javascript">

    $(document).ready(function () {

        $("div.clickableDiv").click(function () {
            alert("Peekaboo"); 
        });
    });
</script>

这也适用于多个div-根据此线程中Tom的评论