没有 href 属性的锚标记是不是安全？

Posted 2023-03-05

【中文标题】没有 href 属性的锚标记是不是安全？

【英文标题】：Is an anchor tag without the href attribute safe?没有 href 属性的锚标记是否安全？

【发布时间】：2011-07-14 14:55:57

【问题描述】：

是否可以使用不包含href 属性的锚标记，而是使用javascript 点击事件处理程序？所以我会完全省略href，甚至不让它为空（href=""）。

【问题讨论】：

onclick 事件仍然会触发吗？我想使用锚标签而不是 span/div 因为它是唯一支持 CSS 的合理标签：在 IE 中悬停

@Martin ANCHORS 可以通过键盘访问和激活。常规 SPAN 元素不能。见这里：jsfiddle.net/simevidas/4DTxv/2

@ŠimeVidas，<span> elements most certainly can be navigated via the keyboard。 You could also make it so that <a> elements are not navigable via keyboard.

在 html5 中，没有 href 属性的锚点是占位符超链接：dev.w3.org/html5/markup/a.html

您确定不想要一个按钮吗？这意味着选项卡等可以工作，如果需要，您可以将按钮设置为看起来像链接。诚然，我不知道在 IE 中悬停。

【参考方案1】：

在 HTML5 中，使用不带 href 属性的 a 元素是有效的。它被认为是“占位符超链接”。

例子：

<a>previous</a>

在 w3c 锚标记参考页面上查找“占位符超链接”：https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element。

这里的 wiki 上也提到了它： https://www.w3.org/wiki/Elements/a

占位符链接适用于您想要使用锚元素但不想让它在任何地方导航的情况。这对于在导航菜单或面包屑路径中标记当前页面非常方便。 （旧的方法是使用 span 标签或带有名为“active”或“current”的类的锚标签来设置样式，并使用 JavaScript 取消导航。）

如果您想在运行时通过 JavaScript 动态设置链接的目标，占位符链接也很有用。您只需设置 href 属性的值，锚标签就可以点击了。

另见：

https://***.com/a/10510353/19112 http://www.html5in24hours.com/2012/06/8-ways-to-get-started-with-html5-today/ http://webdesign.about.com/od/html5tutorials/qt/html5-placeholder-links.htm

【讨论】：

“占位符链接”的定义是什么？

请注意，如果没有href，cursor: pointer 样式将不会自动添加到元素中。

【参考方案2】：

我的建议是使用

如果您使用的是 JQuery，请记住也要使用：

.click(function(event)
    event.preventDefault();
    // Click code here...
);

【讨论】：

我不能使用 href="#"，因为我正在使用涉及更改哈希的 ajax 书签，我该怎么办？

而不是使用 javascript:void(0);在 href 我使用 javascript:;写起来更短。

性能损失仅适用于您实际指定空的 href 属性。问题表明根本没有 href 属性。

实际上，根据文章（这很有意义），潜在的性能损失仅适用于空的 src 属性。它没有说明关于空 href 属性的性能方面的任何内容。

你好@Gunnar，链接现在似乎消失了。您还有其他关于该声明的参考资料吗？

【参考方案3】：

如果你必须使用 href 来实现向后兼容，你也可以使用

<a href="javascript:void(0)">link</a>

如果你不想使用该属性，而不是 #

【讨论】：

我需要一个 标签，它在除功能之外的所有功能中都表现得像一个链接。这对我有用。

【参考方案4】：

简短回答：不。

长答案：

首先，没有 href 属性，它就不是一个链接。如果它不是一个链接，那么它就不会是键盘（或呼吸开关，或其他各种非基于指针的输入设备）可访问的（除非您使用不普遍支持的tabindex 的 HTML 5 功能）。控件不具有键盘访问权限的情况很少见。

第二。当 JavaScript 不运行时，您应该有一个替代方案（因为从服务器加载速度很慢，互联网连接断开（例如移动火车上的移动信号），JS 被关闭等）。

利用progressive enhancement by unobtrusive JS.

【讨论】：

问题是，我想要一些我可以使用 jQuery 的“click”方法附加点击事件的东西，当鼠标滑过它时，它也会像链接一样突出显示和下划线。除了没有 href 的锚标记之外，还有什么可以在没有 CSS 的情况下完成呢？ （即，无需手动添加基本交互，同时保留通过 jQuery 直接单击功能分配的简单性）。

@Triynko — 使用链接，但要正确使用。请参阅答案的最后一行。

'a' 标签上的 Tabindex 从 HTML4 开始就有效（至少）w3schools.com/tags/att_global_tabindex.asp

@technoTarek — 是的，但href 是强制性的（除非它是一个命名锚，在这种情况下 tabindex 没有意义）。使用tabindex 将无法聚焦的元素添加到 Tab 键顺序是 HTML 5 中的一项新创新。

这完全是错误的。我不能说您当时是否引用了旧的 HTML 规范，但根据 HTML5 规范，拥有一个没有 href 属性的 a 标记确实是完全有效的。

【参考方案5】：

标签可以在没有 href 属性的情况下使用。与这里的许多答案相反，当没有 href 时，实际上有创建锚点的标准原因。从语义上讲，“a”表示锚点或链接。如果您将其用于符合该含义的任何内容，那么您就可以了。

不带href 的a 标记的一个标准用法是创建命名链接。这允许您使用 name=blah 的锚点，稍后您可以使用 href=#blah 创建一个锚点以链接到当前页面的命名部分。但是，这已被弃用，因为您也可以以相同的方式使用 ID。例如，您可以使用带有 id=header 的标头标签，然后您可以使用指向 href=#header 的锚点。

然而，我的意思是不建议使用 name 属性。仅提供一个不需要 href 的用例，并因此推理为什么不需要它。

【讨论】：

我认为这个问题试图问什么以及其他答案正在解决什么问题，是否可以为 <a> 元素省略 href 属性 被用作交互元素（即链接）。正如您所提到的，没有href 属性很简单......不是链接，只是一个锚点，这完全是另一回事。

是的，但是 - 只是强调一下 - 标签在这些用例中仍然有效。

【参考方案6】：

从可访问性的角度来看，没有 href 的 <a> 是不可选项卡的，所有链接都应该是可选项卡的，因此如果您没有 href，请添加 tabindex='0"。

【讨论】：

如果要执行页内操作而不是重定向，请使用按钮。

@SimonDever 我的 CSS 框架对按钮的样式与链接的样式不同，所以这对某些人来说可能是不行的。

【参考方案7】：

不带“href”的<a> 标签在使用多级菜单时非常方便，您需要展开下一级但不希望该菜单标签成为活动链接。我从来没有以这种方式使用它。

【讨论】：

你试过用键盘访问那个菜单吗？

我刚刚发现，在 IE 上，如果您将鼠标悬停在某些链接上，并且其中一个是没有 href 的锚点，则带有下面 URL 的小弹出窗口会停留在那里，显示上一个 url，而不是消失。虽然锚点不可点击，所以这不是大问题，但足以让我使用 div 代替。

【参考方案8】：

在某些浏览器中，如果您不提供 href 属性，您会遇到问题。我建议您编写如下代码：

<a href="#" onclick="yourcode();return false;">Link</a>

你可以用你自己的函数或逻辑替换你的code()，但是记得加上return false；最后声明。

【讨论】：

我将 Backbone.js 与 Backbone.Router 一起使用，并且索引页面有 #。对于我的一些导航栏链接，我不想触发到# 的路由，如果您单独使用a href="#"，就会发生这种情况。使用<a href="#" onclick="return false;" 会停止触发路由，但点击事件仍然会冒泡到我的处理程序（它使用通过 jQuery 和 Backbone.Radio 挂钩的 DOM 事件）。谢谢@shashwat13 :)