什么是href =“#”,为什么使用它?


Answers:


344

关于超链接:

锚标记的主要用途<a></a>-是作为超链接。这基本上意味着他们会将您带到某个地方。超链接需要该href属性,因为它指定了位置。

杂凑:

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

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

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

滚动到顶部:

href="#"未指定ID名称,但具有相应的位置-页面顶部。单击锚点href="#"将滚动位置移到顶部。

看到这个演示。

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

超链接占位符:

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

关于定位标记:

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

请参阅此演示,演示样式和行为差异。


1
完成答案。但是,答案中的术语模板预览是什么意思?
过度兑换

3
@overexchange例如,请参阅此页面及其上的链接:ironsummitmedia.github.io/startbootstrap-creative只是用于演示一组CSS / HTML,WordPress主题等内容的html页面,而不是真实页面,因此链接不需要到任何地方。
m59

1
@Yeung更改哈希(这是#之后的url的一部分)不会调用服务器。您将使用javascript更改页面。关于这个主题有很多话要说,这超出了本文的范围。
2016年

2
此外,随机花絮,Android浏览器(浏览器,Chrome等)将不会接受锚点标签以外的任何点击事件。假设您要在上使用jQuery的.click()方法<div></div>,它将无法正常工作。要么必须锚点,要么必须使用touch事件。
Steely

1
@QHarr我不是很肯定,但这应该是因为一个空的“#”不指向任何内容,所以与将其关闭无关,而将其关闭则仅指该页面,并且页面始于除非另有说明。换句话说,也许这并不意味着“滚动到顶部”,而是意味着什么也没有,即“转到此页面”,这恰好意味着转到页面顶部。
m59,19年

85

将“#”符号用作某事的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”或“ id”的HTML锚点吗?


1
具有ID的元素-不必是命名锚(实际上,命名锚已经被弃用了一段时间了)。
Oded

2
我来到这里是因为<a href="#">...</a>它不是“无处可去”,而是离开页面并加载site.com/#。那怎么可能?
doug65536 2013年

7
@ doug65536最有可能是因为onclick事件处理程序与该元素相关联,导致调用了javascript函数而将您重定向到该页面。
jtate 2014年

32

这是一个链接,该链接实际上无处链接(只是在URL上添加“#”)。使用它的原因有很多。例如,如果您使用某种JavaScript / jQuery,并且不希望实际的HTML链接到任何地方。

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


40
只是要补充一点,它并不是到任何地方的链接……在滚动页面上,它将自动将您滚动到顶部。
米斯科(Misko)

26

不幸的<a href="#">是,懒惰的程序员最常使用,他们希望可点击的非超链接javascript编码的元素的行为类似于锚点,但是它们无法为非超链接元素的类添加cursor: pointer;:hover样式化,并且另外懒得设置hrefjavascript:void(0);

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

如果锚定元件用作一个非锚定它具有其href设置为javascript:void(0);用于起见优雅降级。

我只是浪费了两天时间来调试应该只是刷新页面的随机意外页面重定向,最后将其跟踪到引发的click事件的函数<a href="#">。更换#javascript:void(0);固定它。

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


4
“如果将锚元素用作非锚元素,则应将其href设置为javascript:void(0);以便正常降级。” [需要引用]
Vito De Tullio

Y,无论有无,Y <base>的影响都很大#。感谢您指出!
LeOn-韩立

我只是浪费了两天时间来调试应该只是刷新页面的随机的,意外的页面重定向,最后将其跟踪到引发<a href="#">的click事件的函数。用javascript:void(0)替换#。固定它。-我做了同样的事情,也解决了我的问题。

23

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

<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光标可能使用户认为菜单项不可单击。因此,您仍然需要一个href,但不需要链接到任何地方。

您可以在菜单列表中使用多个divp标签,但鼠标指针也将是它们的I光标。

您可以使用许多彼此堆叠的按钮来获得菜单列表,但是列表似乎更可取。这可能就是为什么在href="#"列表标签内的定位标签中使用指向无处的那个。

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


14

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

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

2
我发现此解决方案在一种情况下特别有用:在我的应用程序中,href ='“”用于实现注销(进入登录页面)功能。如果我将href =“#”用于其他目的,则有时它将带我返回登录页面。将href =“#”更改为href =“ javascript:void(0)”后,此问题已解决。

13

据我所知,它通常是带有附加JavaScript的链接的占位符。链接的要点是通过执行JavaScript代码提供的;具有JS支持的浏览器然后忽略实际的链接目标。如果浏览器不支持JS,则井号实际上将链接变成无操作。另请参见简洁的JavaScript


13

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

来自Mozilla开发人员网络

href

这是用于定义超文本源链接的锚的唯一必需属性,但在HTML5中不再需要。省略此属性将创建一个占位符链接。href属性指示链接目标,可以是URL或URL片段。URL片段是一个名称,其前面带有一个井号(#),该井号指定了当前文档中的内部目标位置(ID)。

另外,按照HTML5 规范

如果一个元素没有href属性,则该元素代表一个占位符,如果可能的话,可能会放置一个链接,如果该链接是相关的,则仅由元素的内容组成。


1

href属性定义链接资源的URL。如果anchor标签没有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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.