网络上有很多关于按钮和链接的文章，介绍了它们之间的差异以及如何正确使用它们。好吧，我不介意。 我也写过一篇关于 链接和按钮的完整指南¹.
这是一个在网络上非常常见的错误，所以值得反复强调。
- 目的是将用户发送到另一个 URL 吗？那么它是一个链接，形式为
<a href="">。 - 目的是触发页面上的交互性吗？那么它是一个按钮，形式为
<button>。 - 任何偏离上述形式的元素，你最好确保你知道自己在做什么。
Eric Eggert 最近 写了一篇很棒的文章，其中有一句话很好地解释了为什么这很重要。
想象一下，如果你的键盘上的“e”键只有 90% 的时间能正常工作，这会让人非常沮丧。用户界面中的可靠性和信任度至关重要，可以让用户轻松浏览内容和应用程序。如果使用正确的元素，就能更好地支持用户。
Manuel Matuzović 有一个 按钮速查表，它以一种让人忍俊不禁的方式解释了为什么除了 <button> 之外的任何元素都不如按钮好。Manuel 还链接了 Marcy Sutton 的史诗级视频 链接与按钮对决，将这两个元素进行了一场模拟战斗——“我们将让两个 HTML 元素进行一场对抗，看看谁更强大，谁更正确。其中一个元素用空格键触发，另一个用回车键触发。谁会赢？” 我不知道是该 哭还是笑，因为我们还需要付出很多努力来传播这些信息。
- 我认为我们的文章 链接和按钮的完整指南 很好地展示了面向初学者的内容，这也是我最喜欢的写作和发布内容类型！但由于网络上有很多面向初学者的内容，如果你想产生影响并获得足够的 SEO 排名，那么门槛就很高。所以，在这篇文章中，我们的想法是大胆地写尽可能多的内容，几乎涵盖了链接和按钮技术基础的所有内容。如果你在这方面很有天赋，那么就 联系我们吧.
我认为多年来，验证表单的实际方法是使用按钮。从定义上讲，表单会将你发送到另一个 URL（在“action”属性中指定），所以根据你的规则，它应该表现得像一个链接，但这并不是传统的 HTML 表单默认的行为。
有趣的是，如果你看看我在这个页面上留言的表单，它会将我发送到
/wp-comments-post.php，即使“发布评论”严格来说不是一个链接，但它的行为有点像链接，因为光标在悬停时会变成指向的手指，表示我将跳转到另一个页面…所以我想这没问题。但是，如果我看看文本区域底部的“编写”和“预览”，它们应该应该是按钮，因为它们不会将我重定向到不同的页面…然而，它们仍然是带有指向手型光标的传统
<a>标签。所以，我想我们还会在未来几年讨论这个问题。
我一直有个疑问，因为我经常这样做：使用
<a href="#thiscontent">打开模态窗口/叠加层（包含静态内容）怎么样？从语义上讲，它只是一个指向内容中另一个部分的链接，即使它最终看起来像按钮，并进行“页面内交互”，但这仅仅是外观。如果禁用 JavaScript，可以使用 CSS 的 :target 属性显示模态窗口。如果 JavaScript 和 CSS 都未激活，页面会顺利滚动到该内容。
我认为这很有道理，但可能有一些方面是我没有考虑到的。