使用按钮而不是单页 Web 应用程序的链接答案

【问题标题】：Using button rather than a link for single page web app使用按钮而不是单页 Web 应用程序的链接
【发布时间】：2012-10-15 20:57:24
【问题描述】：

我正在创建一个 Web 应用程序，其中包含用于更改单个页面上的元素的命令列表。该页面 100% 依赖于 JavaScript。因此，我将这些链接编码为：

<a href="#">Command #1</a>

怀疑这在语义上是否正确，我发现很多地方都说我应该改用button。

这是有道理的，但意味着我必须将按钮的样式更改为看起来像一个链接，这感觉很hacky。这是正确的方法吗？

【问题讨论】：

【解决方案1】：

你赋予元素的样式与它是否是语义正确的代码无关，所以我不会太担心。

Links 旨在将用户链接到网络上的页面之间。

HTML Input 元素旨在接受用户输入并处理它们。

基于这个简单的启发式，我会说用一个按钮去！

【讨论】：

【解决方案2】：

HTML5 规范非常明确，您不应该使用 a：

如果a 元素具有href 属性，则它表示一个超链接（超文本锚点）。

这些是指向其他资源的链接 […]

所以不要在你的单页网络应用上使用a 来进行“操作”。

您应该使用button 或resp。 input（我会说两者都具有type 值button）。

如果您想深入了解新的 HTML5 内容，请查看 menu 和 command。

请确定：您不应该使用 JS 来“增强”其他元素（例如 span 或 div）以充当链接/按钮。如果没有进一步的工作，这将无法访问。

【讨论】：

太好了，谢谢。该按钮的另一个好处是它使我能够禁用它们。从来不知道命令，这看起来很完美。谢谢！
“指向其他资源的链接”很可能指的是当前页面的不同状态。因此，HTML5 草案的措辞并没有给出任何可靠的答案。 menu 和 command 元素几乎没有值得一提的浏览器支持。在无论如何都需要 JavaScript 支持的上下文中，没有充分的理由为什么不能将 span 或 div 或其他元素用作 JavaScript 驱动的控件。按钮是一种自然的方式，但不是唯一的方式。
@Jukka: "当前页面的不同状态" → 你的意思是指 URL 片段中的 id/name 吗？还是别的什么？
@JukkaK.Korpela 页面的不同状态不是资源。因此，规范给出了可靠的答案。

【解决方案3】：

两者在技术上都可以使用。对我来说，如果是文本链接，我会使用<a> 标签，如果是表单按钮或图像，则使用<button>。这样您就可以与预期使用的元素保持一致。

【讨论】：

【解决方案4】：

我不认为使用链接在语义上是不正确的。如果它让您感觉更好，您可以将链接设置为按钮。

否则，如果这仍然让您感到困扰，那么将按钮设置为看起来像链接并没有错。您的应用程序的功能应该与您呈现按钮的方式几乎没有关系，只要它们执行相同的操作并符合您的期望即可。

如 cmets 中所述，如果您希望使用按钮，请记住它们的样式是表单元素，并且可能比使用锚标记更困难。

【讨论】：

或者设置<span> 看起来像一个链接。
另外请记住，button 元素在大小方面的风格类似于表单控件。有时，如果您最初使用非表单元素（例如 a 标签），则获得 submit/reset 的 button 或 input 以与其他元素对齐可能需要更多的工作。

【解决方案5】：

一般来说，我更喜欢使用 div 来处理这些事情。链接带有许多固有的浏览器样式，按钮更是如此。 Div 的唯一规则是 display:block。所以它为我节省了一些重置的 CSS 行。它还为我节省了一些 js 代码以防止默认行为。再加上没有正确的语义选择，那么使用 div 就很有意义了。

【讨论】：