Meta 标签自动刷新跳转
使用 meta 标签实现页面自动刷新和跳转
问题
如何使用 HTML 的 meta 标签实现页面自动刷新或跳转？
解答
自动刷新
使用 http-equiv="refresh" 可以让页面在指定秒数后自动刷新：
<!-- 每 5 秒刷新一次页面 -->
<meta http-equiv="refresh" content="5">自动跳转
添加 url 参数可以实现定时跳转到其他页面：
<!-- 3 秒后跳转到指定页面 -->
<meta http-equiv="refresh" content="3; url=https://example.com">完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 5 秒后跳转到新页面 -->
<meta http-equiv="refresh" content="5; url=./target.html">
<title>页面跳转示例</title>
</head>
<body>
<p>页面将在 5 秒后自动跳转...</p>
</body>
</html>立即跳转
将时间设为 0 可实现立即跳转：
<!-- 立即跳转 -->
<meta http-equiv="refresh" content="0; url=https://example.com">JavaScript 替代方案
实际开发中更推荐使用 JavaScript：
// 定时刷新
setTimeout(() => {
location.reload();
}, 5000);
// 定时跳转
setTimeout(() => {
location.href = 'https://example.com';
}, 3000);
// 立即跳转
location.replace('https://example.com');关键点
content属性的数字表示等待秒数，url指定跳转地址- 时间和 URL 之间用分号和空格分隔：
content="秒数; url=地址" - 设置
content="0"可实现立即跳转 - meta 刷新对 SEO 不友好，搜索引擎可能不识别
- 生产环境推荐使用 JavaScript 或服务端 301/302 重定向