我应该使用 'Name' 还是'ID'作为 HTML 锚点？

Question

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

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

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

谢谢！

Answer 1

要直接回答您的问题，是的，您可以使用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 2

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

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

使用id属性 for 锚点，它应该在任何浏览器中按预期工作。查看此答案以了解实现详细信息：我应该使用"名称"或"id"制作 HTML 锚点吗？

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
});
});