为什么人们在标签中放一个“#”作为href？ [复制]答案

【问题标题】：Why do people put a "#" as href in a tag? [duplicate]为什么人们在标签中放一个“#”作为href？ [复制]
【发布时间】：2014-02-19 04:57:49
【问题描述】：

我经常在源代码中找到#。

<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>

编辑谢谢你们的答案。但是，是的，意识到这是一个重复的问题>。

【问题讨论】：

标签： html anchor

【解决方案1】：

比你想知道的更多关于锚的知识

a 元素在 HTML 中有两个用途：

这是一个锚，您可以链接到它；
它可以是指向锚点、文档或任何其他 URL 的超链接。

如果你写：

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

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

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

...然后任何人都可以使用此 URL 链接到该特定 anchor：

   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>

这允许文档“旅行”到任何地方，因为它的主机和路径将默认为它碰巧所在的位置。

更好的是，因为很明显目标锚必须在同一个文档中，（几乎）每个网络浏览器（除了一些非常深奥和古怪的浏览器）都会简单地滚动（或多或少技巧）到目标锚，没有（重新）加载文档。

现在，由于a 可能是锚点，也可能是超引用（“链接”），因此您必须使用 Web 浏览器的一个或另一个属性来了解您想要的行为。

简单写

    <a> Foo. </a>

... 模棱两可。应该是锚吗？可能不是;没有名字！它应该是一个超参考吗？显然不是；没有参考！

现在，已经（并且在某些浏览器中，可能仍然是）JavaScript 的某些特性，如onClick，只保留给非常特定的元素。因此，为了在页面上创建一个可以捕获这些事件的小部件，必须使用支持它的元素。

碰巧的是，超引用（链接）元素恰好支持很多这样的事件，即使在像 Netscape 4.0 这样不喜欢谈论段落和分区等事件的非常古老和古怪的网络浏览器中也是如此.

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

如前所述，URL 对于您省略其中的各个部分是非常宽容的；还有，在同一个文档中的一个片段，写成这样

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

...还具有不（重新）加载文档的额外属性。那么，如果我们将其简化为最简单的形式会发生什么？

 href="#"

嗯，你有它。您引用了当前文档中没有名称的锚点。由于该锚点不可能存在，所以发生的一切都是......什么都没有。

（嗯，通常什么都没有。缺点是，浏览器旨在滚动到文档的顶部，但是由于您试图在 JavaScript 中捕获他们的click --- 你是，不是吗? --- 您可能会在此之前取消导航事件。）

所以，href="#" 链接的原因是：

这种非常特殊的链接形式不会做任何事情，但仍然有资格作为有效的超引用，因此您可以将 JavaScript 事件侦听器附加到它，无论您的最终用户设法挖掘的古老 Web 浏览器多么糟糕向上

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

href="#" 和 this 之间的主要区别在于，如果您的用户没有启用 JavaScript，他们会看到不同的行为。

href="#" 什么都不做；或者，也许滚动到文档的开头，这可能会让他们想知道链接应该做什么。
href="javascript:void(0);" 通常会弹出某种对话框，嘲笑他们禁用 JavaScript，让他们烦恼，但可能让他们充分意识到他们当时错过了“某些东西”。

我想你更喜欢哪一个是个人喜好问题，尽管其中一个更容易输入。

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

【讨论】：

谢谢。很好的答案！
这是重复的，所以我把我的答案贴在原件上。您的帖子中有一些信息与规范不太准确。检查我的答案：stackoverflow.com/a/21397285/1435655 尽管如此，你在这个答案上花了很多时间，这太棒了！继续加油！
故意不合规格；我的意思是，在现实生活中，您是否真的见过有人使用href=# 导航到文档的开头？ :-) 如果我们都在 W3C 规范上运行，那么整个事情将很少/几乎永远不会存在......并且公认是不完整的（我不敢检查（五个？）URL/URI RFC 和 XML 片段和...... . :-) ... 但是，在 practice 中，帖子中有什么不准确的地方吗？如果是这样，我宁愿更正它。
我确实编辑了“# 表示顶部”注释以更清楚地表明这是 href 的预期行为，即使它可能不是 href=# 被用作脚本事件的主机。

【解决方案2】：

它只是一个占位符，因为它不会重定向到任何地方。它主要用于开发。
.

【讨论】：

【解决方案3】：

标签用于显示链接。如果您不提及 href 属性，则文本不会显示为链接...它显示为普通文本。因此，如果您想将文本显示为链接，则必须使用 href 属性。如果您不想要任何操作或重定向，那么您可以使用“#”作为 href 属性的值。

【讨论】：

【解决方案4】：

这是一个很好的问题，也是我刚开始时经常问自己的一个问题。 ahref # 符号经常用作 html 表单中的占位符。我在引导程序中看到了很多，我修改了一些 .NET 项目。从本质上讲，我看到它最常说“你可以在某个地方链接，但在我当前的示例中，我没有任何合乎逻辑的地方可以链接它”。为您干杯，祝您发展愉快！

【讨论】：