我听说在内联元素中放入块元素是一种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 states that the <a> element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)". HTML 4.01 specifies that <a> elements may only contain inline elements. A <div> is a block element, so it may not appear inside an <a>. Of course you are at liberty to style an inline element such that it appears to be a block, or indeed style a block so that it is rendered inline. The use of the terms inline and block in HTML refers to the relationship of the elements to the semantic structure of the document, whereas the same terms in CSS are related more to the visual styling of the elements. If you make inline elements display in a blocky manner, that's fine. However you should ensure that the structure of the document still makes sense when CSS is not present, for example when accessed via an assistive technology such as a screen reader - or indeed when examined by the mighty Googlebot.
其他回答
2023年1月更新:最新HTML5版本
Nothing is wrong with placing a div inside a tag. In fact, you can place just about anything inside a tag as long as they are categorized as transparent, except that no descendant may be interactive content (eg: buttons or inputs) or an a element, and no descendant may have a specified tabindex attribute. Please refer to these documentations: https://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-a-element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#properties. If you inspect Angular Material official website, you can tell that they are indeed using div inside a element.
这是我从他们的网站上截取的一个例子:
<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>
如果你想避免在锚标记中放置div的语义问题，只需将锚标记放在与div相同的级别上，用一个position: relative的容器包装它们，使你的锚标记position: absolute，并展开它来填充容器。此外，如果它不在内容流的末尾，请确保在那里抛出一个z索引，将其置于内容之上。
按照建议，我已经添加了一个标记代码:
<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;
}
W3C文档没有使用错误和罪恶这样的概念，但它确实使用了诸如提供方法、可能是适当的和不鼓励的概念。
实际上，在第4节的第二段中，4.01规范列出了如下的单词
本文件中的关键字“必须”、“必须不”、“要求”、“应当”、“不应当”、“应该”、“不应该”、“建议”、“可能”和“可选”按[RFC2119]解释。但是，为了可读性，这些单词在本规范中不以所有大写字母出现。
考虑到这一点，我相信在7.5.3块级和内联元素中有明确的声明，其中说
通常，内联元素只能包含数据和其他内联元素。
条件“一般”似乎引入了足够的模糊性，说明HTML 4.01确实允许内联元素包含块元素。
当然，CSS2有一个显示属性值inline-block，它似乎适合您所描述的目的。我不确定它是否得到了广泛的支持，但似乎有人预见到了这种行为的需要。
DTD在这里似乎不那么宽容，但DTD的文本遵从规范:
HTML 4.01规范包括额外的 不能在内部表示的语法约束 dtd。
在另一个注释中，您建议通过将块包装在锚中使其激活。我不认为HTML禁止这样做，CSS显然允许这样做。因此，要回答标题中关于它是否正确的问题，我的回答是肯定的。按照标准，这有时是正确的。
你不能把<div>放在<a>里面-它不是有效的(X)HTML。
即使你用display: block样式一个span，你仍然不能把块级元素放在里面:(X)HTML仍然必须遵守(X)HTML DTD(无论你使用哪个)，不管CSS如何改变事情。
浏览器可能会按照您想要的方式显示它，但这并不意味着它是正确的。
如果你将它更改为块风格元素，那么不，它不再是“错误的”，但它可能不会被验证。但你现在所做的并没有多大意义。你应该保持锚标记作为一个块级元素，没有内部div，或者把div放在外面。
