href="#"为什么要用它呢?

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

747263 次浏览
小开

它实际上是一个不指向任何地方的链接(它只是在URL上添加了“#”)。它被用于许多不同的原因。例如，如果您正在使用某种JavaScript/jQuery，并且不希望实际的HTML链接到任何地方。

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

小开

将“#”符号作为某个东西的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或名称，那么它就会变成“no where”。

下面是另一个类似的问题HTML锚'名称'或& # 39;id # 39; ?

小开

据我所知，它通常是一个占位符的链接，有一些JavaScript附加到他们。链接的要点是通过执行JavaScript代码来实现的;支持JS的浏览器会忽略真正的链接目标。如果浏览器不支持JS，散列标记实际上会将链接变成一个no - op。另见低调的JavaScript。

小开

无序列表通常是为了将其用作菜单而创建的，但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-cursor。i -游标可能会使用户认为菜单项不可点击。因此，你仍然需要href，但你不需要指向任何地方的链接。

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

您可以使用许多按钮堆叠在彼此的菜单列表，但列表似乎更可取。这可能就是为什么在列表标记中的锚标记中使用指向任何地方的href="#"。

你可以在CSS中设置指针样式，这是另一种选择。href="#"到任何地方可能只是设置一些样式的懒惰方式。

小开

超链接:

锚标记——<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属性只在锚实际上是超链接时才需要!读this from w3。所以，为什么不把它留给占位符呢?浏览器会为元素呈现默认样式，并会更改没有href属性的锚标记的默认样式。相反，它将被视为普通文本。它甚至改变了浏览器关于元素的行为。当鼠标悬停在没有href属性的锚上时，状态栏(屏幕底部)将不会显示。最好在锚上使用占位符href值，以确保它被视为超链接。

看这个demo . b演示风格和行为的差异。

小开

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

从Mozilla开发者网络:

href

这是定义a的锚所需要的唯一属性 超文本源链接，但在HTML5中不再需要。省略 此属性创建一个占位符链接。href属性 链接目标，URL或URL片段。一个URL Fragment是一个名称，前面有一个散列标记(#)，它指定了一个 当前文档中的内部目标位置(ID)

此外，根据HTML5 规范:

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

小开
对于空链接使用href="#"的问题是，它会把你带到页面的顶部，这可能不是你想要的操作。 为了避免这种情况，对于旧的浏览器或非html5 doctype，使用

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

不幸的是，最常见的使用<a href="#">的是懒惰的程序员，他们想要可点击的非超链接javascript编码的元素，这些元素的行为像锚一样，但他们不能为他们的非超链接元素添加cursor: pointer;或:hover样式到类中，而且他们太懒了，不愿意将href设置为javascript:void(0);。

这样做的问题是，一个<a href="#" onclick="some_function();">或另一个<a href="#" onclick="some_function();">不可避免地以javascript错误结束，而带有onclick javascript错误的锚总是以其href结束。通常情况下，这将导致跳转到页面顶部的恼人操作，但在使用<base>的站点中，<a href="#">将被处理为<a href="[base href]/#">，从而导致意想不到的导航。如果任何可记录的错误正在生成，你不会看到他们在后一种情况下，除非你启用持久日志。

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

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

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

小开

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>

提交答案