我听说把块级元素放在内联元素里是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元素的传统解释。
是否有人对此问题有进一步的建议？
根据您需要呈现的HTML版本：
HTML 5 规定 <a> 元素 "可以包含整个段落，列表，表格等甚至整个部分，只要其中没有交互式内容（例如按钮或其他链接）"。
HTML 4.01 规定 <a> 元素只能包含内联元素。而<div>是一个块级元素，因此不能出现在 <a> 内部。
当然，您可以自由地样式化内联元素以使其看起来像块级元素，或者将块级元素样式化成行内元素。 在 HTML 中使用术语“内联”和“块级”是为了描述元素与文档的语义结构之间的关系，而在 CSS 中使用相同的术语则更多地与元素的视觉样式相关联。如果使内联元素以块状方式显示，那没问题。
但是您应该确保在没有 CSS 的情况下文档结构仍然有意义，例如当通过辅助技术（例如屏幕阅读器）或强大的 Googlebot 访问时。
<!ELEMENT A - - (%inline;)* -(A) 具体来说，规范中的 (%inline;)* 部分表示只包含内联元素。更多关于阅读 DTD 文档的内容请参考：http://www.w3schools.com/dtd/dtd_elements.asp - Brian Chavez不，它不会通过验证，但是在现代浏览器中通常可以正常工作。话虽如此，请在您的锚点内部使用一个span，并在其上设置display:block，这样它将在任何地方都能起作用，并且能够通过验证！
display: block 设为样式，那么从技术上讲，它会变成一个块级元素吗？ - WhyNotHugoa元素只能包含内联元素。如果你将span元素变成块级元素，严格来说，它不应该在锚点内部。 - WhyNotHugo<div>是块级元素，而<span>是内联元素，即使文档的伴随 CSS 反过来规定了也是如此。 - Roy TinkerW3C文档没有使用“错误”和“罪恶”等概念，但使用了“提供手段”，“可能合适”和“不鼓励”等词语。
事实上，在第4节的第二段中，4.01规范将其单词列举如下:
本文件中的关键词“必须（MUST）”、“不得（MUST NOT）”、“要求（REQUIRED）”、“应当（SHALL）”、“不应当（SHALL NOT）”、“应该（SHOULD）”、“不该（SHOULD NOT）”、“建议（RECOMMENDED）”、“可以（MAY）”和“可选（OPTIONAL）”的解释详见[RFC2119]。 但为了易读性，在本规范中这些单词并非全部是大写字母。
有了这个理解，我相信最明确的陈述是在7.5.3块级元素和内联元素中，其中说：
通常，内联元素只能包含数据和其他内联元素。
条件“通常”似乎引入了足够的歧义，以表明HTML 4.01允许内联元素包含块级元素。
当然，CSS2具有显示属性值 inline-block ，这似乎适合您所描述的用途。 我不确定它是否被广泛支持，但似乎有人预料到了那种行为的需要。
DTD 在这里似乎不太容易原谅，但是 DTD 文本 向规范推迟：
HTML 4.01 规范包括不能在 DTD 中表达的附加语法约束。
在另一条评论中，您建议通过将块包装在锚点中使其处于活动状态。我不认为 HTML 禁止这样做，而 CSS 明确允许。因此，回答标题问题——是否正确，我的答案是：有时候是正确的，符合标准。
<a href="/components/badge">
<div class="mat-list-item-content">
<div mat-ripple="" class="mat-ripple mat-list-item-ripple"></div>
<div class="mat-list-text"></div>
</div>
</a>
<a>的内容模型现在是“透明”的，这基本上是“继承”或允许其父元素接受的内容。以前的非交互后代规则仍然适用。 - Kevin Law使用HTML5规范...现在可以将块级元素放置在内联元素中。因此，现在将'div'或'h1'放置在'a'元素中是完全合适的。
在HTML5中，像<div>这样的块级元素可以被<a>标签包裹。虽然<div>被认为是流内容的容器/包装器, 而<a>被认为是流内容，根据MDN，从语义上讲，创建作为块级元素的内联元素可能更好。
<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;
}
您不能将<div>放在<a>中，这是不符合(X)HTML规范的。
即使您使用display: block对span进行样式设置，仍然不能在其中放置块级元素：无论CSS如何改变，(X)HTML仍须遵守相应的DTD（无论您使用哪个DTD版本）规定。
浏览器可能会按您的意图显示内容，但这并不代表是正确的。
<!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文章讨论了这个问题-Can I nest these tags? -唯一的答案是要看"HTML规范表明"部分的项目列表。最挑剔的标签显然是a和p，还有像h1..h6这样的荣誉提名。 （现在说实话：您是否曾经使用过p标签，特别是因为它给了您其他人无法获得的东西？...想到了。我只会放弃它。）
简而言之 - 你不能把a放在a里面。