HTML页面跳转是指在一个网页中通过某种方式实现从一个页面跳转到另一个页面。以下是七种常见的HTML页面跳转方法：
1. 使用<a>标签（超链接）
<a href="目标页面.html">点击跳转到目标页面</a>
这是最基本的链接方式，通过href属性指定要跳转的页面地址，可以是相对路径或绝对路径。
2. 使用表单提交（form标签结合action属性）
<form action="目标页面.html" method="get">
<input type="submit" value="提交跳转">
</form>
当用户点击提交按钮时，表单数据会被发送到action指定的页面，同时实现页面跳转。method可以是get（将数据附加在 URL 后）或post（在请求体中发送数据）。
3. JavaScript 的location.href
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>Document</title>
</head>
<body>
<button onclick="goToPage()">跳转到目标页面</button>
<script>
function goToPage() {
location.href = '目标页面.html';
}
</script>
</body>
</html>
在 JavaScript 中，通过修改location.href的值来实现页面的跳转。
4. JavaScript 的location.replace()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>Document</title>
</head>
<body>
<button onclick="replacePage()">跳转到目标页面</button>
<script>
function replacePage() {
location.replace('目标页面.html');
}
// 这种跳转不会在浏览器历史记录中留下当前页面的记录
</script>
</body>
</html>
与location.href类似，但location.replace()会替换浏览器历史记录中的当前页面，而不是添加一个新的记录。
5. JavaScript 的window.open()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>Document</title>
</head>
<body>
<button onclick="openNewPage()">打开新页面</button>
<script>
function openNewPage() {
window.open('目标页面.html', '_blank');
}
// 可以在新窗口或新标签页中打开页面
</script>
</body>
</html>
window.open()方法可以打开一个新的浏览器窗口或标签页来显示指定的页面。
6. HTML5 的history.pushState()和history.replaceState()结合onpopstate事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>Document</title>
</head>
<body>
<button onclick="pushPage()">跳转到目标页面</button>
<script>
function pushPage() {
history.pushState(null, null, '目标页面.html');
}
window.onpopstate = function(event) {
// 处理页面导航（前进/后退）事件
};
</script>
</body>
</html>
history.pushState()可以在不刷新页面的情况下改变浏览器的 URL，history.replaceState()则可以替换当前的历史记录。同时，可以通过onpopstate事件来监听浏览器的前进和后退操作。
7. 使用meta标签的http - equiv属性（定时跳转）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>Document</title>
<meta http - equiv="refresh" content="5;url=目标页面.html">
<!-- 5 表示 5 秒后跳转 -->
</head>
<body>
等待 5 秒后将自动跳转到目标页面。
</body>
</html>
meta标签的http - equiv="refresh"属性可以实现定时跳转，content属性中指定等待的时间（秒）和要跳转的页面地址。
点击咨询
157-7967-9664