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

孤者浪人 提交于 2020-03-06 20:54:16

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


#1楼

通常创建无序列表是为了将它们用作菜单,但是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光标可能使用户认为菜单项不可单击。 因此,您仍然需要href ,但不需要指向任何地方的链接。

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

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

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


#2楼

关于超链接:

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

杂凑:

超级链接中的井号( #指定了应将窗口滚动到的html元素ID。

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

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

滚动到顶部:

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

看到这个演示。

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

超链接占位符:

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

关于定位标记:

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

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


#3楼

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

来自Mozilla开发人员网络

href

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

另外,按照HTML5 规范

如果a元素没有href属性,则该元素表示一个占位符,否则可能会放置一个链接(如果存在的话),该链接仅由元素的内容组成。


#4楼

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

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

#5楼

不幸的是, <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]/#"> ,导致导航异常。 any logable errors are being generated, you won't see them in the latter case unless you enable persistent logs. 正在生成任何可记录错误,则在后一种情况下,除非启用持久日志,否则您将看不到它们。

used as a non-anchor it have its href set to javascript:void(0); 如果锚定元件用作一个非锚定它有其href设置javascript:void(0); degradation. 为了降级。

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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!