当想要使用“http://example.com/#foo
”方法引用某个网页的某个部分时,应该使用
<h1><a name="foo"/>Foo Title</h1>
或
<h1 id="foo">Foo Title</h1>
他们都工作,但他们是平等的,还是他们有语义差异?
答案 0 :(得分:586)
根据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
元素没有名称属性。但是,上述规则仍适用于其他命名元素。
答案 1 :(得分:173)
您不应在<h1><a name="foo"/>Foo Title</h1>
的任何HTML版本中使用text/html
,因为text/html
不支持XML空元素语法。但是,<h1><a name="foo">Foo Title</a></h1>
在HTML4中没问题。它在目前草拟的HTML5中无效。
<h1 id="foo">Foo Title</h1>
都可以。这在Netscape 4中不起作用,但你可能会使用其他一些在Netscape 4中不起作用的功能。
答案 2 :(得分:50)
我必须说你是否要链接到页面中的那个区域...例如page.html#foo和Foo Title不是你应该使用的链接:
<h1 id="foo">Foo Title</h1>
如果您在其周围添加<a>
引用,则您的标题会受到您网站中<a>
特定CSS的影响。它只是额外的标记,你不应该需要它。我强烈建议在标题上放置一个id,它不仅形成得更好,而且还允许你在Javascript或CSS中寻址该对象。
答案 3 :(得分:26)
维基百科大量使用此功能:
<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>
维基百科正在为每个人工作,所以我觉得这种形式很安全。
另外请不要忘记,您不仅可以将其用于跨度,还可以使用div或甚至表格单元格,然后您可以访问元素上的:target伪类。只要注意不要改变宽度,就像粗体文字一样,导致内容移动,这是令人不安的。
命名主播 - 我的投票是避免:
答案 4 :(得分:14)
<h1 id="foo">Foo Title</h1>
是应该使用的。除非您想要链接,否则不要使用锚点。
答案 5 :(得分:12)
为JavaScript用户着想:所有ID都成为窗口下的全局变量。
<h1 id="foo">Foo Title</h1>
刚刚创建了JS global:
window.foo
window.foo
的值将是HTMLElement
的{{1}}。
除非您能保证h1
属性中使用的所有值都是安全的,否则您可能更愿意坚持使用id
:
name
答案 6 :(得分:9)
ID方法不适用于较旧的浏览器,锚名称方法将在较新的HTML版本中弃用...我会使用id。
答案 7 :(得分:8)
没有语义差异;标准的趋势是使用id
而不是name
。但是,在某些情况下,可能会导致人们更喜欢name
。 HTML 4.01规范提供了the following hints:
使用id
或name
?在决定是否使用id
或name
作为锚名称时,作者应考虑以下问题:
答案 8 :(得分:3)
我有一个由多个垂直堆叠的div容器组成的网页,格式相同,只有序列号不同。我想在每个div的顶部隐藏名称锚点,因此最经济的解决方案是在开始div标签中包含锚点作为id,即
<div id="[serial number]" class="topic_wrapper">
答案 9 :(得分:2)
关于标记的观察HTML先前版本中的标记形式提供了一个锚点。 HTML5中的标记使用id属性形成,虽然大部分是等价的,但需要一个元素来识别,几乎所有元素通常都需要包含内容。
例如,可以使用空的span或div,但这种用法看起来和气味都是退化的。一种想法是将wbr元素用于此目的。 wbr有一个空的内容模型,只是声明可以换行;这仍然是对标记标记的轻微无偿使用,但远不如无偿文档划分或空文本跨度。
答案 10 :(得分:1)
第二个样本为相关元素分配唯一ID。然后可以使用DHTML操纵或访问此元素。
另一方面,第一个在文档中设置一个类似于书签的命名位置。附加到“锚”,它是完全合理的。
答案 11 :(得分:1)
在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>
属性相同。
答案 12 :(得分:0)
如何将旧浏览器的name属性和id属性用于新浏览器。将使用这两个选项,默认情况下将执行回退方法!!!
答案 13 :(得分:0)
现在不是关于支持,因为在 2021 年谁会关心比 IE6 更旧的浏览器?
请注意,Stackoverflow 仍在使用锚点和 'name' 属性,而不是 'name' 属性。
为什么?
因为你:
#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 一次或多次。
答案 14 :(得分:-2)
根据定义,整个“命名锚”概念使用name属性。您应该坚持使用该名称,但ID属性可能对某些javascript情况很方便。
在评论中,您可以随时使用两者来对冲您的赌注。