【问题标题】:Is it better to put the id attribute in a "a" tag or in the "h1/h2" tag?将 id 属性放在“a”标签还是“h1/h2”标签中更好?
【发布时间】:2014-03-30 21:28:20
【问题描述】:

我正在 w3 学校网站上学习 html,我在“html 链接”一章。我不明白的是为什么他们建议在链接标签中使用 id 属性而不是标题标签。

他们的榜样:

<p> 
<a href="#C4">See also Chapter 4.</a>
</p>

<h2><a id="C4">Chapter 4</a></h2> 
<p>This chapter explains ba bla bla</p>

我的尝试:

<p>
<a href="#C4">See also Chapter 4.</a>
</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

当我尝试它们时,两者的工作方式相同,但我的尝试需要更少的写作。我的尝试中是否有我不明白的错误。

【问题讨论】:

标签: html tags


【解决方案1】:

您可以通过元素的 ID 锚链接到元素,而不是像更常见的那样通过 name 属性的 a 标记,这似乎是一个保守的秘密。这可能是因为前者是后来引入的,所以a标签的方式曾经是唯一的内部链接方式。

所以是的,你的方法是完全有效的。

顺便说一句,虽然 W3SChoos 有时无疑很有用,但多年来却因为一些不太可靠的内容而受到抨击。不要把它当作福音——它不隶属于 W3C,它只是有人尝试教 Web 开发。

最后,不要混淆 head*er* 标签和 head*ing* 标签;在您的情况下,它是标题,而不是标题。那是different tag entirely

【讨论】:

  • 感谢标题/标题错误
【解决方案2】:

在可以通过id 链接到任何元素之前,您可以通过name 链接到&lt;a&gt; 元素。

在锚点上使用了idname 的过渡期。除非您的目标是 Netscape 4,否则无需担心(我可能记错了,这可能是第一个支持 id 链接的浏览器,而不是最后一个不支持链接的浏览器,但无论哪种方式,它都是古老的历史)。

W3Schools 里面有很多遗留垃圾(最好避免作为学习资源)。

在标题上使用id(或在标题和相关内容所在的容器(可能是&lt;section&gt;?)上)。

【讨论】:

  • 从这个角度来看有趣的是,W3Schools 实际上选择了两全其美:他们添加了一个不必要的&lt;a&gt; 标签,但没有给它一个name,所以它实际上仍然不再是兼容。
  • 两全其美是 W3Schools 的专长。
【解决方案3】:

W3Schools 远非权威资源(请参阅http://www.w3fools.com/ 了解更多信息)。

在标题标签上定义id 非常好,the w3 documentation for HTML4.01 确实做到了。

【讨论】:

    【解决方案4】:

    这里的其他答案很好地解释了实际答案,但由于最初的(糟糕的)推荐来自 W3Schools 教程,我想向您指出一些更有信誉的资源:

    首先是MDN, the Mozilla Developer Network。尽管由 Firefox 的制造商运行,但它很好地涵盖了标准化的地方,以及不同浏览器对它们的支持程度。它往往比教程更适合技术参考,我没有找到任何直接相关的东西,但是the page documenting the &lt;a&gt; elementname 属性中包含了这个注释:

    使用说明:该属性在 HTML5 中已废弃,请改用全局属性 id。

    我提到 MDN 主要是因为它是一个非常成熟的参考站点,并且可以很好地替代 W3Schools 的那部分内容。

    其次,WebPlatform.org 与 W3Schools 不同,它隶属于 W3C 和主要浏览器的开发人员,旨在包含准确和最新的参考和教程信息,尽管其中一些仍然是正在进行中。

    他们有an HTML link tutorial 哪个directly answers your question

    您还可以在&lt;a&gt; 元素上放置一个id 属性,以使其成为页面锚点。
    [...]
    但是现在你想要支持的大多数浏览器都允许你为此编写一个快捷方式,并将 ID 直接放在你想要链接到的元素上
    [...]
    这要简单得多,因此我们建议您坚持这一点。

    【讨论】:

    • 感谢其他教程参考。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-06-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多