哪个更正确：<h1> <a>...</a> </h1>或<a><h1>...</h1></a>

Question

<h1><a ...> ... </a></h1>和<a ...><h1> ... </h1></a>都是有效的HTML，还是只有一个正确？如果它们都是正确的，它们的含义是否不同？

Answer 1

两个版本都是正确的。它们之间最大的区别是，在<h1><a>..</a></h1>的情况下，只有标题中的文本可以被点击。

如果您将<a>放在<h1>附近且css display属性为block（默认为默认值）整个块（<h1>的高度{ {1}}和<h1>所在容器宽度的100％将是可点击的。

历史上你不能将一个块元素放在内联元素中，但HTML5不再是这种情况。我认为<h1><a>..</a></h1>方法更传统。

如果您想在标题上放置一个锚点，那么比<a id="my-anchor"><h1>..</h1></a>更好的方法是使用id或name属性，如下所示：{{ 1}}或<h1 id="my-anchor">..</h1>

Answer 2

在HTML 5之前的这个

<a><h1>..</h1></a>

不会验证。您可以在HTML 5中使用它。 但是，我会用这个：

<h1><a>..</a></h1>

除非您需要添加超过＆lt; h1＆gt;在＆lt;里面a＆gt;

Answer 3

<a><h1></h1></a>不是W3C有效......基本上，您无法将block elements放入inline elements

Answer 4

当样式表不影响渲染时，

<h1><a>..</a></h1>和<a><h1>..</h1></a>的行为几乎相同。几乎，但不完全。如果使用Tab键导航或以其他方式关注链接，则大多数浏览器中的链接周围会出现“焦点矩形”。对于<h1><a>..</a></h1>，此矩形仅围绕链接文本。对于<a><h1>..</h1></a>，矩形在可用的水平空间中延伸，因为标记使a元素成为渲染中的块元素，默认情况下占据100％宽度。

以下显示Chrome如何呈现焦点<a href=foo><h1>link</h1></a>：

这意味着如果您设置元素，例如通过为链接设置背景颜色，效果会以类似的方式不同。

从历史上看，<a><h1>..</h1></a>在HTML 2.0中被宣布无效，随后的HTML规范也随之而来，但HTML5对此进行了更改并将其声明为有效。正式定义不影响浏览器，只影响验证器。但是，一些用户代理（可能不是普通的浏览器，但是例如专门的HTML渲染器，数据提取器，转换器等）可能无法正确处理<a><h1>..</h1></a>，因为规范中不允许这样做。

很少有理由在标题链接中生成标题或文本。 （这主要是不合逻辑的，也不利于可用性。）但是，当使用例如链接的标题（或标题中的文本）作为链接的潜在目的地时，经常出现类似的问题。 <h2><a name=foo>...</a></h2>与<a name=foo><h2>...</h2></a>。类似的考虑适用于此（两者都有效，可能会有区别，因为后者使a元素成为块，而在HTML5之前，只有前者被正式允许）。但此外，两种方式都已过时，现在建议直接在标题元素上使用id属性：<h2 id=foo>...</h2>。

Answer 5

H1元素是块级元素，锚点是内联元素。您可以在块级元素中具有内联元素，但不能相反。当你考虑盒子模型和HTML规范时，这是有意义的。

总之，最好的方法是：

<h1><a href="#">Link</a></h1>

Answer 6

您想使用超链接<a href="…"> / a:link，还是想在标题中添加锚点？如果要添加锚点，只需指定一个标识<h1 id="heading">即可。然后，您可以将其链接为page.htm#heading。

如果您想使标题可点击（链接），请先使用<h1><a></a></h1> / h1 > a - 块级元素，然后使用内嵌元素

Answer 7

此外，还存在样式层次结构差异。如果您将其作为<h1><a href="#">Heading here</a></h1>，则锚点的样式将取代h1元素的样式。例如：

a {color:red;font-size:30px;line-height:30px;}

将覆盖

h1 {color:blue;font-size:40px;line-height:40px;}