<meta http-equiv="refresh">是HTML中唯一原生支持页面跳转的meta方式，需置于<head>内，格式为content="秒数; url=目标地址"，要求页面加载完成且未被中断才生效，支持0秒跳转但SEO不友好、无错误处理且现代浏览器限制增多。
meta标签跳转的写法和生效条件
HTML中用 <meta http-equiv="refresh"> 实现自动跳转，本质是让浏览器模拟一次HTTP重定向，但它不是服务器端跳转，不改变HTTP状态码，也不被搜索引擎当作正规重定向处理。
必须同时满足两个条件才会触发：页面已加载完成、且未被用户主动中断（比如快速切到其他tab）。它在所有现代浏览器中都有效，但禁用JavaScript时仍会执行——这点常被误认为“比JS跳转更可靠”，其实只是行为不同。
-
content属性值格式为"秒数;url=目标地址"，秒数可以是0（立即跳转），但部分浏览器对0有最小延迟（如Chrome约0.1秒） - 目标URL必须是合法的绝对路径或相对路径；写成
url=/path是合法的，但url=path（缺斜杠）可能被某些旧浏览器解析失败 - 页面里只能有一个有效的
refreshmeta 标签，后出现的会覆盖前面的
常见错误：跳转不生效或跳错地方
最典型的问题不是语法写错，而是路径解析逻辑被忽略。浏览器对 url= 后面的地址，始终以当前HTML文档所在URL为基准做相对解析，而不是以当前显示的URL（比如经过JS修改location.href后）为准。
- 如果当前页是
https://a.com/dir/page.html，写url=../index.html，实际跳转到https://a.com/index.html，不是你预期的根目录下某个SPA路由 - 写
url=index.html会跳到https://a.com/dir/index.html，而非站点根目录 - 在单页应用（SPA）里混用这种meta跳转，容易绕过路由系统，导致状态丢失或样式错乱
- 某些企业内网环境或老旧设备（如部分Android WebView）会忽略带空格或中文的URL，建议URL编码后再填入
与JavaScript跳转的关键区别
很多人选meta而不是location.href或location.replace()，是想“不依赖JS”。但真实场景中，这个优势很有限：
立即学习“前端免费学习笔记（深入）”；
- meta跳转无法监听跳转前事件（比如发个埋点、弹确认框），也无法捕获失败（比如目标域名DNS失败，浏览器只显示空白页）
- 如果页面加载中途被用户关闭或刷新，meta不会执行；而JS可以在
window.onload或DOMContentLoaded后加延时跳转，控制力更强 - SEO角度：Google明确表示不把
refresh视为301/302，可能同时索引源页和目标页，造成重复内容问题 - 无障碍访问（a11y）：屏幕阅读器通常不会播报meta跳转，用户可能毫无察觉就离开当前页
什么时候该用，什么时候不该用
真正适合用<meta http-equiv="refresh">的场景极少，仅限于静态页面维护期的临时过渡，比如老URL停用、需引导用户到新域名，且确定不支持JS的终端占比可忽略。
- 别用在登录后跳转、表单提交后跳转、支付结果页等需要服务端协同的流程中——这些必须走302响应头
- 别用在PWA或离线可用页面里，因为缓存策略可能导致meta中的URL失效或指向错误资源
- 如果只是为了“几秒后回到首页”，不如直接写明文字提示+手动链接，把控制权交还给用户
多数情况下，你真正需要的不是“怎么写meta跳转”，而是确认：这个跳转是否本该由服务端完成？前端跳转是否应统一收口到路由实例？meta只是个逃生通道，不是主干道。
