我听说在内联元素中放入块元素是一种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元素的解释 这种方式。
有没有人对这个问题有进一步的建议?
当前回答
如果你要努力制作<a>块，为什么不把<a>放在div中，作为块元素，它会给你同样的效果。
其他回答
我认为大多数时候当人们问这个问题时，他们已经建立了一个只有div的网站，现在其中一个div需要是一个链接。
我看到有人使用一个透明的空图像，PNG，在一个锚标记中，只是为了在一个div中创建一个链接，并且图像的大小与div相同。
其实挺难过的……但这很有效……
你不能把<div>放在<a>里面-它不是有效的(X)HTML。
即使你用display: block样式一个span，你仍然不能把块级元素放在里面:(X)HTML仍然必须遵守(X)HTML DTD(无论你使用哪个)，不管CSS如何改变事情。
浏览器可能会按照您想要的方式显示它，但这并不意味着它是正确的。
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>
不，它不会验证，但它通常会在现代浏览器中工作。也就是说，在你的锚中使用一个span，并在它上设置display: block，这肯定会在任何地方工作，它会验证!
根据你要迎合的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.
