html - 什么是 href ="#"，为什么要使用它？

Question

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

Answer 1

关于超链接:

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

哈希:

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

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

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

滚动到顶部:

href="#"没有指定 id 名称，但确实有一个对应的位置 - 页面顶部。单击带有 href="#" 的 anchor 会将滚动位置移动到顶部。

See this demo.

这是根据 w3 documentation. 的预期行为

超链接占位符:

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

关于 anchor 标签:

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

See this demo 展示风格和行为差异。