如何让 HTML 按钮充当链接

让 HTML 控件打开 URL 的正确方法取决于控件的用途。需要导航时，使用带有 href 的 <a> 元素，再用 CSS 将它设置成按钮外观。需要执行操作时使用 <button>，需要发送表单数据时使用提交按钮。不要把 <button> 或 <input> 放在 <a> 内部：它们都是交互元素，这样嵌套会造成语义和键盘行为冲突。

根据结果选择锚点或按钮

当激活控件会改变地址、打开文档、下载文件或前往其他页面时，应使用锚点。href 提供真实目标，因此用户可以在新标签页打开、复制地址、加入书签，也可以使用键盘访问。

当控件修改当前页面、打开对话框或面板，或者执行脚本时，使用 <button type="button">。控件看起来像矩形按钮，并不代表它就是链接。元素的角色应与实际行为一致。

将 <a> 设置成按钮外观以进行导航

如果控件只负责导航，这是推荐的方法。把目标放在 href 中，使用有意义的链接文本，并提供明显的焦点样式。将 /docs/ 替换为实际目标。

<a class="button-link" href="/docs/">Open the documentation</a>

.button-link {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 0.35rem;
  background: #1769aa;
  color: #fff;
  text-decoration: none;
}

.button-link:hover {
  background: #0d4f80;
}

.button-link:focus-visible {
  outline: 3px solid #f5b700;
  outline-offset: 2px;
}

结果看起来像按钮，但仍然是链接。按 Enter 可以激活它，浏览器也能识别其目标。如果要在新标签页打开，请在文本中说明：

<a href="https://example.com/docs" target="_blank" rel="noopener">
  Open the documentation (new tab)
</a>

不要使用 href="#" 或 href="javascript:void(0)" 来模拟按钮。这些值不是真实目标，可能导致滚动和书签行为异常。href 可以是相对路径、绝对 HTTPS URL、片段或其他可寻址 URL。CSS 只改变外观，不会删除链接的原生功能。

只有确实需要按钮操作时才使用 <button> 和 JavaScript

如果导航前必须检查状态或执行其他操作，可以保留 button。指定类型，并使用 addEventListener 注册监听器；window.location.assign() 负责导航。

<button type="button" id="docs-button">Open the documentation</button>

<script>
  document.querySelector("#docs-button").addEventListener("click", () => {
    window.location.assign("https://example.com/docs");
  });
</script>

此示例可以通过指针、Enter 和 Space 激活，但依赖 JavaScript。普通导航应优先使用锚点，因为 JavaScript 被禁用时它仍然可用。在较大的应用中，应将监听器放在模块中，而不是使用内联 onclick。空的或错误的目标 URL 是边界情况，调用 assign() 前应验证动态值。

发送数据时使用表单

如果服务器需要接收字段，请在表单的 action 中设置目标并使用提交控件。这是表单提交，不是普通链接导航。

<form action="/search" method="get">
  <label for="query">Search</label>
  <input id="query" name="q" type="search">
  <button type="submit">Search</button>
</form>

提交 CSS button 后，根据表单编码可能生成 /search?q=CSS+button。不要为了按钮外观使用空表单。需要为某个 type="submit" 按钮指定不同目标时，可以使用 formaction。

如果项目需要基于 value 的旧式控件，<input type="submit"> 也有效：

<form action="/docs/" method="get">
  <input type="submit" value="Open the documentation">
</form>

value 会成为可见标签。不要用锚点包裹这个 input。<input type="button"> 本身不会提交或导航，需要脚本才能工作。

排查按钮无法打开链接的问题

• 如果目的是导航，标记应为 <a href="...">，即使 CSS 让它看起来像按钮。
• 表单中不提交的操作应指定 type="button"。省略类型可能变成 submit 并重新加载页面。
• JavaScript button 无效时，检查控制台、选择器和脚本加载情况。禁用 JavaScript 时 handler 不会运行。
• 保留 :focus-visible，让键盘用户知道当前焦点。
• 普通链接不要嵌套 <button> 或 <input>。

总之，导航使用 <a href="...">，操作使用 <button type="button">，发送数据时使用表单中的 submit button。这样浏览器和辅助技术可以获得可预测的语义。