826

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

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

或者

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

它们都有效，但它们是平等的，还是它们有语义上的差异？

4

15 回答 15

651

根据 HTML 5 规范，5.9.8 导航到片段标识符：

对于 HTML 文档（和 text/html MIME 类型），必须遵循以下处理模型来确定文档的指示部分是什么。

  1. 解析 URL，让 fragid 成为 URL 的 <fragment> 组件。
  2. 如果 fragid 是空字符串，则文档的指示部分是文档的顶部。
  3. 如果 DOM 中有一个元素的 ID 正好等于 fragid，那么树顺序中的第一个这样的元素就是文档的指示部分；在这里停止算法。
  4. 如果 DOM 中有一个a元素的 name 属性的值正好等于 fragid，那么树顺序中的第一个这样的元素就是文档的指示部分；在这里停止算法。
  5. 否则，文档中没有指定的部分。

所以，它会寻找id="foo"，然后会跟随name="foo"

编辑：正如@hsivonen 所指出的，在 HTML5 中该a元素没有 name 属性。但是，上述规则仍然适用于其他命名元素。

于 2009-01-27T19:10:54.667 回答
192

您不应该<h1><a name="foo"/>Foo Title</h1>在任何风格的 HTML 中使用 . text/html，因为 XML 空元素语法在text/html. 但是，<h1><a name="foo">Foo Title</a></h1>在 HTML4 中是可以的。它在当前起草的 HTML5 中无效。

<h1 id="foo">Foo Title</h1>在 HTML4 和 HTML5 中都可以。这在 Netscape 4 中不起作用，但您可能会使用十几个在 Netscape 4 中不起作用的其他功能。

于 2009-01-27T19:37:39.587 回答
55

我不得不说，如果您要链接到页面中的那个区域......例如 page.html#foo 和 Foo Title 不是您应该使用的链接：

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

如果您改为在其<a>周围添加参考，您的标题将受到<a>您网站中特定 CSS 的影响。这只是额外的标记，你不应该需要它。我强烈建议在标题上放置一个 id，它不仅格式更好，而且允许您在 Javascript 或 CSS 中处理该对象。

于 2009-01-27T19:03:32.807 回答
30

Wikipedia 大量使用此功能，如下所示：

<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>

维基百科适用于所有人，所以我会觉得坚持使用这种形式是安全的。

也不要忘记，您不仅可以将它用于跨度，还可以用于 div 甚至表格单元格，然后您可以访问元素上的 :target 伪类。请注意不要更改宽度，例如粗体文本，因为这会移动内容，这很令人不安。

命名锚 - 我的投票是避免：

  • “名称和 ID 在同一个命名空间中......” - 具有相同命名空间的两个属性简直太疯狂了。让我们说已经弃用。
  • “没有 href 属性的锚元素” - 再一次，元素的性质（超链接与否）是通过具有属性来定义的？！双疯。常识说要完全避免它。
  • 如果您曾经为没有伪类的锚设置样式，则样式适用于每个锚。在 CSS3 中，您可以使用属性选择器（或每个伪类的相同样式）来解决这个问题，但它仍然是一种解决方法。这通常不会出现，因为您为每个伪类选择颜色，并且默认情况下存在的下划线只有删除才有意义，这使其与其他文本相同。但是你曾经决定让你的链接加粗，这会带来麻烦。
  • Netscape 4 可能不支持 id 功能，但未知属性仍然不会造成任何问题。这就是我所说的兼容性。
于 2013-03-25T14:46:17.350 回答
15 
<h1 id="foo">Foo Title</h1>

是应该使用的。除非您需要链接，否则不要使用锚点。

于 2009-06-25T19:49:25.930 回答
14

JavaScript 用户注意：所有 ID 都成为 window 下的全局变量。

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

刚刚创建了 JS 全局：

window.foo

的值window.foo将是HTMLElement的h1。

除非您可以保证id属性中使用的所有值都是安全的，否则您可能更喜欢坚持name：

<h1 name="foo">Foo Title</h1>
于 2015-02-17T18:23:14.940 回答
9

ID 方法不适用于旧浏览器，锚名称方法将在较新的 HTML 版本中被弃用......我会选择 id。

于 2009-01-27T19:02:54.400 回答
9

没有语义差异；标准的趋势是使用id而不是name. 但是，在某些情况下，存在一些差异可能会导致人们更喜欢name。HTML 4.01 规范提供了以下提示：

使用id或name？id作者在决定是否使用name锚名称时应考虑以下问题：

  • id 属性不仅可以用作锚名称（例如，样式表选择器、处理标识符等）。
  • 一些较旧的用户代理不支持使用 id 属性创建的锚点。
  • name 属性允许更丰富的锚名称（带有实体）。
于 2009-01-27T19:26:58.970 回答
4

在 html 5 中，id=""属性定义了元素的唯一标识符，它也是片段链接的锚点。在以前的 html 标准中，元素的name=""属性<a>定义了片段链接的锚点。我推荐这样的东西：
<a name="foo" id="foo"></a><h1>Foo Title</h1>
因为对id=""属性的支持有点参差不齐（即使所有主要浏览器的最新版本都支持它，但不超过几年的版本[而且最好不要破坏某些东西如果没有充分的理由]）。它是兼容的，并且它不会为链接元素中的任何内容设置样式，因为结束 </a> 仍然在元素之外，但它在所有当前标准中仍然有效。

确保元素 的name=""和id=""属性相同。<a>

于 2017-06-25T17:45:45.427 回答
3

我有一个由许多垂直堆叠的 div 容器组成的网页，格式相同，仅序列号不同。我想在每个 div 的顶部隐藏名称锚点，因此最经济的解决方案是将锚点作为 id 包含在打开的 div 标签中，即

<div id="[serial number]" class="topic_wrapper">
于 2012-06-13T02:10:20.843 回答
2

第二个示例将唯一 ID 分配给相关元素。然后可以使用 DHTML 操作或访问该元素。

另一方面，第一个在文档中设置一个命名位置，类似于书签。附加到“锚”上，这很有意义。

于 2009-01-27T19:04:36.863 回答
2

只是对标记的观察 以前的 HTML 版本中的标记表单提供了一个锚点。HTML5 中使用 id 属性的标记表单虽然大部分是等效的，但需要一个元素来识别，几乎所有这些通常都包含内容。

例如，可以使用一个空的 span 或 div，但这种用法看起来和闻起来都变质了。

一种想法是为此目的使用 wbr 元素。wbr 有一个空的内容模型，并简单地声明可以换行；这仍然是对标记标记的略微无偿使用，但比无偿的文档划分或空文本跨度要少得多。

于 2011-12-31T04:23:07.713 回答
1

如何对旧浏览器使用 name 属性，对新浏览器使用 id 属性。这两个选项都将被使用，并且默认情况下将实现回退方法！！！

于 2013-06-20T07:36:49.410 回答
0

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

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

为什么？

因为你：

  1. SINGLE 元素上的 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.

为什么？

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

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

  1. 如果要在 CSS 中设置样式或使用 JS 解析，则不能以数字开头 ' id ' 值。但是，您可以使用数字开始 ' name ' 值。
于 2021-06-24T09:54:13.247 回答
-3

根据定义，整个“命名锚”概念使用名称属性。您应该只使用名称，但 ID 属性对于某些 javascript 情况可能很方便。

如评论中所述，您始终可以同时使用两者来对冲您的赌注。

于 2009-01-27T18:59:13.720 回答