当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《我应该使用'name'或'id'制作HTMLAnchor吗?》经验,为你挑选了8个好方法。

当想要用" http://example.com/#foo"方法引用网页的某些部分时,应该使用

Foo Title

要么

Foo Title

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



1> Greg..:

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

对于HTML文档(以及text/html MIME类型),必须遵循以下处理模型以确定文档的指示部分.

    解析URL,并将fragid作为URL的组件.

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

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

    如果DOM中有一个元素,其name属性的值与fragid完全相等,那么树顺序中的第一个元素就是文档的指示部分; 在这里停止算法.

    否则,文档中没有指明的部分.

所以,它会寻找id="foo",然后将遵循name="foo"

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


该算法与有效性之间没有隐含的关系.当前草拟的HTML5中的
无效.
@RafaelSoares`

Foo Title `甚至可以在IE6中使用,也是[HTML 4.01规范]的一部分(http://www.w3.org/TR/html401/struct/links. HTML#H-12.1.1)
实际上它并不适用于其他"命名元素".就名称属性而言,它仅适用于
.但是,作者可能不会使用该属性.旧版HTML页面的用户代理必须尊重它.
它不会寻找name ="foo",而是寻找
.见[link](http://www.w3.org/html/wg/drafts/html/master/browsers.html#the-indicated-part-of-the-document)
在一个带有`name ="foo"`和`id ="foo"`的HTML5文档中(与页面中的顺序无关),Chrome和Firefox将跳转到`id`,但IE(在11中测试)和Edge将跳转到`name`
@ColeJohnson它仍然无效.

2> hsivonen..:

您不应该使用

Foo Title

任何HTML格式text/html,因为不支持XML空元素语法text/html.但是,

Foo Title

在HTML4中可以.它在当前草拟的HTML5中无效.

Foo Title

在HTML4和HTML5中都可以.这在Netscape 4中不起作用,但你可能会使用其他一些在Netscape 4中不起作用的功能.


在2016年读这个就像..*Netscape 4?*
@Hashbrown无法找到答案,所以我做了一些测试.我发现即使是非常古老的浏览器也会根据URL片段和[兼容性]将`id`视为`name`锚点(https://developer.mozilla.org/en-US/docs/Web/CSS/:target) CSS`:target`选择器的#Browser_compatibility).测试:Chrome 6,Firefox 1.5,IE6,Opera 8.02,Safari 3.1.2,Netscape 7.2,Lynx 2.24和移动浏览器:Android 2.2,Chrome 26,Dolphin 9.3,Firefox 19,IE10,Safari 4和Opera Mini 5.1.
+1代表浏览器支持.NS4是唯一不支持url#id => element.id的人吗?

3> Tim Knight..:

我不得不说你是否要链接到页面中的那个区域...比如page.html#foo和Foo Title不是你应该使用的链接:

Foo Title

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



4> Zoltán Morva..:

维基百科大量使用此功能,如下所示:

[...]
History

维基百科正在为每个人工作,所以我觉得这个表格很安全.

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

命名锚点 - 我的投票是避免:

"名称和ID在同一名称空间中......" - 具有相同名称空间的两个属性非常疯狂.我们只是说已经弃用了.

"锚定没有href属性的元素" - 再一次,元素的性质(超链接或非超链接)是通过具有属性来定义的.双重疯狂.常识说要完全避免它.

如果您在没有伪类的情况下设置锚点样式,则样式适用于每个样式.在CSS3中,您可以使用属性选择器(或每个伪类的相同样式)来解决这个问题,但仍然是一种解决方法.这通常不会出现,因为您为每个伪类选择颜色,并且默认情况下存在下划线只有删除才有意义,这使得它与其他文本相同.但是你决定把你的链接变粗,这会给你带来麻烦.

Netscape 4可能不支持id功能,但仍然是未知属性不会造成任何麻烦.这就是我所说的兼容性.



5> 小智..:

Foo Title

是什么应该使用.除非您想要链接,否则不要使用锚点.



6> mikemaccana..:

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

Foo Title

刚刚创建了JS全局:

window.foo

的价值window.foo将是HTMLElementh1.

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

Foo Title


好消息是你不能覆盖`window`中定义的函数.例如,`
`不会覆盖函数`window.open`.

7> Spikolynn..:

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


这没有说明"不会在旧浏览器上运行". - 除了Netscape 4之外,这些浏览器是哪些?
我尝试在div上使用id,它甚至可以在IE 7中运行.虽然不能在IE 6中测试..但是现在谁使用IE 6 ...
你有这些索赔的来源吗?别误会我的意思; 我只是普遍感兴趣.

8> erickson..:

没有语义差异; 标准的趋势是使用id而不是name.但是,name在某些情况下,可能会导致人们偏好.HTML 4.01规范提供以下提示:

使用idname?作者在决定是否使用idname使用锚名称时应考虑以下问题:

id属性不仅可以充当锚名称(例如,样式表选择器,处理标识符等).

某些较旧的用户代理不支持使用id属性创建的锚点.

name属性允许更丰富的锚名称(包含实体).


要明确的是,当他们说"老用户代理"时,他们指的是真正的旧用户代理.我不担心.
FWIW,我无法在Safari for iOS 5中使用`id`锚点,所以它不仅仅是'09年已经"老了"的浏览器.我不得不添加`name`s以使我的网站在iPad上正常工作.这可能已经修复了,我没有任何iOS 6设备可以检查.
推荐阅读
雨天是最美
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有