核心方法：<a> 标签（推荐）
这是最标准、最常用，也是语义上最正确的方法。<a> 标签本身就是为超链接设计的，它不仅能实现页面跳转，对搜索引擎优化（SEO）和无障碍访问（A11y）也最友好。
（图片来源网络，侵删）
基础跳转
使用 href 属性指定目标网址。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">基础跳转示例</title>
</head>
<body>
<h2>点击按钮跳转到外部网站</h2>
<!--
href="https://www.example.com" 是要跳转的目标地址
target="_blank" 表示在新标签页中打开
-->
<a href="https://www.example.com" target="_blank">
<button>访问 Example.com</button>
</a>
<h2>点击按钮跳转到内部页面</h2>
<!--
href="page2.html" 是同目录下的另一个 HTML 文件
target="_self" (默认值) 在当前标签页打开
-->
<a href="page2.html">
<button>前往第二页</button>
</a>
</body>
</html>
代码解释：
<a>：定义一个超链接。href：Hyperreference 的缩写，指定链接的目标 URL。<button>：一个可点击的按钮，我们将它放在<a>标签内部，这样点击按钮的任何区域都会触发<a>标签的跳转行为。target="_blank"：这是一个重要的属性，它告诉浏览器在新的浏览器标签页或窗口中打开链接，如果不写，默认在当前标签页打开 (_self)。
<button> 标签 + JavaScript
这种方法提供了更大的灵活性，你可以在跳转前执行一些逻辑，比如进行条件判断、数据验证或发送请求。
（图片来源网络，侵删）
使用 window.location 对象
这是最直接的 JavaScript 跳转方式,功能强大。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">JavaScript 跳转示例</title>
</head>
<body>
<h2>使用 JavaScript 跳转</h2>
<!--
onclick 是一个事件处理器，当按钮被点击时，执行等号后面的 JavaScript 代码。
window.location.href = "..." 是最常用的跳转方式。
-->
<button onclick="window.location.href = 'https://www.google.com';">
跳转到 Google
</button>
<button onclick="goToPage()">
调用函数跳转
</button>
<script>
function goToPage() {
// 可以在跳转前添加逻辑
alert('即将跳转到 Baidu！');
// 执行跳转
window.location.href = 'https://www.baidu.com';
}
</script>
</body>
</html>
代码解释：
onclick="..."：onclick是一个 HTML 事件属性，当元素被点击时触发，这里我们直接在属性里写了一小段 JavaScript 代码。window.location.href：window.location对象包含当前页面的 URL 信息，通过修改它的href属性，可以导航到一个新的 URL。- 优点：灵活性高,可以在跳转前执行任意代码。
- 缺点：如果禁用了 JavaScript，此功能将失效，如果跳转是核心功能，
<a>标签是更可靠的选择。
使用 window.open() 方法
window.open() 可以更精细地控制新窗口的行为,比如设置窗口的尺寸和位置。
（图片来源网络，侵删）
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">JavaScript window.open 示例</title>
</head>
<body>
<h2>使用 window.open 打开新窗口</h2>
<button onclick="openNewWindow()">
打开一个 600x400 的新窗口
</button>
<script>
function openNewWindow() {
// window.open(url, windowName, windowFeatures)
// windowFeatures 是一个字符串，用于描述新窗口的特性
const features = 'width=600,height=400,scrollbars=yes,resizable=yes';
window.open('https://developer.mozilla.org/', 'mdn_doc', features);
}
</script>
</body>
</html>
代码解释：
window.open(url, windowName, windowFeatures)：url：要打开的网页地址。windowName：新窗口的名称，如果多个链接使用同一个名称,它们会在同一个窗口中打开。windowFeatures：一个逗号分隔的字符串，定义新窗口的属性，如width,height,toolbar(是否显示工具栏),location(是否显示地址栏) 等。
<form> 标签（特殊场景）
虽然 <form> 主要用于提交数据，但它也可以在不提交任何数据的情况下进行页面跳转，这在需要通过 POST 请求传递数据（模拟表单提交）时很有用。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">Form 跳转示例</title>
</head>
<body>
<h2>使用 Form 进行跳转</h2>
<!--
method="post" 指定了请求方法为 POST
action="https://www.example.com/submit" 是要提交到的目标地址
-->
<form action="https://www.example.com/submit" method="post">
<!-- 即使没有输入框，点击提交按钮也会触发 form 的 action -->
<button type="submit">通过 POST 提交并跳转</button>
</form>
<hr>
<form action="page2.html" method="get">
<button type="submit">通过 GET 提交并跳转</button>
</form>
</body>
</html>
代码解释：
<form>：定义一个 HTML 表单。action：指定表单提交后，数据应该被发送到的 URL。method：指定发送数据的方法，通常是GET或POST。GET：数据会附加在 URL 后面（如page2.html?name=value），适合少量、非敏感数据。POST：数据在 HTTP 请求体中发送，更安全,适合大量或敏感数据。
<button type="submit">：一个提交按钮，点击它会触发表单的action。
总结与最佳实践
| 方法 | 代码示例 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|---|
<a> |
<a href="url"><button>跳转</button></a> |
绝大多数情况下的首选，简单链接、导航按钮。 | 语义正确、SEO友好、无障碍支持、禁用JS也能工作。 | 灵活性较低，无法在跳转前执行复杂逻辑。 |
| JavaScript | <button onclick="window.location.href='url'">跳转</button> |
需要在跳转前进行验证、确认、或发送AJAX请求等。 | 灵活性极高，可控制跳转时机和条件。 | 依赖JavaScript，禁用JS时功能失效。 |
<form> |
<form action="url"><button type="submit">跳转</button></form> |
需要像提交表单一样通过 GET 或 POST 请求跳转。 |
符合表单提交的规范。 | 不适合单纯的页面导航，语义上不如 <a> 标签清晰。 |
最佳实践建议：
- 优先使用
<a>：如果你的按钮功能仅仅是导航到另一个页面，请始终使用<a>标签包裹<button>，这是最符合 Web 标准的做法。 - 何时使用 JavaScript：当你需要“先做点事，再跳转”时，再选择 JavaScript。
- 用户点击“删除”按钮，先弹出一个确认框
confirm("确定删除吗？"),用户确认后才跳转。 - 用户点击“登录”按钮，先验证用户名和密码是否为空,验证通过后才跳转到用户主页。
- 用户点击“删除”按钮，先弹出一个确认框
- 保持一致性：在一个项目中，尽量统一使用一种跳转方式，除非有特殊需求，这样代码风格会更统一,也更容易维护。
希望这份“代码大全”能帮助你全面了解 HTML5 中按钮跳转的各种方法！
