将标签锚定为不带href的按钮答案

【问题标题】：Anchor tag as button without href将标签锚定为不带href的按钮
【发布时间】：2012-08-12 03:06:09
【问题描述】：

我发现除非在表单上，<a> 锚标记几乎总是用作按钮。

我的问题不是为什么要使用<a> 标签，而是为什么还要使用href="#"。

据我了解，没有 href 的 <a> 是有效的 html，实际上，它提供了“按钮”锚和链接锚标签之间的更多区别，因为 :link 和 :visited 仅在存在链接。甚至可以通过更改::selection 将光标更改回指针，并且文本突出显示问题。 (example)

虽然两者都受到:active 的影响（尽管可以通过说a:visited:active, a:link:active {---} 来区分链接），但我能想到不这样做的唯一原因是也删除了跳格顺序。

但是，从好的方面来说，您可以删除 href="#"（这在测试页面、禁用 javascript 等时很有用），为“按钮”提供不同的默认样式，并且更容易区分在代码中。此外，您始终可以将其分配 tabindex="0" 以将其放回选项卡流中，并且将来 css 可能会引入 nav-index，它已经在 Opera 中引入（尽管这是一个有风险的属性）。

虽然删除标签顺序可能很麻烦，但我认为它是这样的：您只需将 href="#" 替换为 tabindex="0"，它仍然可以区分“按钮”和链接，让您还可以设置它们的样式。

所以我想我最初的问题是为什么使用href="#" 仍然是我的主要关注点，但我想听听我是否错过了关于为什么应该/不应该这样做以可能成为更好的方法的任何兴趣点将链接与“按钮”分开。

【问题讨论】：

不再需要锚标签。只需给一个元素一个 ID，您就可以将其用作锚点。
@arxanas：是的，我听说 HTML6 正在删除除 div 之外的所有元素。它真的会彻底改变 Web 开发。
@Lèsemajesté 谁还需要那些讨厌的新标签？太有用了。

标签： html css

【解决方案1】：

使用属性href="#" 是因为一些（真正的）旧浏览器仅支持链接属性，例如onclick。通过使用href="#"，您将a 元素转换为这种意义上的链接。后来原来的原因忘记了，人家只是抄代码。

当浏览器中禁用 JavaScript 时，href="#" 属性使元素成为指向当前文档开头的链接。这几乎不是一个合理的后备方案；要提供非 JavaScript 后备，href 属性应指向包含一些服务器端后备的 URL。

当启用 JavaScript 并且作者忘记使用 return false 或其他抑制正常链接处理的事件处理程序时，在执行处理程序后会跟踪链接。所以当前页面被重新加载并定位在开始处。这可能会被忽视，也可能不会被忽视。

【讨论】：

真的老了，你的意思是不再使用（或非常罕见）吗？通过服务器端回退，您的意思是（也许）一个 php 文件会做同样的事情，即使页面会改变？虽然这并不总是可能的，但我可以看到这样做的目的。
真正旧的，我的意思是像 Netscape 4 这样的东西。服务器端的回退，我确实是指（例如）一个 php 文件，它以某种方式复制了 JavaScript 代码的功能。这并不总是可行或可行的。

【解决方案2】：

为锚标记按钮提供一个带有“#screen1”、“#screen2”等内容的href，并将其与某种路由或url匹配相结合，可以让您的应用程序利用浏览器的后退和前进按钮。

如果点击#screen1，然后点击#screen2，然后能够使用后退按钮进入screen1对您的应用程序很有用，您可能希望以这种方式使用href。

【讨论】：

我在问如何将它们用作按钮，而不是链接。换句话说，我问的是是否应该使用 href 值/不使用会导致问题。
看看：containerstore.com/elfa/designCenter/index.htm 左边的按钮是带有hrefs的锚标签，使用后退和前进将带您浏览之前打开的菜单。