锚点 href 中的唯一哈希值是什么？

Question

我最近从开发后端（即非Web）服务器转到与Web相关的工作项目中。在HTML代码中，我发现以下内容随处可见：

<a href='#'>some link</a>

然后一些JS代码被附加到<a>元素的click事件上。

这个单独的哈希符号有什么特殊含义吗？我知道href='#some_id'会告诉浏览器滚动到ID为some_id的元素。但是href='#'不是这样工作的，对吧？ 如果只是创建一个可点击的文本块，为什么不直接使用<span>标签呢？

- Jasiu

---

如果你将href留空，它会重新加载当前页面，这就是为什么要使用#号。 - Dejan Marjanović

@Webardo - 是的，但情况比那更复杂。使用哈希标记会跳转到页面顶部，这也不太可能是想要的。通常与JavaScript一起使用，返回false，阻止执行href操作。哈希标记仍然比空字符串好，因为如果用户禁用JavaScript然后单击链接，它将产生较少的意外后果。 - Spudley

还发现了这个令人大开眼界的问题：https://dev59.com/YW035IYBdhLWcg3wE71s - Leo

Answer 1

没错。你在这里看到的有点糟糕的设计（尽管使用 href="#" 是相当普遍的）。

它实际上会跳转到页面顶部，如果没有阻止默认操作的话。

更好的做法是

• 使用一个适当样式的<button>（甚至只通过JavaScript插入它）
• 或者让链接指向某个真正的资源（触发服务器端的某些操作），并附加JavaScript事件处理程序来在客户端执行此操作（或类似操作）并阻止链接跟随（关键词：不侵入式JavaScript）。

这还取决于网站是否可以在禁用JavaScript的情况下运行。 如果是，则这样的链接（但也包括按钮）将无法工作。

但在任何情况下，从语义角度来看，仅使用一个链接让某个东西“可点击”是错误的。

- Felix Kling

---

我更喜欢href激活一些服务器端的操作，onclick在结尾处有一个return false，这样js-enabled浏览器不会额外执行服务器端操作。 - Emyr

@Emyr：那实际上就是我想表达的意思 :) - Felix Kling

Answer 2

一个哈希标记（hash）链接只会将页面跳转到页面顶部。

有时候，这种链接被用作“回到顶部”链接的目的，但更通常地，这种链接会与Javascript click事件一起使用，该事件返回false，并因此取消href的操作。

在这个语境中，它以以下方式使用，出于以下原因：

• <a>标签可能是语义上正确的--即要点击的项目充当链接，例如加载更多内容、打开弹出窗口等，尽管它使用Javascript完成其功能。

• 使用<a>标签还意味着该元素将以与站点上其他<a>标签相同的方式进行样式设置。这包括:hover效果样式等。请注意，IE6仅支持<a>元素的:hover，而不支持其他任何元素，这意味着如果站点旨在在IE6中运行或仍然需要支持它，则无法使用其他标签复制此功能。这曾经是过去使用<a>标签实现此功能的非常好的原因，即使从语义上来说并不合适。如今，这已经不再是问题。即使在现代浏览器中，使用<a>进行这些项目仍然有用，因为它可以减少重复的样式表，如果您想要使它们看起来与其他链接相同。链接还具有其他一些特殊功能，可能很难用其他元素复制，例如在选项卡索引序列中。

HTML要求<a>标签具有href属性，以使该元素呈现为链接，因此哈希用作其最小值。此外，在href属性中使用哈希意味着如果用户关闭JavaScript或开发人员忘记return false;，则该链接不会导致任何令人讨厌的意外后果。相比之下，使用空字符串将导致页面重新加载，如果您刚刚运行了一些JavaScript，则不太可能是您想要的结果。但是，将链接指向有效的URL也很常见，如果JavaScript被关闭，则会运行该URL；这是为网站设置回退机制的好方法。但这并不总是合适的，而且在这里显然也不是本意。

鉴于该项只是在JavaScript中触发点击事件，您没有理由不能使用任何其他元素。您可以很容易地使用一个<span>（或更好的是，一个<button>），但上述内容应该表明，使用<a>标签没有任何问题。

希望对您有所帮助。

- Spudley

Answer 3

这个“sole hash”有特殊意义吗？

它链接到页面顶部。

为什么不直接使用标签呢？

原因如下：

• 它不会在焦点顺序中出现
• 它不会采用应该被点击的默认样式

使用标签比更好。最好是使用基于服务器端替代方案的东西。

- Quentin

---

将某个元素包含在焦点顺序中似乎是一个非常好的理由。是否有其他方法可以将某些元素包含在焦点顺序中？ - Jasiu

在某些浏览器中，tabindex 可以作为一个不太好的替代品，但最好还是有一个带有合理回退的链接或提交按钮。 - Quentin

Answer 4

因为你希望浏览器将此链接的样式与所有其他链接相同，而无需指定（例如使用 class ）“你知道，我希望这看起来像一个链接，即使它在技术上不是”。这对于可维护性真的不太好。

- Jon

Answer 5

因为：

• 样式已经为您完成；
• 即使链接以无操作的 href 开始，语义上仍然是一个链接。

反问：
您能解释一下为什么您认为对于链接来说，span 比 a 更合适吗？

补充说明：
像 button 或其他动态元素可能更适合这里，但是将非链接的 span 文本取而代之，并且 假装 它是一个链接是更糟糕的。

- Lightness Races in Orbit