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

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

两种版本都是正确的。它们之间的最大区别是，<h1><a>..</a></h1>仅标题中的文本是可单击的。

如果您将放在<a>周围，<h1>并且css display属性是block（默认情况下），则整个块（其高度<h1>和所占容器宽度的100％<h1>）都是可单击的。

从历史上讲，您不能将block元素放入内联元素内，但是HTML5不再是这种情况。我认为这种<h1><a>..</a></h1>方法比较传统。

在你想要把锚的头部的情况下，更好的方法比<a id="my-anchor"><h1>..</h1></a>将是请使用id或name类似这样的属性：<h1 id="my-anchor">..</h1>或<h1 name="my-anchor">..</h1>

在HTML 5之前的版本中

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

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

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

除非您需要在<a>中添加多个<h1>

<a><h1></h1></a>W3C无效...基本上，您不能将块元素放入内联元素中

<h1><a>..</a></h1> 和 <a><h1>..</h1></a>当样式表不影响渲染时它们的行为几乎相同。差不多，但是不完全是。如果使用Tab键导航或将焦点放在链接上，则在大多数浏览器中，链接周围会出现一个“焦点矩形”。对于<h1><a>..</a></h1>，此矩形仅在链接文本周围。对于<a><h1>..</h1></a>，矩形会在可用的水平空间上延伸，因为标记使a元素成为渲染中的块元素，默认情况下占据100％的宽度。

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

这意味着，如果您对元素进行样式设置（例如，通过为链接设置背景色），则效果会以类似的方式有所不同。

从历史上讲，<a><h1>..</h1></a>它在HTML 2.0中被声明为无效，随后的HTML规范也随之效仿，但是HTML5对此进行了更改并将其声明为有效。正式定义并未影响浏览器，仅影响验证器。但是，由于规范中不允许使用某些用户代理（可能不是正常的浏览器，但例如专用的HTML呈现器，数据提取器，转换器等），因此远程处理可能无法正常处理 <a><h1>..</h1></a>。

很少有理由在标题或链接中添加标题。（这通常是不合逻辑的，并且对可用性不利。）但是，当将标题（或标题中的文本）作为潜在目标时，经常会出现类似的问题使用例如<h2><a name=foo>...</a></h2>vs 作为链接<a name=foo><h2>...</h2></a>。类似的考虑也适用于此（两项工作都可能有所不同，因为后者使a元素成为一个块，并且在HTML5之前，仅正式允许前者）。但是此外，这两种方法都已过时，id现在建议直接在heading元素上使用属性：<h2 id=foo>...</h2>。

H1元素是块级元素，锚点是内联元素。允许在块级元素中包含内联元素，但反之则不行。考虑盒模型和HTML规范时，这很有意义。

因此，总而言之，最好的方法是：

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

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

如果要使标题可点击（链接），请首先使用<h1><a></a></h1>/ h1 > a–块级元素，并在其中使用内联元素

此外，还有样式层次结构差异。如果您将其设置为<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;}