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

故事扮演 提交于 2019-12-20 20:27:10

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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

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

要么

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

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


#1楼

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

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


#2楼

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

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

#3楼

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

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

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

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

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

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

#4楼

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


#5楼

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

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

刚刚创建了JS全局:

window.foo

window.foo的值将是h1HTMLElement

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

<h1 name="foo">Foo Title</h1>
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!