我应该使用“名称”还是“ID”作为 HTML 锚？

Question

我有点困惑，我想在我的 HTML 页面中创建一个链接，该链接将跳转到另一个页面中的特定部分。 我看到了以“名称”作为锚点的示例，也看到了带有“ID”的示例。

据我了解，“名称”是一种旧样式，“ID”是新浏览器支持的新样式。 但是，如果我想确保我的链接在新旧浏览器中都能正常工作怎么办？ 我可以以某种方式将“名称”和“ID”组合在一起，以便我的链接可以在任何浏览器中工作，无论它是旧的还是新的？

一个简单的示例代码会很好。

谢谢！

Answer 1

据我所知， name属性不能用作 URL 中的锚引用。 此外， name不能用于所有类型的 HTML 元素。 例如， <a>元素没有有效的name属性。

name属性用于表单字段，它不像id属性那样是唯一的。 请参阅此处： HTML 中 id 和 name 属性之间的区别

使用id属性作为锚点，它应该可以在任何浏览器中按预期工作。 看看这个答案的实现细节：我应该用'name'还是'id'制作HTML Anchors？

Answer 2

要直接回答您的问题，是的，您可以同时使用name和id来引用命名的锚点。

但是，您必须注意两个警告：

1. 根据 W3C， name属性已过时。 即便如此，每个现代浏览器仍然会允许它。

2. 在链接的上下文中， name属性与a元素而不是div或span相关联，因此必须在该上下文中使用它。 如果您尝试在div中使用它，它将无法用于链接。 如果您还包含id属性，它可能会起作用，但浏览器使用id来定位您的链接，而不是name属性。

因此，以下内容适用于所有现代和古代浏览器：

<a name="footnote1" id="footnote1"></a>

但实际上，不再有任何理由在任何文档中使用<a name="???"> 。 与<span id="???">的链接得到了广泛的支持，除非您计划支持 1990 年代的 AOL 浏览器，否则真的没有意义。

Answer 3

Id 是更好的方法。 请看下图——

<ul class="tabs_list_block">
  <li><a href="#menu1">Menu1</a></li>
  <li><a href="#menu2">Menu2</a></li>
  <li><a href="#menu3">Menu3</a></li>
  <li><a href="#menu4">Menu4</a></li>
</ul>

<div class="tab_content">
  <div id="menu1" class="tab_content_row tab_content_row01">Menu1</div>
  <div id="menu2" class="tab_content_row tab_content_row02">Menu2</div>
  <div id="menu3" class="tab_content_row tab_content_row03">Menu3</div>
  <div id="menu4" class="tab_content_row tab_content_row04">Menu4</div>
</div>

.tabs_list_block {
    width: 100%;
    min-height: 50px; 
    display: flex;
    align-items: center;
    border-bottom: solid 1px #ccc;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff;
  } 
  .tabs_list_block li {
    border-right: solid 1px #ccc;
    flex: 1 1 auto;
    height: 100%;
    text-align: center;
  }
  .tabs_list_block li:last-child {
    border-right: 0;
  }
  .tabs_list_block li a {
    width: 100%;
    height: 100%;
    padding: 16px;
    color: #ccc;
  }
  .tab_content {
    margin-top: 50px;
  }
  .tab_content_row {
      min-height: calc(100vh - 50px);
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .tab_content_row01 {
    background-color: #ffbf73;
  }
  .tab_content_row02 {
    background-color: #eaff73;
  }
  .tab_content_row03 {
    background-color: #8cf9f0;
  }
  .tab_content_row04 {
    background-color: #ddc4ff;
  }

<script type="text/javascript">
$(".tabs_list_block").find("a").click(function(e) {
    e.preventDefault();
    var section = $(this).attr("href");
    $("html, body").animate({
        scrollTop: $(section).offset().top - 0
    });
});