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

Question

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

Answer 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 展示风格和行为差异。

Answer 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'?提出的另一个类似问题

Answer 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="#"> 实例。

Answer 4

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

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

Answer 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="#" 无处可去可能只是设置一些样式的懒惰方式。

Answer 6

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

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

Answer 7

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

Answer 8

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

来自Mozilla Developer Network：

href

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

另外，根据 HTML5 spec:

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

Answer 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>