我听说在内联元素中放入块元素是一种HTML错误:
<a href="http://example.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元素的解释 这种方式。
有没有人对这个问题有进一步的建议?
当前回答
你可以通过添加"::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>
其他回答
W3C文档没有使用错误和罪恶这样的概念，但它确实使用了诸如提供方法、可能是适当的和不鼓励的概念。
实际上，在第4节的第二段中，4.01规范列出了如下的单词
本文件中的关键字“必须”、“必须不”、“要求”、“应当”、“不应当”、“应该”、“不应该”、“建议”、“可能”和“可选”按[RFC2119]解释。但是，为了可读性，这些单词在本规范中不以所有大写字母出现。
考虑到这一点，我相信在7.5.3块级和内联元素中有明确的声明，其中说
通常，内联元素只能包含数据和其他内联元素。
条件“一般”似乎引入了足够的模糊性，说明HTML 4.01确实允许内联元素包含块元素。
当然，CSS2有一个显示属性值inline-block，它似乎适合您所描述的目的。我不确定它是否得到了广泛的支持，但似乎有人预见到了这种行为的需要。
DTD在这里似乎不那么宽容，但DTD的文本遵从规范:
HTML 4.01规范包括额外的 不能在内部表示的语法约束 dtd。
在另一个注释中，您建议通过将块包装在锚中使其激活。我不认为HTML禁止这样做，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语法上是正确的，但我不会进一步讨论这个问题，因为这不是问题的主题。
任何方法都有用……直到你把它们嵌在一起。
你可以把表格、div、鸟和蜜蜂塞进去，浏览器会耐心地配合你。但是一旦你把另一个<a>标签放在里面，它就会把它们分开，把里面的标签放在外面的标签关闭之后。这值得一试，即使是在F12控制台，当你的浏览器不喜欢某些东西时，你会惊讶地发现它是多么严格。
所以没有这样的事情:
<a href="#1">
<a href="#2"> Now what </a>
</a>
相反，它将变成:
<a href="#1"></a>
<a href="#2"> Now what </a>
同样的事情发生在<p>和其他一些;事实上，有一篇关于这个的Stacko文章-我可以嵌套这些标签吗?-唯一的答案有关键，在“HTML规范指示”部分寻找项目符号列表。最挑剔的显然是a和p，如h1..h6。(现在让我们诚实地说:你是否曾经专门使用p标签，因为它给了你别人没有的东西?……这么想的。我就把它扔了。)
TL, DR，你不能把a放在a里面。
仅供参考。
如果你的目标是让你的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>
这也适用于多个潜水-根据汤姆的评论在这个线程
如果你要努力制作<a>块，为什么不把<a>放在div中，作为块元素，它会给你同样的效果。
