我听说在内联元素中放入块元素是一种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元素的解释 这种方式。
有没有人对这个问题有进一步的建议?
当前回答
我认为大多数时候当人们问这个问题时，他们已经建立了一个只有div的网站，现在其中一个div需要是一个链接。
我看到有人使用一个透明的空图像，PNG，在一个锚标记中，只是为了在一个div中创建一个链接，并且图像的大小与div相同。
其实挺难过的……但这很有效……
其他回答
这是错误的。使用span。
根据你要迎合的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.
在HTML5中，<div>这样的块级元素可以用<a>标签来包装。虽然<div>被认为是流内容的容器/包装器，而<a>被认为是根据MDN的流内容。从语义上讲，创建作为块级元素的内联元素可能更好。
HTML5规范…现在可以将块级元素放入内联元素中。所以现在在一个'a'元素里面放一个'div'或者'h1'是非常合适的。
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>
