我应该用'name'或'id'制作超文本标记语言锚吗？

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

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

或

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

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

664842 次浏览
小开

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

就像在评论中一样，你总是可以用两者来对冲你的赌注。

小开

ID方法将不适用于旧的浏览器，锚名称方法将在较新的超文本标记语言版本中被弃用…

小开

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

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

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

小开

第二个示例为有问题的元素分配一个唯一的ID。然后可以使用DHTML操作或访问该元素。

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

小开
最佳答案

根据超文本标记语言5规范，5.9.8导航到片段标识符：

对于超文本标记语言文档（以及text/html MIME类型），必须遵循以下处理模型来确定文档的指示部分是什么。

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

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

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

小开

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

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

  • id属性不仅仅可以充当锚点名称（例如，样式表选择器、处理标识符等）。
  • 一些较旧的用户代理不支持使用id属性创建的锚点。
  • name属性允许更丰富的锚名称（带有实体）。
小开

您不应该在任何作为text/html的超文本标记语言中使用<h1><a name="foo"/>Foo Title</h1>，因为text/html不支持XML空元素语法。但是，<h1><a name="foo">Foo Title</a></h1>在HTML4中是可以的。它在当前起草的HTML5中无效。

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

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

是应该使用的。除非你想要一个链接，否则不要使用锚点。

小开

超文本标记语言早期版本中的标记表单提供了一个锚点。HTML5中使用id属性的标记表单虽然大部分是等效的，但需要一个元素来识别，几乎所有这些元素通常都应包含内容。

例如，可以使用空的跨度或div，但这种用法看起来和闻起来都很退化。

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

小开

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

<div id="[serial number]" class="topic_wrapper">
小开

维基百科大量使用这个功能，如下所示：

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

维基百科是为每个人工作的，所以我觉得坚持这种形式是安全的。

另外别忘了，你不仅可以将其用于跨度，还可以用于div甚至表格单元格，然后你可以访问元素上的：目标伪类。只是注意不要改变宽度，就像粗体文本一样，因为这会移动内容，这很令人不安。

命名主播-我的投票是避免：

  • "名称和id在同一个命名空间中…"-两个具有相同命名空间的属性太疯狂了。让我们说已经不建议使用了。
  • "锚定没有href属性的元素"-再一次，元素的性质（超链接与否）是通过具有属性来定义的？！双重疯狂。常识说要完全避免它。
  • 如果你曾经在没有伪类的情况下设置锚点的样式，则样式适用于每个锚点。在CSS3中，你可以使用属性选择器（或每个伪类的相同样式）来解决这个问题，但它仍然是一个变通方法。这通常不会出现，因为你为每个伪类选择颜色，并且默认存在下划线，只有删除才有意义，这使其与其他文本相同。但是你决定将链接加粗，它会带来麻烦。
  • Netscape 4可能不支持id功能，但未知属性不会造成任何麻烦。这就是所谓的兼容性。
小开

旧浏览器使用name属性，新浏览器使用id属性怎么样？这两个选项都将使用，默认实现回退方法！！！

小开

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

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

刚刚创建了JS全局：

window.foo

window.foo的值将是h1的HTMLElement。

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

<h1 name="foo">Foo Title</h1>
小开

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

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

小开

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

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

为啥？

因为你：

  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 -->

好吧，你可以说你可以为了这样的事情而使用“类”。

这是真的但如果只有单一元素需要在您的网站上设置样式，那么您不应该使用类。

为啥？

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

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

  1. 如果您想在CSS中设置样式或使用JS解析它，您不能以数字开头“id”值。但是，您可以以数字开头“姓名”值。

提交答案