我应该用'name'还是'id'制作HTML锚？
当想要使用“http://example.com/#foo”方法引用网页的某个部分时，应该使用
<h1><a name="foo"/>Foo Title</h1>
或者
<h1 id="foo">Foo Title</h1>
它们都有效，但它们是平等的，还是它们有语义上的差异？
http://example.com#foo（所以在 # 之前没有 /）
http://example.com#foo 和 http://example.com/#foo 在 URI 的 RFC 中定义是等价的。
根据 HTML 5 规范，5.9.8 Navigating to a fragment identifier：
对于 HTML 文档（和 text/html MIME 类型），必须遵循以下处理模型来确定文档的指示部分是什么。解析 URL，让 fragid 成为 URL 的
所以，它会寻找 id="foo"，然后会跟随 name="foo"
编辑：正如@hsivonen 所指出的，在 HTML5 中 a 元素没有 name 属性。但是，上述规则仍然适用于其他命名元素。
您不应在作为 text/html 的任何形式的 HTML 中使用 <h1><a name="foo"/>Foo Title</h1>，因为 text/html 不支持 XML 空元素语法。但是，<h1><a name="foo">Foo Title</a></h1> 在 HTML4 中是可以的。它在当前起草的 HTML5 中无效。
<h1 id="foo">Foo Title</h1> 在 HTML4 和 HTML5 中都可以。这在 Netscape 4 中不起作用，但您可能会使用十几个在 Netscape 4 中不起作用的其他功能。
id 视为在 URL 片段和 CSS :target 选择器的 compatibility 方面的 name 锚。已测试：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。
我不得不说，如果您要链接到页面中的那个区域......例如 page.html#foo 和 Foo Title 不是您应该使用的链接：
<h1 id="foo">Foo Title</h1>
如果您改为在其周围添加 <a> 引用，则您的标题将受到您网站内 <a> 特定 CSS 的影响。这只是额外的标记，你不应该需要它。我强烈建议在标题上放置一个 id，它不仅格式更好，而且允许您在 Javascript 或 CSS 中处理该对象。
Wikipedia 大量使用此功能，如下所示：
<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>
维基百科适用于所有人，所以我会觉得坚持使用这种形式是安全的。
也不要忘记，您不仅可以将它用于跨度，还可以用于 div 甚至表格单元格，然后您可以访问元素上的 :target 伪类。请注意不要更改宽度，例如粗体文本，因为这会移动内容，这很令人不安。
命名锚 - 我的投票是避免：
“名称和 ID 在同一个命名空间中......” - 具有相同命名空间的两个属性简直太疯狂了。让我们说已经弃用。
“没有 href 属性的锚元素” - 再一次，元素的性质（超链接与否）是通过具有属性来定义的？！双疯。常识说要完全避免它。
如果您曾经为没有伪类的锚设置样式，则样式适用于每个锚。在 CSS3 中，您可以使用属性选择器（或每个伪类的相同样式）来解决这个问题，但它仍然是一种解决方法。这通常不会出现，因为您为每个伪类选择颜色，并且默认情况下存在的下划线只有删除才有意义，这使其与其他文本相同。但是你曾经决定让你的链接加粗，这会带来麻烦。
Netscape 4 可能不支持 id 功能，但未知属性仍然不会造成任何问题。这就是我所说的兼容性。
a {color:red} 设置样式，它将为您的 <a href> 着色。链接和你的<名字>碎片。您可以使用伪类 a:link {color:red]} 或属性选择器 a:not([href]) {color:red;} 来解决这个问题
<a name="heading1"></a> ... document.html#heading1 非常有用，因为该 ID 可能与页面上的另一个 ID 发生冲突。很遗憾他们没有在 HTML5 中添加 name 属性。
<h1 id="foo">Foo Title</h1>
是应该使用的。除非您需要链接，否则不要使用锚点。
JavaScript 用户注意：所有 ID 都成为 window 下的全局变量。
<h1 id="foo">Foo Title</h1>
刚刚创建了 JS 全局：
window.foo
window.foo 的值将是 h1 的 HTMLElement。
除非您可以保证 id 属性中使用的所有值都是安全的，否则您可能更愿意坚持使用 name：
<h1 name="foo">Foo Title</h1>
window 中定义的函数。例如，<div id="open"></div> 不会覆盖函数 window.open。
没有语义差异；标准的趋势是使用 id 而不是 name。但是，在某些情况下，存在一些差异可能会导致人们更喜欢 name。 HTML 4.01 规范提供 the following hints：
使用 id 还是 name？作者在决定是否使用 id 或 name 作为锚名称时应考虑以下问题：
id 属性不仅可以用作锚名称（例如，样式表选择器、处理标识符等）。
一些较旧的用户代理不支持使用 id 属性创建的锚点。
name 属性允许更丰富的锚名称（带有实体）。
id 锚点在 iOS 5 的 Safari 中工作，所以不仅仅是浏览器在 09 年就已经“非常旧”了。我必须添加 name 才能让我的网站在 iPad 上正常工作。这可能现在已经修复，我没有任何 iOS 6 设备可供检查。
id 锚似乎普遍适用。如果 this simple example 在您的手机上不起作用，我会检查设备的辅助功能设置。 （@deathApril Wikipedia 移动网站有 Javascript，可以有效地导致 URL 片段被忽略。）
ID 方法不适用于旧浏览器，锚名称方法将在较新的 HTML 版本中被弃用......我会选择 id。
在 html 5 中，id="" 属性定义了元素的唯一标识符，它也是片段链接的锚点。在以前的 html 标准中，<a> 元素的 name="" 属性定义片段链接的锚点。我推荐类似：<a name="foo" id="foo"></a><h1>Foo Title</h1>
因为对 id="" 属性的支持有点参差不齐（尽管所有主流浏览器的最新版本都支持它，但不超过几年前[如果没有充分的理由，最好不要破坏某些东西]）。它是兼容的，&它不会为链接元素中的任何内容设置样式，用于结束 </a>仍然在元素之外，但在所有当前标准中仍然有效。
确保 <a> 元素的 name="" 和 id="" 属性相同。
name 属性；将属性放在 hN 或 span 上不起作用。
我有一个由许多垂直堆叠的 div 容器组成的网页，格式相同，仅序列号不同。我想在每个 div 的顶部隐藏名称锚点，因此最经济的解决方案是将锚点作为 id 包含在打开的 div 标签中，即
<div id="[serial number]" class="topic_wrapper">
第二个示例将唯一 ID 分配给相关元素。然后可以使用 DHTML 操作或访问该元素。
另一方面，第一个在文档中设置一个命名位置，类似于书签。附加到“锚”上，这很有意义。
只是对标记的观察 以前的 HTML 版本中的标记表单提供了一个锚点。 HTML5 中使用 id 属性的标记表单虽然大部分是等效的，但需要一个元素来识别，几乎所有这些通常都包含内容。
例如，可以使用一个空的 span 或 div，但这种用法看起来和闻起来都变质了。
一种想法是为此目的使用 wbr 元素。 wbr 有一个空的内容模型，并简单地声明可以换行；这仍然是对标记标记的略微无偿使用，但比无偿的文档划分或空文本跨度要少得多。
如何对旧浏览器使用 name 属性，对新浏览器使用 id 属性。这两个选项都将被使用，并且默认情况下将实现回退方法！！！
现在不是关于支持，因为谁会在 2021 年关心比 IE6 更旧的浏览器？
请注意，Stackoverflow 仍在使用锚点和“名称”属性而不是“名称”属性。
为什么？
因为你：
SINGLE 元素上的 id 不能有两个值。
#sample { 颜色：红色； }
好的，您可以说您可以为此使用“类”。
这是真的，但如果您的网站上只有一个元素需要设置样式，那么您不应该使用 class.
为什么？
因为如果您使用 CSS 选择器 #idName 并且 Web 浏览器会找到该元素，它将不会进一步查找。它可以加快您网站的加载速度。
如果您使用 .class 它需要查找 DOM 的每个位置，因为 Web 浏览器不知道您是否使用过 .class 一次或多次。
如果要在 CSS 中设置样式或使用 JS 解析它，则不能以数字开头的 'id' 值。但是，您可以使用数字开头的“名称”值。
关注公众号
不定期副业成功案例分享
想领先一步获取最新的外包任务吗？
立即订阅
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
<h1 id="foo">Foo Title</h1>甚至可以在 IE6 中使用，并且是 HTML 4.01 specification 的一部分name="foo"和id="foo"的 HTML5 文档中（与它们在页面中的顺序无关），Chrome 和 Firefox 将跳转到id，但 IE（在 11 中测试）和 Edge 将跳转到 {4 }