在许多网站上,我看到了具有的链接href="#"
。这是什么意思?这有什么用途?
在许多网站上,我看到了具有的链接href="#"
。这是什么意思?这有什么用途?
Answers:
锚标记的主要用途<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="#"
将滚动位置移到顶部。
模板预览中的一个超链接占位符有意义的示例。在模板的单页演示中,我经常看到<a href="#">
锚标记是一个超链接,但不会随处可见。为什么不将href
属性留空?空白href
属性实际上是指向当前页面的超链接。换句话说,它将导致页面刷新。正如我所讨论的,href="#"
它也是一个超链接,并导致滚动。因此,实际上是超链接占位符的最佳解决方案是href="#!"
这里的想法是希望页面上没有一个元素id="!"
(谁这样做的?
您可能想知道的另一个问题是:“为什么不只关闭href属性?”。我听到的一个常见答复是,该href
属性是必需的,因此它“应该”出现在锚点上。这是假的!href
仅当锚点实际上是超链接时才需要该属性!从w3阅读。那么,为什么不将它留给占位符呢?浏览器呈现元素的默认样式,并将更改不具有href属性的锚标记的默认样式。相反,它将被视为常规文本。它甚至可以更改浏览器有关元素的行为。在没有href属性的锚点上悬停时,状态栏(屏幕底部)将不会显示。最好在锚点上使用占位符href值,以确保将其视为超链接。
请参阅此演示,演示样式和行为差异。
.click()
方法<div></div>
,它将无法正常工作。要么必须锚点,要么必须使用touch
事件。
将“#”符号用作某事的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锚点吗?
<a href="#">...</a>
它不是“无处可去”,而是离开页面并加载site.com/#
。那怎么可能?
onclick
事件处理程序与该元素相关联,导致调用了javascript函数而将您重定向到该页面。
这是一个链接,该链接实际上无处链接(只是在URL上添加“#”)。使用它的原因有很多。例如,如果您使用某种JavaScript / jQuery,并且不希望实际的HTML链接到任何地方。
它也用于页面锚,用于重定向到页面的不同部分。
不幸的<a href="#">
是,懒惰的程序员最常使用,他们希望可点击的非超链接javascript编码的元素的行为类似于锚点,但是它们无法为非超链接元素的类添加cursor: pointer;
或:hover
样式化,并且另外懒得设置href
到javascript: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="#">
。
<base>
的影响都很大#
。感谢您指出!
通常创建无序列表是为了将它们用作菜单,但是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
,但不需要链接到任何地方。
您可以在菜单列表中使用多个div
或p
标签,但鼠标指针也将是它们的I光标。
您可以使用许多彼此堆叠的按钮来获得菜单列表,但是列表似乎更可取。这可能就是为什么在href="#"
列表标签内的定位标签中使用指向无处的那个。
您可以在CSS中设置指针样式,这是另一种选择。该href="#"
无处可能只是偷懒的方法来设置一些样式。
据我所知,它通常是带有附加JavaScript的链接的占位符。链接的要点是通过执行JavaScript代码提供的;具有JS支持的浏览器然后忽略实际的链接目标。如果浏览器不支持JS,则井号实际上将链接变成无操作。另请参见简洁的JavaScript。
正如其他一些答案所指出的那样,该a
元素需要一个href
属性并将#
用作占位符,但它也是一个历史人工制品。
href
这是用于定义超文本源链接的锚的唯一必需属性,但在HTML5中不再需要。省略此属性将创建一个占位符链接。href属性指示链接目标,可以是URL或URL片段。URL片段是一个名称,其前面带有一个井号(#),该井号指定了当前文档中的内部目标位置(ID)。
另外,按照HTML5 规范:
如果一个元素没有href属性,则该元素代表一个占位符,如果可能的话,可能会放置一个链接,如果该链接是相关的,则仅由元素的内容组成。
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>