什么是 href="#" 以及为什么使用它？

Question

在许多网站上，我看到有 href="#" 的链接。这是什么意思？它是干什么用的？

原文由 Samir Ghobril 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

关于超链接：

锚标签 - <a></a> 的主要用途是作为 超链接。这基本上意味着他们带你去某个地方。超链接需要 href 属性，因为它指定了一个位置。

哈希：

超链接中的散列 - `#` 指定窗口应滚动到的 HTML 元素 ID。

href="#some-id" 将滚动到当前页面上的元素，例如 <div id="some-id"> 。

href="//site.example/#some-id" 将转到 site.example 并滚动到该页面上的 ID。

滚动到顶部：

href="#" 没有指定 id 名称，但有相应的位置 - 页面顶部。单击带有 href="#" 的锚点会将滚动位置移动到顶部。

看这个演示。

根据 w3 文档，这是预期的行为。

超链接占位符：

超链接占位符有意义的一个例子是在模板预览中。在模板的单页演示中，我经常看到 <a href="#"> 锚标记是一个超链接，但不会去任何地方。为什么不将 href 属性留空？空白 href 属性实际上是指向当前页面的超链接。换句话说，它会导致页面刷新。正如我所讨论的， href="#" 也是一个超链接，并导致滚动。因此，超链接占位符的最佳解决方案实际上是 href="#!" 这里的想法是希望页面上没有元素 id="!" （谁做的！？）和超链接因此什么也没有——所以什么也没有发生。

关于锚标签：

您可能想知道的另一个问题是，“为什么不直接关闭 href 属性呢？”。我听到的一个常见反应是 href 属性是必需的，因此它“应该”出现在锚点上。这是错误的！ href 属性只需要一个锚点实际上是一个超链接！ 从 w3 阅读这个。那么，为什么不把它留给占位符呢？浏览器呈现元素的默认样式，并将更改没有 href 属性的锚标记的默认样式。相反，它将被视为常规文本。它甚至改变了浏览器关于元素的行为。悬停在没有 href 属性的锚点上时，不会显示状态栏（屏幕底部）。最好在锚点上使用占位符 href 值，以确保将其视为超链接。

请参阅演示 风格和行为差异的演示。

原文由 m59 发布，翻译遵循 CC BY-SA 4.0 许可协议