meta http-equiv="refresh" 不支持倒计时显示，仅执行静默跳转；它不参与 dom 渲染、无 api、不暴露剩余时间，必须用 javascript 实现可视化倒计时并配合 location.replace() 跳转。
meta http-equiv="refresh" 本身不支持倒计时显示，它只做“静默跳转”——浏览器解析到就启动计时，用户看不到数字变化，也无法暂停或取消。
为什么写 content="3;url=/home" 不会显示“3…2…1”
这个标签是 HTML 解析阶段触发的底层指令，不参与 DOM 渲染流程。它没有 API、不暴露倒计时状态、也不提供回调钩子。所谓“3秒后跳转”，只是浏览器内部计时器走完就直接导航，页面上不会自动更新文字或触发任何事件。
常见错误现象：你在 里写了 <p id="countdown">3</p>，但没配 JS 更新，结果倒计时文字一直停在“3”，而页面却准时跳走了——这说明 meta refresh 和 DOM 是两条独立路径。
- 它不等
DOMContentLoaded，不等用户滚动，甚至不等<script></script>加载完成 - 无法用 CSS 动画、
requestAnimationFrame或setInterval同步它的剩余时间 - 你不能通过 JS 读取它还剩几秒（浏览器根本不暴露这个值）
meta http-equiv="refresh" 的唯一合法格式和常见错写
必须严格匹配 content="数字;url=路径"，中间分号后建议加一个空格（旧 IE 和部分移动端 Safari 对空格敏感），且 url= 缺一不可。
正确写法：<meta http-equiv="refresh" content="3; url=/dashboard">
以下写法全部失效（浏览器静默忽略，不报错）：
-
content="3; /dashboard"（漏掉url=前缀） -
content="3,url=/dashboard"（逗号代替分号） -
content="3 ;url=/dashboard"（分号后空格位置错，某些 Safari PWA 下失效） -
content="3;url= dashboard.html"（URL 前多空格，解析中断）
相对路径以 HTML 文件物理位置为基准，不是当前 URL。比如文件部署在 /app/index.html，写 url="./login.html" 会跳去 /app/login.html，不是 /login.html。
想显示倒计时？必须用 JavaScript 配合
真要让用户看到“3…2…1”，只能靠 JS 控制 DOM + setTimeout 或 setInterval，同时用 location.href 或 location.replace() 执行跳转。此时 meta refresh 只能当保底——防止 JS 加载失败或被禁用。
推荐做法：
- 在
放保底 meta：<meta http-equiv="refresh" content="4; url=/fallback"> - 在
底部放轻量 JS，读取目标 URL、启动倒计时、更新页面文字、最后调用location.replace('/target') - 加
document.addEventListener('visibilitychange', ...)，避免用户切走标签页后仍倒计时（Chrome 110+ 会静默跳过） - 若目标页需携带原参数（如
?from=pay），JS 可手动拼接；meta refresh不会继承 query string
注意：不要在 Vue/React 等 SPA 里混用 meta refresh 跳内部路由（如 url="/dashboard"），它会绕过路由守卫，丢失组件状态和数据。
最易被忽略的一点：现代浏览器对无交互自动跳转越来越保守——如果页面没获得焦点、没监听过 click 或 keydown，meta refresh 可能被延迟甚至拦截，而 JS 方案至少还能加交互检测兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
