我应该使用'name'还是'id'来创建HTML锚点？

Question

845

当想要使用 "http://example.com/#foo" 方法引用网页的某个部分时，应该使用什么？

<h1><a name="foo"/>Foo Title</h1>

或者

<h1 id="foo">Foo Title</h1>

它们都可以使用，但是它们是否完全相等，还是有语义上的区别？

- wolfie

2

链接应该是 http://example.com#foo（所以在 # 前面没有 /）。 - Dana

87

实际上，在 URIs 的一份 RFC 中定义的内容中，http://example.com#foo 和 http://example.com/#foo 是等效的。 - Oliver

1

请查看此答案：https://dev59.com/D3E95IYBdhLWcg3wJKl_#69869066 - Almir Campos

请注意，<h1 id="foo"></h1> 可以在 Javascript 中从 window.foo 引用，这可能不是您所期望的，请参见 https://dev59.com/BXRB5IYBdhLWcg3w3K8J#28568419。 - Flimm

15个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cerebrus · Answer 1

第二个示例为元素分配了唯一的ID。这个元素可以使用DHTML进行操作或访问。

另一方面，第一个示例在文档中设置了一个命名位置，类似于书签。与“锚点”相关联，它非常合理。

- jerseyboy · Answer 2

关于标记的一个观察：在之前版本的HTML中，标记表单提供了一个锚点。HTML5中使用id属性的标记表单，虽然大多数等效，但需要一个元素来标识，其中几乎所有元素都预期包含内容。

例如，可以使用空的span或div，但这种用法看起来很不正常。

有一种想法是使用wbr元素来实现这个目的。wbr具有空内容模型，并声明可能有一个换行符；这仍然是一种略显过度的标记标签使用，但比过度的文档分割或空文本跨度要少得多。

- Umesh Bagalur · Answer 3

如何在旧浏览器中使用name属性，在新浏览器中使用id属性。两种选项都会被使用，并默认实现回退方法！

- Morfidon · Answer 4

现在不是关于支持的问题，因为谁会在2021年关心比IE6更旧的浏览器呢？

请注意，Stackoverflow仍在使用锚点和“name”属性，而不是“id”属性。

为什么？

因为您：

#sample
{
  color: red; 
}

<div id="postNr4245 sample"> Sample text </div>  <!-- coloring doesn't work -->

<a href="#postNr4245">Jump to Post</a> <!-- jumping doesn't work -->

好的，你可以使用“class”来实现这样的事情。

这是真的，但是如果您的网站只有单个元素需要进行样式设置，则不应使用class。

为什么？

因为如果您使用CSS选择器#idName并且Web浏览器找到该元素，则不会继续查找。它可以加快网站的加载速度。

如果您使用.class，则需要查找DOM的每个位置，因为Web浏览器不知道您是否使用了.class一次或多次。

- Alex Fort · Answer 5

-3

整个“命名锚点”概念使用名称属性进行定义。您应该坚持使用名称，但ID属性在某些JavaScript情况下可能会很方便。

正如评论中所述，您可以始终同时使用两者以规避风险。

- Alex Fort

在同时使用时，id和name是否是全局唯一的？也就是说，我能否将同一个字符串用作id和name？ - Henrik Paul

你可以这样做，但有些人认为这是不好的做法。 - Alex Fort

10

根据HTML规范，如果同时存在name和id属性，则它们应该相同。规范还指出，name和id在同一命名空间中。虽然HTML验证器不会检查这些内容，而且我怀疑浏览器也不关心它们，但这似乎是一个好的遵循指南。 - erickson

4

现实重新定义了！<a name...从一开始就有毛病，而CSS链接样式使它变得更加不健康。 - Robert Siemer