什么是链接有一个“#”符号

时间:2010-05-10 03:44:03

标签: html

我检查了一些网站,他们在网址上有一个(#)标记。它做了什么?

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

7 个答案:

答案 0 :(得分:101)

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

如果页面中没有<a name="whatever"/>标记,则浏览器只会链接到页面顶部。如果片段为空,那么它也只链接到页面顶部。

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

您经常会看到与javascript结合使用的那种链接。符合标准的HTML需要href属性,但如果您计划使用javascript处理请求,则“#”将作为合理的占位符。

答案 1 :(得分:23)

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

您可以使用JavaScript中的document.location.hash来访问和更改它。

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

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

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

答案 2 :(得分:10)

#表示指向锚点的链接。

我知道我还会提到别的东西:

使用'#'作为激活JavaScript的链接的href是不好的,因为它将页面滚动到顶部 - 这可能不是你想要的。相反,请使用javascript:void(0)

答案 3 :(得分:9)

井号(#)表示在页面上找到锚点。例如,如果您在页面的某处包含此内容:

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

或者,最近:

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

然后点击页面上包含href #foo的链接,它会导航到名称为div且ID为foo的锚点。

但是,如果您只是拥有href #,它将会显示在页面顶部。

答案 4 :(得分:2)

这会链接回页面本身。它经常用于实际运行一些JavaScript的链接。

答案 5 :(得分:0)

我认为这里的大多数海报都忘记了如何使用内部链接。

典型的 <a> 元素使用 href 属性链接到外部 URL/URI(网站)。但是大多数新开发人员没有意识到您还可以通过使用“#”和标识符来链接到网页的内部部分。执行此跨浏览器的最简单方法是使用以下 HTML:

本页链接...

<a href="#section1">Go to Section 1</a>

...转到此页面位置。

<a id="section1" name="section1"></a>

“#section1”href 值称为“片段标识符”,当您单击链接时,它会出现在您浏览器的 URL 中。然后,您的页面将在您的 HTML 页面中查找此标识符并自动向下滚动页面。

请注意,我已使用锚点 <a> 标记作为链接的接收器。传统上这是大多数网页过去使用这些类型的页面链接的方式。使用锚点可以避免重命名现有元素。它在语义上也是正确的,也是管理这些类型书签的更好方法。

我喜欢将 idname 属性与片段标识符一起使用,因为 HTML5 通常不支持某些元素的 name 属性,而 id 可能不支持在旧浏览器中被识别为页面标记标识符。

下面这个缩短的、无名的版本经常被开发人员用作默认 URL “存根”,用于稍后添加到锚点的未知 URL,以触发页面刷新,或启用链接但让 Javascipt 方法捕获点击事件并从其他地方出发。如果 Javascript 部分失败,这使得“#”成为一个很好的后备。然后它变成了一个很好的无 Javascript 刷新链接。当元素上的缺失或空白 URL 可能会引发某些问题或样式时,“#”也可以作为“href”值的有用 URL 填充符:

<a href="#">Go to the Top</a>

答案 6 :(得分:0)

具体问题是“我检查了一些网站,他们的网址中有一个井号 (#)。它有什么作用?”

然后给出一个例子:
<a href="#" >Link name</a>

对于跳转链接(无论您想怎么称呼它们)给出了一致的有效答案,但是 CSS :target psuedoselector 绝对也会使用 URL 中的哈希值。

它不会改变答案。然而,给出了另一个我认为很有价值的用例,不费吹灰之力,请参阅下面的优秀链接,其中解释了:

然而,https://css-tricks.com/on-target/