为什么主题标签用于锚链接占位符？

Question

我经常在其他网站和教程中看到，当锚点的目的不仅仅是作为链接时，它通常有一个主题标签 (#) 作为href 属性的值。我正在我目前正在处理的项目的列表中创建一系列列表，我很想自己这样做，但我担心这可能会使团队中其他开发人员正在努力的系统复杂化，因为这个标签点击后出现在地址栏中。

以这种方式取消href有缺点吗？我假设它不是由于这种方法的流行使用，但主题标签是否可能会弄乱使用 GET 的函数？

Answer 1

不用担心，“哈希标签”很好用，十年来一直是标准的一部分，不会影响 GET。 “锚标签”<a>原本就是为了这个目的。

您可以使用它来创建“跳转链接”以跳转到文档的不同部分（锚点，用于 HTML 规范文档页面本身），或者作为与 javascript 结合使用的“hashbang”。

你不应该做的是无缘无故地使用<a>标签来获取指针光标。也就是说，如果当你点击它时它做了某事（通常是为什么你将指针光标放在某物上），无论是通过更改哈希、链接到新文档还是触发 javascript 函数，都没有理由不使用锚点标记，也不是坏习惯。

当您看到只有"#" 作为href 的锚点时，这通常表明开发人员打算将javascript 侦听器应用于元素。如果客户端没有可用的 javascript，空锚点充当无操作的后备。在这种情况下，用户单击链接并且没有任何反应。如果您使用渐进式增强原则，那么您可以在其中放置一个等效的非 JavaScript URI。

文档

• HTML 链接和锚点 - http://www.w3.org/TR/html401/struct/links.html
• MDN 上的 onhashchange - https://developer.mozilla.org/en-US/docs/Web/API/window.onhashchange

Answer 2

正如 cmets 中所指出的，不要包含专门用于视觉“美”的 HTML 标记。这是 CSS 的任务，你应该学习separate concerns。对于 HTML/CSS：HTML = 信息，CSS = 演示。问问自己下次遇到类似问题时会发生什么。就个人而言，我会创建一个CSS class like this：

.handy{
  cursor: pointer;
  }

然后将类添加到所需的每个元素：

<ul id = "menu">
  <li></li>
  <li class = "handy"></li>
</ul>

根据您的情况，另一种方法是这样编写 CSS：

#menu li {
  cursor: pointer;
  }