Foo Title<..."> Foo Title<..."/> Foo Title<..."> Foo Title<...">

我应该使用“名称”或“ id”制作HTML锚吗?

html HTML

SamSam

2020-03-17

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

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

要么

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

它们都起作用,但是它们是相等的还是语义上的差异?

第1903篇《我应该使用“名称”或“ id”制作HTML锚吗?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

12个回答
JimEva 2020.03.17

如何在旧浏览器中使用name属性,在新浏览器中使用id属性。这两个选项都将使用,并且默认使用后备方法!

JinJin西门神乐 2020.03.17

根据定义,整个“命名锚点”概念使用name属性。您应该坚持使用名称,但是ID属性对于某些JavaScript情况可能会派上用场。

正如评论中一样,您总是可以同时使用两者来对冲您的赌注。

Itachi猪猪 2020.03.17

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

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

只是对标记的观察以前的HTML版本中的标记表单提供了一个锚点。使用id属性的HTML5中的标记表单虽然大体上是等同的,但需要一个元素来标识,通常期望其中的几乎所有元素都包含内容。

例如,可以使用空的span或div,但是这种用法看上去和嗅觉会退化。

一种想法是为此目的使用wbr元素。wbr的内容模型为空,仅声明可以换行;这仍然是标记标签的一点点免费使用,但远比免费的文档划分或空白文本范围少得多。

小胖路易 2020.03.17

第二个示例将唯一的ID分配给相关元素。然后可以使用DHTML操纵或访问此元素。

另一方面,第一个在文档中设置一个类似于书签的命名位置。附加到“锚”上,这很有意义。

理查德逆天 2020.03.17

没有语义上的差异。标准的趋势是使用id而非name但是,name在某些情况下,有些差异可能会导致人们更喜欢HTML 4.01规范提供了以下提示

使用id还是name在决定是使用锚名称id还是name使用锚名称时,作者应考虑以下问题

  • id属性不仅可以用作锚名称(例如,样式表选择器,处理标识符等)。
  • 一些较旧的用户代理不支持使用id属性创建的锚。
  • name属性允许使用更丰富的锚名称(带有实体)。
Green西里 2020.03.17

ID方法在较旧的浏览器上将不起作用,锚点名称方法将在较新的HTML版本中被弃用...我将使用id。

Tony樱 2020.03.17

我必须说,如果您要链接到页面中的该区域...,例如page.html#foo和Foo Title不是您应该使用的链接:

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

如果改为在其<a>周围放置参考,则标题将受到<a>站点内特定CSS的影响这只是额外的标记,您不需要它。我强烈建议在标题上放置一个ID,不仅ID格式更好,而且还可以使用Javascript或CSS寻址该对象。

GreenJinJin猿 2020.03.17
<h1 id="foo">Foo Title</h1>

是应该使用的。除非需要链接,否则不要使用锚点。

小卤蛋米亚蛋蛋 2020.03.17

You shouldn’t use <h1><a name="foo"/>Foo Title</h1> in any flavor of HTML served as text/html, because the XML empty element syntax isn’t supported in text/html. However, <h1><a name="foo">Foo Title</a></h1> is OK in HTML4. It is not valid in HTML5 as currently drafted.

<h1 id="foo">Foo Title</h1> is OK in both HTML4 and HTML5. This won’t work in Netscape 4, but you’ll probably use a dozen other features that don’t work in Netscape 4.

Tom小小蛋蛋 2020.03.17

面向JavaScript用户:所有ID都成为window下的全局变量

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

刚创建了JS全局:

window.foo

的值window.foo将是HTMLElementh1

除非可以保证id属性中使用的所有值都是安全的,否则您最好遵循name

<h1 name="foo">Foo Title</h1>
达蒙LEY 2020.03.17

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

对于HTML文档(和text / html MIME类型),必须遵循以下处理模型来确定文档的指示部分是什么。

  1. Parse the URL, and let fragid be the <fragment> component of the URL.
  2. If fragid is the empty string, then the indicated part of the document is the top of the document.
  3. If there is an element in the DOM that has an ID exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
  4. If there is an a element in the DOM that has a name attribute whose value is exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
  5. Otherwise, there is no indicated part of the document.

So, it will look for id="foo", and then will follow to name="foo"

Edit: As pointed out by @hsivonen, in HTML5 the a element has no name attribute. However, the above rules still apply to other named elements.

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android