Question

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

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

或

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

他们都工作，但他们是平等的，还是他们有语义差异？

Answer 1

根据HTML 5规范，5.9.8 Navigating to a fragment identifier：

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


解析网址，并将fragid设为＆lt; fragment＆gt; URL的组件。

如果fragid是空字符串，则文档的指示部分是文档的顶部。

如果DOM中的元素具有完全等于fragid的ID，则树顺序中的第一个这样的元素是文档的指示部分;在这里停止算法。

如果DOM中的 a 元素具有name属性，其值完全等于fragid，则树顺序中的第一个此类元素是文档的指示部分;在这里停止算法。

否则，文档中没有指明的部分。

因此，它会查找id="foo"，然后会关注name="foo"

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

Answer 2

您不应在<h1><a name="foo"/>Foo Title</h1>的任何HTML版本中使用text/html，因为text/html不支持XML空元素语法。但是，<h1><a name="foo">Foo Title</a></h1>在HTML4中没问题。它在目前草拟的HTML5中无效。

HTML4和HTML5中的

<h1 id="foo">Foo Title</h1>都可以。这在Netscape 4中不起作用，但你可能会使用其他一些在Netscape 4中不起作用的功能。

Answer 3

我必须说你是否要链接到页面中的那个区域...例如page.html＃foo和Foo Title不是你应该使用的链接：

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

如果您在其周围添加<a>引用，则您的标题会受到您网站中<a>特定CSS的影响。它只是额外的标记，你不应该需要它。我强烈建议在标题上放置一个id，它不仅形成得更好，而且还允许你在Javascript或CSS中寻址该对象。

Answer 4

维基百科大量使用此功能：

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

维基百科正在为每个人工作，所以我觉得这种形式很安全。

另外请不要忘记，您不仅可以将其用于跨度，还可以使用div或甚至表格单元格，然后您可以访问元素上的：target伪类。只要注意不要改变宽度，就像粗体文字一样，导致内容移动，这是令人不安的。

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

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

Answer 5

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

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

Answer 6

为JavaScript用户着想：所有ID都成为窗口下的全局变量。

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

刚刚创建了JS global：

window.foo

window.foo的值将是HTMLElement的{{1}}。

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

name

Answer 7

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

Answer 8

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

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

id属性不仅可以作为锚名称（例如，样式表选择器，处理标识符等）。
某些较旧的用户代理不支持使用id属性创建的锚点。
name属性允许更丰富的锚名称（包含实体）。

Answer 9

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

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

Answer 10

关于标记的观察HTML先前版本中的标记形式提供了一个锚点。 HTML5中的标记使用id属性形成，虽然大部分是等价的，但需要一个元素来识别，几乎所有元素通常都需要包含内容。

例如，可以使用空的span或div，但这种用法看起来和气味都是退化的。

一种想法是将wbr元素用于此目的。 wbr有一个空的内容模型，只是声明可以换行;这仍然是对标记标记的轻微无偿使用，但远不如无偿文档划分或空文本跨度。

Answer 11

第二个样本为相关元素分配唯一ID。然后可以使用DHTML操纵或访问此元素。

另一方面，第一个在文档中设置一个类似于书签的命名位置。附加到“锚”，它是完全合理的。

Answer 12

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

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

Answer 13

如何将旧浏览器的name属性和id属性用于新浏览器。将使用这两个选项，默认情况下将执行回退方法!!!

Answer 14

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

请注意，Stackoverflow 仍在使用锚点和 'name' 属性，而不是 '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'来做这样的事情。

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

为什么？

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

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

如果要在 CSS 中设置样式或使用 JS 对其进行解析，则不能以数字开头的 'id' 值。但是，您可以以数字开头 'name' 值。

Answer 15

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

在评论中，您可以随时使用两者来对冲您的赌注。

我应该使用'name'或'id'制作HTML Anchor吗？

15 个答案: