当人们想用“http://example.com/#foo“方法,应该使用

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

or

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

它们都有效,但它们是相等的,还是有语义差异?


当前回答

注意JavaScript用户:所有ID都成为窗口下的全局变量。

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

刚刚创建了JS全局:

window.foo

window.foo的值将是h1的HTMLElement。

除非您能保证id属性中使用的所有值都是安全的,否则您可能更喜欢使用名称:

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

其他回答

第二个示例为所讨论的元素分配一个唯一的ID。然后可以使用DHTML操纵或访问该元素。

另一方面,第一个方法在文档中设置一个命名位置,类似于书签。连接到一个“锚”,这是完全合理的。

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

请注意,Stacksoverflow仍在使用锚点和“name”属性,而不是“name”特性。

Why?

因为你:

SINGLE元素上的id不能有两个值。

#样品{颜色:红色;}<div id=“postNr4245 sample”>示例文本</div><!--着色不起作用--><a href=“#postNr4245”>跳转到帖子</a><!--跳跃不起作用-->

好吧,你可以说你可以用“class”来实现这一点。

这是真的,但如果只有一个元素需要在站点上设置样式,那么就不应该使用类。

Why?

因为如果您使用CSS选择器#idName,并且web浏览器找到了该元素,它就不会再看下去了。它加快了网站的加载速度。

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

如果要在CSS中设置“id”值的样式或使用JS解析它,则不能以数字开头。但是,可以以数字开头“name”值。

旧浏览器使用name属性,新浏览器使用id属性怎么样。将使用这两个选项,默认情况下将实现回退方法!!!

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

对于HTML文档(以及text/HTML MIME类型),必须遵循以下处理模型来确定文档的指定部分是什么。解析URL,让fragid成为URL的<fragment>组件。如果fragid是空字符串,那么文档的指示部分就是文档的顶部。如果DOM中有一个元素的ID正好等于fragid,那么树顺序中的第一个这样的元素就是文档的指定部分;在这里停止算法。如果DOM中有一个元素的name属性的值正好等于fragid,那么树顺序中的第一个这样的元素就是文档的指定部分;在这里停止算法。否则,文件中没有指明的部分。

因此,它将查找id=“foo”,然后将跟随name=“foo“

编辑:正如@hsiwonen所指出的,在HTML5中,a元素没有name属性。然而,上述规则仍然适用于其他命名元素。

注意JavaScript用户:所有ID都成为窗口下的全局变量。

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

刚刚创建了JS全局:

window.foo

window.foo的值将是h1的HTMLElement。

除非您能保证id属性中使用的所有值都是安全的,否则您可能更喜欢使用名称:

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