为什么人们在标签中加上"#"作为href？

Question

我#经常在源代码中找到它.

<li><a href="#"><i class="fa fa-cog"></i><b>Settings</b></a></li>

为什么不呢

<li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>

编辑 谢谢你们的答案.但是,是的,意识到这是一个重复的问题>.<抱歉

Answer 1

比你想知道锚更多

一个a元素在HTML两个目的:

• 这是一个锚,你可以链接;
• 它可以是指向锚点,文档或任何其他URL的超链接.

如果你写:

  <a name="Chapter4">Chapter 4. The Counterpane</a>

...并将其发布在网络上的某个位置

   http://example.com/dedicated/hawthorne.html

...然后任何人都可以使用此URL 链接到该特定锚点:

   http://example.com/dedicated/hawthorne.html#Chapter4

#为此目的,URL中保留了该符号:将锚点的名称与包含锚点的文档的URL分开.

正如您可能已经看到的那样,URL的结构会像这样简化(简化一点!):

  (method) : // (host) / (path-to-document-on-host) # (anchor)

所以,例如

  http   :// example.com / dedicated/hawthorne.html # Chapter4
  method     host          path-to-document           anchor

幸运的是,URL非常懒惰,如果省略它们的任何部分,它们将默认从当前文档中获取该部分.您甚至可以通过创建相对URL来省略文档路径的一部分.

一种类型的相对URL是除了片段之外的所有内容.因此,在同一文档中,可能会有一个内容列表,其条目如下:

   <li> <a href="#Chapter4">Chapter 4. The Counterpane</a> </li>

这允许文档在任何地方"移动",因为它的主机和路径将默认为它恰好位于的位置.

更好的是,因为很明显目标锚必须在同一个文档中,(几乎)每个Web浏览器(除了一些非常深奥和狡猾的浏览器)都会简单地滚动(带有或多或少的精细)到目标锚点,而不是(重新) - )加载文件.

现在,由于a可能是一个锚点,并且可能是超引用("链接"),您必须使用Web浏览器的一个或另一个属性来了解您想要的行为.

简单写作

    <a> Foo. </a>

......含糊不清 它应该是锚吗？可能不是; 没有名字!它应该是超参考吗？显然不是; 没有参考!

现在,它已经(并且,在某些浏览器中,可能仍然是)JavaScript的某些属性就像onClick只保留给非常特定的元素一样.因此,为了在页面上创建可以捕获这些事件的窗口小部件,必须使用支持它的元素.

事实上,超级引用(链接)元素恰好支持很多这些事件,即使在像Netscape 4.0这样非常古老而又胡思乱想的Web浏览器中,他们也不喜欢谈论段落和分区之类的事件.

因此,创建链接变得相当普遍,然后隐藏它是一个链接的事实,只是为了捕获像click它一样的JavaScript事件.

如前所述,URL对于省略它们的各个部分非常宽容; 而且,同一文件中的一个片段写得像

 <a href="#some-anchor"> ... </a>

...还具有不(重新)加载文档的奖励属性.那么如果我们把它剥离成最近的形式会发生什么呢？

 href="#"

好吧,你有它.您在当前文档中引用了一个没有名称的锚点.由于那个锚不可能存在,所以发生的一切都是......没有.

(好吧,通常都没有.缺点是,浏览器意味着滚动到文档的顶部,但是因为你试图click用JavaScript 捕获它们- 你是,不是吗？---你'在可能发生之前,可能会取消导航事件.)

所以,href="#"链接的原因是:

• 这种非常特殊的链接形式无效,但仍然可以作为有效的超级引用,因此您可以将JavaScript事件监听器附加到它,无论您的最终用户设法挖掘的古老网络浏览器多么糟糕

另一个类似的噱头是使用 href="javascript:void(0);"

href="#"和之间的主要区别在于,如果您的用户未启用JavaScript,他们将看到不同的行为.

• href="#"什么都不做; 或者,可能滚动到文档的头部,这可能会让他们想知道链接应该做什么.
• href="javascript:void(0);" 通常会弹出某种对话框来嘲笑它们以禁用它们的JavaScript,让它们烦恼,但可能让它们充分意识到它们在那时错过了"某些东西".

我想,哪一个你喜欢的是味道问题,尽管其中一个更容易打字.

PS:(href="javascript:void(0);"或类似)的另一个缺点是它不能被复制为对当前文档的引用.例如,如果有人右键单击→"复制链接位置","在新选项卡中打开"等等(例如,在新选项卡中单击以打开)href="#",浏览器通常会做一些理智的事情,并使用当前文件的位置.另一方面,javascript:void(0)在新标签中打开可能会让某人盯着空白的窗户,挠挠头.