blocks|key|812959|text|两个版本都是正确的。它们之间最大的区别是，在<h1><a>..</a></h1>的情况下，只有标题中的文本是可点击的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|812960|如果将<a>放在<h1>周围，并且css+display属性为block+(默认情况下)，则可以单击整个块(+<h1>的高度和<h1>所在容器宽度的100%25+)。|812961|过去，您不能将块元素放在内联元素中，但HTML5不再是这种情况。不过，我认为<h1><a>..</a></h1>方法更传统。|812962|如果您希望在标头上放置一个锚点，比<a+id="my-anchor"><h1>..</h1></a>更好的方法是使用id或name属性，如下所示：<h1+id="my-anchor">..</h1>或<h1+name="my-anchor">..</h1>|812963|entityMap^0|M|I|0|3|3|8|4|L|7|V|5|1J|4|1R|4|0|12|I|0|H|X|1M|2|1P|4|21|Q|2S|S|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|M|$]]

<p>Both versions are correct. The biggest difference between them is that in the case of <code>&lt;h1&gt;&lt;a&gt;..&lt;/a&gt;&lt;/h1&gt;</code> only the text in the title will be clickable. </p>

<p>If you put the <code>&lt;a&gt;</code> around the <code>&lt;h1&gt;</code> and the css <code>display</code> property is <code>block</code> (which it is by default) the entire block (the height of the <code>&lt;h1&gt;</code> and 100% of the width of the container the <code>&lt;h1&gt;</code> resides in) will be clickable.</p>

<p>Historically you could not put a block element inside of an inline element, but this is no longer the case with HTML5. I would think that the <code>&lt;h1&gt;&lt;a&gt;..&lt;/a&gt;&lt;/h1&gt;</code> approach is more conventional though. </p>

<p>In the case where you want to put an anchor on the header, a better approach than <code>&lt;a id="my-anchor"&gt;&lt;h1&gt;..&lt;/h1&gt;&lt;/a&gt;</code> would be to use either the <code>id</code> or the <code>name</code> attribute like this: <code>&lt;h1 id="my-anchor"&gt;..&lt;/h1&gt;</code> or <code>&lt;h1 name="my-anchor"&gt;..&lt;/h1&gt;</code></p>


blocks|key|813004|text|在之前的HTML5中，这一条|type|unstyled|depth|inlineStyleRanges|entityRanges|data|813005|<a><h1>..</h1></a>|code-block|syntax|javascript|813006|将不会验证。您可以在HTML5中使用它。但是，我将使用以下代码：|813007|<h1><a>..</a></h1>|813008|除非您需要在中添加更多的<+h1+>|offset|length|813009|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|6|C|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|-4]]]]

<p>In pre HTML 5 this one</p>

<pre><code>&lt;a&gt;&lt;h1&gt;..&lt;/h1&gt;&lt;/a&gt;
</code></pre>

<p>will not validate. You can use it in HTML 5.
However, i would use this:</p>

<pre><code>&lt;h1&gt;&lt;a&gt;..&lt;/a&gt;&lt;/h1&gt;
</code></pre>

<p>unless you need to add more than &lt; h1 > inside the &lt; a ></p>


blocks|key|813029|text|<a><h1></h1></a>不是有效的W3C+...基本上，您不能将block+elements放入inline+elements中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|813030|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html4/sgml/dtd.html#block|1|http://www.w3.org/TR/html4/sgml/dtd.html#inline^0|0|G|10|E|0|1G|F|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]|$9|V|A|W|1|X]]|E|$]]|$1|F|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]|N|$5|I|J|K|E|$L|O]]]]

<p><code>&lt;a&gt;&lt;h1&gt;&lt;/h1&gt;&lt;/a&gt;</code> is not W3C valid... Basically, you can't put <a href="http://www.w3.org/TR/html4/sgml/dtd.html#block">block elements</a> inside <a href="http://www.w3.org/TR/html4/sgml/dtd.html#inline">inline elements</a></p>


blocks|key|597575|text|H1元素是块级元素，而锚点是内联元素。您可以在块级元素中使用内联元素，但反之亦然。当您考虑box模型和HTML规范时，这是有意义的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|597576|所以总结起来最好的方法是：|597577|<h1><a+href="#">Link</a></h1>|code-block|syntax|javascript|597578|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>H1 elements are block level elements, and anchors are inline elements. You are allowed to have an inline element within a block level element but not the other way around. When you consider the box model and the HTML spec this makes sense.</p>

<p>So in conclusion the best way is:</p>

<pre><code>&lt;h1&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/h1&gt;
</code></pre>


blocks|key|597618|text|是要使用超链接<a+href="…">/a:link，还是要在标题中添加锚点？如果你想添加一个锚点，你可以简单地分配一个id+<h1+id="heading">。然后，您可以将其链接为page.htm#heading。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|597619|如果要使标题可单击(链接)，请首先使用<h1><a></a></h1>/h1+>+a块级元素，然后在内部使用内联元素|597620|entityMap^0|7|C|K|6|1R|H|2K|G|0|J|G|10|6|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|I|$]]

<p>do you want to use a hyperlink <code>&lt;a href="…"&gt;</code>/<code>a:link</code>, or do you want to add an anchor to your heading? if you want to add an anchor, you can simply assign an id <code>&lt;h1 id="heading"&gt;</code>. you can then link it as <code>page.htm#heading</code>.</p>

<p>if you want to make the heading clickable (a link), use <code>&lt;h1&gt;&lt;a&gt;&lt;/a&gt;&lt;/h1&gt;</code>/<code>h1 &gt; a</code> – blocklevel elements first, and inline elements inside</p>


blocks|key|597645|text|此外，还存在样式层次结构的差异。如果将其设置为<h1><a+href="#">Heading+here</a></h1>，则锚点的样式将优先于h1元素的样式。示例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|597646|a+{color:red;font-size:30px;line-height:30px;}|code-block|syntax|javascript|597647|将会否决|597648|h1+{color:blue;font-size:40px;line-height:40px;}|597649|entityMap^0|N|11|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>Also, there is style hierarchy differences. If you have it as <code>&lt;h1&gt;&lt;a href="#"&gt;Heading here&lt;/a&gt;&lt;/h1&gt;</code>, The styles of the anchor will overrule the styles of the h1 element. Example:</p>

<pre><code>a {color:red;font-size:30px;line-height:30px;}
</code></pre>

<p>WILL OVERRULE </p>

<pre><code>h1 {color:blue;font-size:40px;line-height:40px;}
</code></pre>


blocks|key|597691|text|两者都是正确的。它们取决于你想要的锚点标签的大小，以及你想要如何布局你的网站。您可以执行<h1><a+href="example.com">Home+Page</a></h1>，在这种情况下，它将返回：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|597692|主页|597693|而是用一个锚。|597694|或者，您可以执行<a+href="example.com"><h1>Home+Page</h1></a>，它将返回一个H1超链接，而不只是指向H1的锚点，如下所示：|597695|​|597696|597697|597698|597699|但是，大多数情况下，您不能在H1中添加链接，因为它只会将其呈现为h1上的锚点，而不是添加超链接。然而，我认为我这样说是正确的，你可以在不同的浏览器上看到不同的行为。|597700|但是，如果我错了，请纠正我。:)|597701|entityMap^0|18|18|0|0|0|8|18|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|14|8|@]|D|@]|E|$]]|$1|N|3|M|5|6|7|15|8|@]|D|@]|E|$]]|$1|O|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|M|5|6|7|17|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|18|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|19|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|V|$]]

<p>Both are correct. They depend on the sizing of the anchor tag which you want and how you want your website laid out.
You can do <code>&lt;h1&gt;&lt;a href=&quot;example.com&quot;&gt;Home Page&lt;/a&gt;&lt;/h1&gt;</code>, in which case it would return: <h1>Home Page</h1> But with an Anchor.
<br>
Or you can do <code>&lt;a href=&quot;example.com&quot;&gt;&lt;h1&gt;Home Page&lt;/h1&gt;&lt;/a&gt;</code> and it would return a H1 hyperlink instead of just heading an anchor to the H1, like so:</p>
<p><h1>Home Page</h1></p>
<p>However, mostly you cannot add links within H1 because it will just render it as  an anchor onto the h1 rather than adding a hyperlink. However, I think I'm right in saying that you could see a difference in behaviour for this on different browsers.</p>
<p>But correct me if I am wrong. :)</p>


blocks|key|597728|text|我认为文本在较弱或较老的浏览器中问题最小，但现代浏览器和强大的搜索引擎同时支持文本和文本；因此，使用两者来改进我们的网页是一种很好的自由和有用的方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|597729|“希望这会是有用的”|597730|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>I think the &lt;h1&gt;&lt;a href=&quot;&quot;&gt;text&lt;/a&gt;&lt;/h1&gt; is the least problematic with weak or old browsers, but modern browsers and powerful search engines are supporting both it and &lt;a href=&quot;&quot;&gt;&lt;h1&gt;text&lt;/h1&gt;&lt;/a&gt;; So it's a good freedom and useful to use both to improve our web page.</p>
<p>«Hope that could be useful»</p>


<p>Are both <code>&lt;h1&gt;&lt;a ...&gt; ... &lt;/a&gt;&lt;/h1&gt;</code> and <code>&lt;a ...&gt;&lt;h1&gt; ... &lt;/h1&gt;&lt;/a&gt;</code> valid HTML, or is only one correct? If they are both correct, do they differ in meaning?</p>


Which is more correct: <h1><a>...</a></h1> OR <a><h1>...</h1></a>

容器

HTML5

<h1><a ...> ... </a></h1>和<a ...><h1> ... </h1></a>都有效，还是只有一个是正确的？如果它们都是正确的，那么它们在含义上有区别吗？

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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