在网页开发中，实现从一个HTML页面跳转到另一个HTML页面是非常常见的需求，不同的实现方式对应不同的使用场景，下面介绍几种常用的实现方法。
使用超链接标签实现跳转
这是最基础的页面跳转方式，通过<a>标签的href属性指定目标HTML页面的路径即可实现点击跳转。
假设当前页面和目标页面在同一个目录下，目标页面名为target.html，代码示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>源页面</title>
</head>
<body>
<!-- 点击文本即可跳转到target.html页面 -->
<a href="target.html">点击跳转到目标页面</a>
</body>
</html>
如果目标页面在子目录pages下，只需要修改href的值为pages/target.html即可，href属性支持相对路径和绝对路径。
使用JavaScript实现跳转
当需要在满足特定条件后再执行跳转，或者不需要用户点击直接跳转时，可以使用JavaScript的window.location对象实现。
直接跳转
在页面加载完成后自动跳转到目标页面，代码如下：
// 页面加载完成后2秒跳转到target.html
window.onload = function() {
setTimeout(function() {
// 修改window.location.href即可实现跳转
window.location.href = "target.html";
}, 2000);
};
条件跳转
比如用户点击按钮后判断输入内容是否符合要求，再决定是否跳转：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>条件跳转示例</title>
</head>
<body>
<input type="text" id="username" placeholder="请输入用户名">
<button onclick="checkAndJump()">提交</button>
<script>
function checkAndJump() {
var username = document.getElementById("username").value;
// 判断用户名不为空则跳转
if (username.trim() !== "") {
window.location.href = "target.html";
} else {
alert("用户名不能为空");
}
}
</script>
</body>
</html>
使用表单提交实现跳转
当跳转需要携带参数到目标页面时，可以使用表单的提交功能，表单的action属性指定目标HTML页面路径，提交后就会跳转到目标页面。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单跳转示例</title>
</head>
<body>
<form action="target.html" method="get">
<input type="text" name="id" placeholder="请输入ID">
<input type="submit" value="查询并跳转">
</form>
</body>
</html>
提交后目标页面可以通过对应的参数获取方式拿到传递的id值，实现带参数的页面跳转。
跳转方式对比
不同跳转方式的特点对比如下：
| 跳转方式 | 适用场景 | 特点 |
|---|---|---|
| 超链接标签 | 静态页面跳转，用户主动点击 | 实现简单，不需要额外代码 |
| JavaScript跳转 | 需要条件判断、自动跳转的场景 | 灵活度高，可控制跳转时机 |
| 表单提交跳转 | 需要携带参数到目标页面 | 可传递表单数据到目标页面 |