是最轻量、无需 javascript 的定时跳转方案，需置于 中，格式为 content="秒数; url=目标"，支持相对/绝对路径，但无交互提示且 seo/无障碍受限。
用 <meta http-equiv="refresh"> 实现页面定时跳转
这是最轻量、无需 JavaScript 的方案，适合静态页或需要降级兼容的场景。浏览器原生支持，所有现代 HTML 版本都可用。
关键在于 http-equiv 值设为 refresh，并用 content 指定延迟秒数和目标 URL：
<meta http-equiv="refresh" content="3; url=https://example.com/">
上面这行代码会让页面在 3 秒后跳转到 https://example.com/。注意：content 中的数字和 url= 之间必须用分号 ; 分隔，不能用逗号或空格。
- 如果只写数字（如
content="5"），页面会刷新自身，不是跳转 -
url值支持相对路径（如url="./about.html"）和绝对路径，但不支持带空格或未编码的特殊字符 - 该标签需放在
内，且建议放在其他<meta>之后、<title></title>之前，避免干扰 SEO 解析
跳转前想给用户提示？得配合 JavaScript
<meta> 跳转是静默的，无法显示倒计时或取消按钮。真要交互，就得用 JS 控制 location.href 或 location.replace()。
例如，在页面加载后 3 秒跳转，同时更新一个倒计时文案：
<p id="countdown">3 秒后跳转...</p><br><script><br> let sec = 3;<br> const timer = setInterval(() => {<br> sec--;<br> document.getElementById('countdown').textContent = `${sec} 秒后跳转...`;<br> if (sec <= 0) {<br> clearInterval(timer);<br> location.replace('https://example.com/');<br> }<br> }, 1000);<br></script>
- 用
location.replace()而非location.href =，可避免用户点「返回」回到当前跳转页 - 记得调用
clearInterval()，否则定时器持续运行，可能引发内存泄漏或重复跳转 - 如果页面有表单未提交，JS 跳转不会触发
beforeunload提示；若需确认，得手动监听并return字符串
SEO 和可访问性要注意什么
搜索引擎会识别 <meta refresh>，但频繁或短于 1 秒的跳转可能被判定为“伪装”（cloaking），影响收录。W3C 也明确建议：仅在必要时使用，且延迟不少于 5 秒。
- 屏幕阅读器通常不会朗读
meta跳转行为，视障用户可能毫无察觉——所以对无障碍要求高的站点，应优先选 JS + 可见提示方案 - 某些老旧企业内网环境（如 IE8 旧版 intranet 模式）会把
refresh当作普通 HTTP header 处理，导致跳转失效；此时 JS 是唯一可靠 fallback - 如果你在 SPA（如 Vue/React）中动态插入该
<meta>，注意它不会生效——<meta>必须在初始 HTML 加载时存在，JS 修改 DOM 不会触发浏览器重解析
为什么不用 window.location.assign() 直接跳转
直接跳转没有问题，但它不“定时”。如果你只是想“页面一打开就跳”，那确实更简单：
<script>location.assign('https://example.com/');</script>
但这样用户连页面都来不及看就走了，体验极差，且对 SEO 不友好（搜索引擎可能认为该页无内容）。真正需要的是可控时机+用户知情权。
容易忽略的一点：assign() 会在历史栈留下当前页，而 replace() 不会。如果跳转逻辑嵌在某个事件里（比如按钮点击后），又不想让用户返回到空白中间页，replace() 才是合理选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
