我的 Web 应用程序使用了很多用于编写脚本的 <a href="#">Perform client script action</a> 锚链接（这是我 10 多年前作为 Dreamweaver 用户时养成的习惯），现在我开始质疑这是否是必须的。
我实际上并不知道为什么首先使用<a href="#"> - 我的猜测是href 属性的存在会导致浏览器应用:link 和:visited 伪类来简化样式表。它还使浏览器隐式应用可能需要的cursor: pointer 属性。
我使用 jQuery（在短暂使用 MooTools 之后）并且链接在没有 href="#" 属性和值的情况下也能正常工作，所以我应该完全删除该属性并修改我的样式表以补偿删除 @ 987654328@伪类？还有什么我可能会遗漏的东西，任何一种半文档化的巫术，href 属性充满了锚元素吗？
【问题讨论】：
标签： javascript html
<a> 代表锚点如果您在 <a> 元素上包含 [href] 属性，则它是指向某个位置的锚点，这意味着您可以转到新页面，即当前页面的特定片段（因此 @ 987654331@ 被称为片段标识符），或新页面的特定片段。
没有[href] 属性的<a> 元素历史上被分配了一个[name] 属性，它可以用作片段标识符的目的地。浏览器后来添加了对链接到任何项目的 [id] 属性的支持，现在这是链接到文档片段的首选方法。
<a> 元素意味着什么？a[href] 元素是一个链接（这就是为什么它们在 css 中与 :link 匹配）。 链接是可点击的。 An a element without the [href] attribute is otherwise just a placeholder for where a link might otherwise have been placed，不可点击，也不在页面的跳位顺序中。
如果您希望您的链接可通过键盘导航，这对可访问性很重要 (WAI-ARIA)，您需要执行以下操作之一：
<button type="button">
[href] 属性[tabindex="0"] 和[role="button"] 或[role="link"] 之一（可能还有一些样式）有关[role] 属性的更多信息可以在WAI-ARIA docs 的the Roles Model section 中找到。
如果您没有理由保留[href] 属性，您不妨使用<button> 元素：
<button type="button">
^^^^^^^^^^^^^
[type] 属性用于使元素成为通用按钮，否则<button> 将默认为[type="submit"]，这可能是不可取的，因为它可能会触发表单提交。
如果您不能使用<button>（通常在内部标记必须包含<div> 时发生），您可以使用以下方法伪造<button>：
<div role="button" tabindex="0">Some clickable text</div>
您需要监听 keypress 事件并触发 Enter 和 Space 的 click 事件。
如果您保留 <a> 元素及其 [href] 属性，则有许多选项可用于其值。
例如
<a href="/some/location/for/users/without/js"><a href="#document-fragment">如果您需要为禁用 JS 的用户提供支持，您不妨将他们引导到一个在没有 JS 的情况下执行等效功能的页面。
通过扩展，这还包括提供文档片段链接以链接到同一文档中的内容。例如，可切换区域可以标记为：
<a href="#more" class="toggleable">Read More</a>
<div id="more">Lorem ipsum dolor sit amet</div>
这样使用 JS 的区域可以折叠和展开，没有 JS 的链接会将用户带到页面上的适当内容。
例如
<a href="#"><a href="javascript:void(0)"><a href="about:blank">如果您在 JavaScript 中阻止默认行为，并且您不支持禁用 JS 的用户，则可以使用“dud”href 值将链接保持在跳动顺序并自动启用Enter 触发click 事件。您应该添加[role="button"]，因为<a> 标签不再用作链接，而是用作按钮。
<a href="#" role="button">Some clickable text</a>
【讨论】：
<button>。正如您所建议的，它还比简单的<span> 具有更多的语义价值。
span[role="button"] 在语义上与<button> 相同，并且更容易设置样式。
就我个人而言，我更喜欢使用href="javascript:void(null);"，为浏览器提供一个不会影响哈希值的其他用途的href。
我注意到关于无 href 链接的唯一区别是浏览器默认不会给它们加下划线，所以只需添加该样式就可以了。
【讨论】：
return false或preventDefault()就可以防止将hash改为#。还从 HTML 中减少了几个字节。
我正在为 React 实现一个 HTML、CSS、JS 模板，这行代码非常适合我：
<a href={() => false}> Link </a>
【讨论】：
我在 react js 上遇到了同样的问题。
Line 273: Links must not point to "#". Use a more descriptive href or use a button instead jsx-a11y/href-no-hash
这样去掉我用过的错误
之前：
<a
href="#"
className="banner-signup signup-btn envy-font-sans-bold"
onClick={(e) => this.gonext()}
>
NEXT
</a>
在 href="#" 的地方使用了 href="#/"
<a
href="#/"
className="banner-signup signup-btn envy-font-sans-bold"
onClick={(e) => this.gonext()}
>
NEXT
</a>
【讨论】：
在html中使用
<a id="calendar" href="javascript:void(0)">
<div class="icon-w">
<div class="fa fa-calendar"></div>
</div>
<span>Calendar</span>
</a>
【讨论】：
不知道任何巫术，但如果您在页面上有许多链接并且您拉出 href，那么您将不得不添加一个类名，以便为您提供每个链接上的蓝色和下划线。换句话说，为什么要在浏览器都准备好时引入更多工作呢？所以简而言之，坚持你所知道的，我怀疑如果你删除 href 页面将无法验证 http://validator.w3.org/
【讨论】：
我遇到了这个问题，特别需要将手风琴标题设为<a>，以便它可以被标记但不能被点击。如果没有 href，这将无法工作，因此我将 id 文本放在 href 中的“#”之后，它似乎可以工作。它使链接可以通过标签访问，但不能被点击。
<a href="#${accordionGroup.id}"> Title </a>
输出为：
<a href="#acc234923"> Title </a>
【讨论】：
tabindex而不是设置一个假的href值。