页面跳转也就是页面重定向，也就是从当前页面自动地导航到另外一个页面。实现页面重定向的方法很多，可以直接在HTML前端实现，也可以在后端实现，根据不同的场景选择不同的实现方式。
<meta> 标签<meta>标签介绍<meta>标签是HTML语言中的一个标签，用于描述HTML文档的元数据（metadata）。元数据是关于数据的数据，它提供了关于HTML文档的信息，例如文档的编码方式、作者、关键词、描述等等。
<meta>标签通常包含在文档的头部<head>标签内。下面是一些常用的<meta>标签及其属性：
<meta charset="编码方式">：指定HTML文档的字符编码方式。常用的编码方式包括UTF-8、ISO-8859-1等。<meta name="author" content="作者">：指定HTML文档的作者。<meta name="keywords" content="关键词">：指定HTML文档的关键词，用逗号分隔多个关键词。<meta name="description" content="描述">：指定HTML文档的描述。<meta name="viewport" content="width=device-width, initial-scale=1.0"> ： 指定文档的视口（viewport），以适应不同大小的屏幕。<meta http-equiv="refresh" content="秒数;URL=重定向地址">：设置网页自动刷新或重定向这里就是使用使用 meta 的http-equiv 和 content 实现重定向
<meta>标签实现重定向<meta>标签中的http-equiv属性，设置为refresh的用法是用于指定页面自动刷新的时间间隔。
具体语法如下：
<meta http-equiv="refresh" content="时间间隔;URL=目标页面的URL">
其中，
时间间隔表示页面自动刷新的时间间隔，单位为秒；目标页面的URL表示页面刷新后要跳转的目标页面的URL。举个例子，如果想要页面隔5秒自动刷新并跳转到另一个页面，可以这样写：
<meta http-equiv="refresh" content="5;URL=目标页面的URL">
这种方法使用了HTML的<meta>标签中的http-equiv属性，设置为refresh并提供一个内容包括延迟时间和目标URL的content属性。举例来看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="5;url=https://www.baidu.com">
<title>Redirecting...</title>
</head>
<body>
如果您的浏览器没有自动重定向，请<a href="https://www.baidu.com">点击这里</a>。
</body>
</html>
在这个例子中，content属性的值"5;url=https://www.baidu.com"表示页面会在5秒后立即刷新到https://www.baidu.com。
需要注意，这种方式会在浏览器地址栏中显示目标页面的URL。有一些说法是用户也可以手动停止或修改跳转，但是从目前的各浏览器版本来看，跳转的过程用户是无法停止跳转的。
也可以使用JavaScript来实现重定向。下面的代码片段将在文档加载完成后执行重定向：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Redirecting...</title>
<script type="text/javascript">
window.onload = function () {
window.location.href = "https://www.baidu.com";
}
</script>
</head>
<body>
如果您的浏览器没有自动重定向，请<a href="https://www.baidu.com">点击这里</a>。
</body>
</html>
此JavaScript代码将使页面在加载后立即跳转到指定的URL。和使用<meta>标签类似，可以通过JavaScript设置延迟，例如使用setTimeout函数：
//设置延时
window.onload = function () {
setTimeout(function () {
window.location.href = "http://www.example.com";
}, 2000); // 2秒后重定向
}
通常，最好的重定向方法是在服务器端进行，这样可以在页面被加载前就导向新的地址，对SEO友好，并减少了客户端处理的压力。
例如，在Apache服务器中，可以通过修改.htaccess文件实现重定向：
Redirect 301 /oldpage.html http://www.example.com/newpage.html
或者在PHP中：
<?php
header("Location: http://www.example.com");
exit();
?>
JSP的重定型方式可以参考：
每种服务器端语言（如Node.js、Ruby on Rails、Python等）都有自己的重定向方法。
如果想要在使用HTML的meta标签进行重定向时不显示原页面的内容，你可以尝试将页面的内容放入<noscript>标签中（以防用户禁用了JavaScript），并且保持<body>标签为空。不过，请注意，这种方法在某些情况下并不能完全保证页面内容不显示，特别是在网络缓慢或有其他加载问题时。
下面是如何设置不显示原页面内容的一个简单例子：
在这个例子中，<style>标签中的CSS规则设置了body元素的display属性为none，这会使得<body>的内容不显示。若浏览器支持meta标签的重定向，上述代码将在页面加载后立即将用户重定向到新的URL，而无需渲染任何内容。
不过，一些旧的浏览器可能不会完全遵守CSS规则，或者在页面加载之前短暂显示内容，所以这种方法并不一定在所有情况下都能工作。
此外，请记得这种方法可能对用户体验和搜索引擎优化（SEO）有负面影响。最佳做法是使用服务器端重定向（如3xx HTTP状态码），这可以确保用户和搜索引擎只被发送到新的地址，并且不会展示任何原有页面的内容。
| 优点 | 弱点 | |
|---|---|---|
| 方式1： meta标签 | 实现简单，不需要任何编程代码，仅需一行HTML代码 | 不能实现转场效果，用户无法手动控制跳转。 |
| 方式2： JavaScript代码 | 可以在页面加载或动画效果中实现自定义的转场效果 | 需要使用JavaScript编码，不够简洁明了 |
| 方式3： 服务端方式 | 1. 动态生成页面：服务端页面跳转可以根据用户的请求动态生成页面内容，从而实现个性化和实时更新的页面展示。 2. 安全性较高：由于服务端页面跳转是在服务器端进行处理，客户端无法直接访问服务器端的代码和数据，从而提高了安全性。 3. 对SEO友好：服务端页面跳转可以生成包含关键字和描述的页面，并且页面内容是静态的，对搜索引擎的抓取和索引更友好，有助于提高网站的搜索引擎排名。 | 1. 页面加载速度较慢：由于服务端页面跳转需要服务器端动态生成页面并返回给客户端，相比于客户端渲染的页面加载速度较慢。 2. 前后端交互复杂：服务端页面跳转需要通过前后端交互实现页面跳转和数据传递，需要处理的逻辑较多，开发和调试相对复杂。 3. 用户体验较差：每次页面跳转都需要重新加载整个页面，会导致页面闪烁和用户体验上的不流畅感。 |