链接中带有井号“#”的符号是什么


93

我已经检查了一些站点,它们的网址中带有井号(#)。它有什么作用?

 <a href="#" >Link name</a>

Answers:


105

这是“片段”或“命名锚点”。您可以用来链接到文档的一部分。通常,当您链接到页面时,浏览器会在页面顶部将其打开。但是,您链接到一半的部分,则可以使用该片段链接到该标题(或其他内容)。

如果<a name="whatever"/>页面内没有标签,则浏览器将仅链接到页面顶部。如果该片段为空,那么它也将仅链接到页面顶部。

对于片段<a href="#">Link name</a>,这只是到当前页面顶部的链接。

您通常会看到与javascript结合使用的那种链接。符合标准的HTML需要一个href属性,但是如果您打算使用javascript处理请求,则“#”可以用作合理的占位符。


1
+1尽管正式用语是URL片段,而不是“哈希引用”:w3.org/TR/WD-html40-970708/htmlweb.html#h-4.1.1
Jason Hall 2010年

是的,我在回答中将其更改为“碎片”,因为这是大多数人使用的方式。我从来不知道它有一个“官方”名称:)
迪恩·哈丁

2
为什么浏览器将其视为“转到页面顶部”:从技术上讲,您更改了页面。单击链接后,您会发现#实际上已添加到地址栏中的URL中,如果单击“后退”按钮,它将再次将其删除。我不会说这是指向文档一部分的链接,而是指向文档内部某个位置的链接。否则,我输入的内容基本上相同...
animuson

通用语法允许以#结尾的URI,并且可以将其视为一种空片段。在诸如text / html或任何XML类型的MIME文档类型中,不允许使用空标识符来匹配此语法上合法的结构。Web浏览器通常在文档顶部显示空白片段。- en.wikipedia.org/wiki/Fragment_identifier
IcyBrk

同样通过“如果不存在这样的表示形式,则该片段的语义被认为是未知的,并且实际上不受约束。”来自rfc3986(tools.ietf.org/html/rfc3986#page-24
IcyBrk

23

...只是添加一些额外的有用提示。

您可以使用document.location.hashJavaScript 访问和更改它。

它可以指向已命名的锚点(例如<a name="top"></a>具有相应ID的元素(例如<div id="top"></div>)。

单独看到一个(例如<a href="#" onclick="pop()">popup</a>)通常意味着一个链接被用于专门运行JavaScript。这是不好的做法。

任何a元素都应具有href指向有效资源的。如果不存在,请考虑使用其他元素,例如button


1
这是关于它的一个很好的观点,即不是特别好的实践……但是仅仅因为它不好,并不意味着您不会发现它在整个地方都被这样使用:)
Dean Harding 2010年

1
@alex,如果这是不好的做法,请告诉我们改用什么好的做法。
瑞安·伦迪

@Kyralessa就在下一段中。无论如何,我进行了修改,希望它更清晰。
亚历克斯

2
@alex,人们使用链接而不是按钮的原因之一可能是他们想要链接的外观。链接到描述如何使按钮看起来像链接的页面怎么样?例如HTML按钮测试
Ryan Lundy

1
@alex,只不过是在链接上使用#是不好的做法。OP所要求的只是它的作用。
瑞安·伦迪

11

# 表示到锚点的链接。

我还要提些别的:

使用“#”作为激活JavaScript的链接的href不好,因为它会将页面滚动到顶部-这可能不是您想要的。而是使用javascript:void(0)


+1表示单击这些链接会迫使页面滚动到顶部。
克里斯·卡洛

4
您不再需要锚。从HTML5(也许还有HTML 4)开始,任何带有<id>标签的元素都可以被片段标识符作为目标。参见HTML5文档:whatwg.org/specs/web-apps/current-work/multipage/…–
Basil Bourque

2
都不使用javascript:void(0)- button如果不是链接,请使用a 。
亚历克斯2015年

10

井号(#)表示在页面上定位锚点。例如,如果您将其包括在页面上的某个位置:

<a name="foo"></a>

或者,最近:

<div id="foo">*part of page*</div>

然后单击页面上具有href的链接#foo,它将链接到名称或divID 的锚点foo

但是,如果您只有href #,它将引至页面顶部。


2

这将链接回到页面本身。它通常与实际上运行一些JavaScript的链接一起使用。

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.