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

Posted 2023-03-25

【中文标题】什么是 href="#" 以及为什么使用它？

【英文标题】：What is href="#" and why is it used?

【发布时间】：2011-06-18 19:36:05

【问题描述】：

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

【参考方案1】：

关于超链接：

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

哈希：

一个哈希 - 超链接中的# 指定一个 html 元素 ID，窗口应该滚动到该元素 ID。

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

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

滚动到顶部：

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

See this demo.

这是根据 w3 documentation.

的预期行为

超链接占位符：

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

关于锚标签：

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

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

【讨论】：

完整答案。但是，您的答案中的术语 模板预览 是什么意思？

@overexchange 例如，查看此页面及其上的链接：ironsummitmedia.github.io/startbootstrap-creative 仅用于演示一组 CSS/HTML、WordPress 主题等的 html 页面，但不是真实的页面，所以链接不需要去任何地方。

@Yeung 更改哈希（即 # 后面的 url 部分）不会调用服务器。您将使用 javascript 更改页面。关于这个主题有很多话要说，超出了本文的范围。

此外，随机花絮，android 浏览器（浏览器、Chrome 等）除了锚标签外不接受任何点击事件。所以说你想在<div></div> 上使用jQuery 的.click() 方法，它是行不通的。要么必须锚定，要么您必须使用touch 事件。

@QHarr 我不是很肯定，但这应该是因为一个空的“#”不指代任何东西，所以与将其关闭相同，而将其关闭将仅指代页面，除非另有说明，否则页面从顶部开始。换句话说，也许它并不意味着“滚动到顶部”，它只是什么都没有，即“转到此页面”，恰好意味着转到页面顶部。

【参考方案2】：

将“#”符号作为某个东西的 href 意味着它不是指向不同的 URL，而是指向同一页面上的另一个 ID 或名称标签。例如：

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

但是，如果没有 id 或 name，那么它会“无处可去”。

这是HTML Anchors with 'name' or 'id'?提出的另一个类似问题

【讨论】：

具有 ID 的元素 - 它不必是命名锚（实际上命名锚已经被弃用了一段时间）。

我来到这里是因为<a href="#">...</a> 不是“无处可去”，而是离开页面并加载site.com/#。这怎么可能？

@doug65536 很可能是因为 onclick 事件处理程序绑定到该元素，导致调用了将您重定向到该页面的 javascript 函数。

【参考方案3】：

不幸的是，<a href="#"> 的最常见用途是懒惰的程序员，他们想要可点击的非超链接 javascript 编码元素，其行为类似于锚点，但他们无法将cursor: pointer; 或:hover 样式添加到他们的非超链接元素的类，并且还懒得将href设置为javascript:void(0);。

问题在于，一个<a href="#" onclick="some_function();"> 或另一个不可避免地会出现javascript 错误，而带有onclick javascript 错误的锚点总是会跟随其href。通常这最终会令人讨厌地跳转到页面顶部，但在使用<base> 的网站的情况下，<a href="#"> 被处理为<a href="[base href]/#">，从而导致意外导航。 如果生成任何可记录的错误，在后一种情况下您不会看到它们，除非您启用持久性日志。

如果一个锚元素被用作非锚元素，它应该将其href设置为javascript:void(0);以优雅 i> 退化。

我刚刚浪费了两天时间调试一个随机的意外页面重定向，该重定向应该只是刷新页面，最后将其追踪到引发<a href="#"> 的点击事件的函数。用javascript:void(0); 替换# 修复了它。

我周一要做的第一件事是清除项目中所有 <a href="#"> 实例。

【讨论】：

"如果锚元素用作非锚元素，则应将其 href 设置为 javascript:void(0); 以便优雅降级。" [需要引用]

Y，有和没有<base> 确实对# 产生了很大影响。谢谢指出！

我只是浪费了两天时间调试一个随机的意外页面重定向，该重定向应该只是刷新页面，最后追踪到一个引发 的点击事件的函数。用 javascript:void(0); 替换 #修复。 -- 我做了同样的事情，也解决了我的问题。

感谢您的简短解释。我很感激。它与后来冗长的答案相得益彰。我赞成你的回答，因为它的点，但我喜欢另一个进一步解释。我希望我能投票给两者。

【参考方案4】：

它本质上是一个链接到任何地方的链接（它只是在 URL 上添加“#”）。它用于多种不同的原因。例如，如果您使用某种 JavaScript/jQuery 并且不希望实际的 HTML 链接到任何地方。

它也用于页面锚点，用于重定向到页面的不同部分。

【讨论】：

只是补充一点，它并不是一个无处可去的链接......在滚动页面上它会自动滚动到顶部。

【参考方案5】：

创建无序列表通常是为了将它们用作菜单，但li 列表项是文本。因为列表li 项目是文本，所以鼠标指针不会是箭头，而是“I 光标”。当某些东西可点击时，用户习惯于看到指向鼠标指针的手指。在li 标签内使用锚标签a 会导致鼠标指针变为指向手指。将列表用作菜单时，手指会更好。

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

如果列表用于菜单，并且不需要链接，则不需要指定 URL。但问题是，如果你省略了href 属性，<a> 标记中的文本会被视为文本，因此鼠标指针会回到 I 光标。 I-cursor 可能会让用户认为菜单项不可点击。因此，您仍然需要href，但不需要指向任何地方的链接。

您可以在菜单列表中使用大量的div 或p 标签，但鼠标指针也可以是它们的 I 光标。

您可以在菜单列表中使用大量堆叠在一起的按钮，但列表似乎更可取。这可能就是为什么在列表标签​​内的锚标签中使用指向无处的href="#"。

您可以在 CSS 中设置指针样式，这是另一种选择。 href="#" 无处可去可能只是设置一些样式的懒惰方式。

【参考方案6】：

对空链接使用 href="#" 的问题在于，它会将您带到页面顶部，这可能不是您想要的操作。 为避免这种情况，对于旧版浏览器或非 HTML5 文档类型，请使用

<a href="javascript:void(0)">Goes Nowhere</a>

【讨论】：

我发现这个解决方案对一个场景特别有用：在我的应用程序中，href='"" 用于实现注销（带到登录页面）功能。如果我将 href="#" 用于其他目的，有时它会带我回到登录页面。将 href="#" 更改为 href="javascript:void(0)" 后，问题已解决。

【参考方案7】：

据我所知，它通常是附加了一些 JavaScript 的链接的占位符。链接的要点是通过执行 JavaScript 代码来服务的；支持 JS 的浏览器会忽略真正的链接目标。如果浏览器不支持 JS，则井号实际上会将链接变成无操作。另见unobtrusive JavaScript。

【参考方案8】：

正如其他一些答案所指出的，a 元素需要 href 属性，# 用作占位符，但它也是一个历史产物。

来自Mozilla Developer Network：

href

这是定义锚点的唯一必需属性 超文本源链接，但在 HTML5 中不再需要。省略 此属性创建一个占位符链接。 href 属性 指示链接目标，可以是 URL 或 URL 片段。网址 Fragment 是一个以井号 (#) 开头的名称，它指定一个 当前文档中的内部目标位置（ID）。

另外，根据 HTML5 spec:

如果a元素没有href属性，则该元素代表a 可能放置链接的位置的占位符，如果它 是相关的，只包含元素的内容。

【参考方案9】：

href 属性定义链接资源的 URL。如果锚标签没有href标签，那么它就不会变成超链接。 href 属性具有以下值：

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use 
<a href="javascript:void(0)">Test1</a>