一行代码实现页面自动重定向？分享 1 段优质 HTML 代码片段！

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 800+ 字，整篇阅读约需 1 分钟。

今天分享一段优质 HTML 代码片段，只需一行 HTML 代码即可实现页面的自动重定向。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

<meta http-equiv="refresh" content="5;url=https://www.example.com/">

分享原因

这段代码展示了一种通过 HTML 元标签实现页面自动重定向的简单方法。

通过设置 content 属性中的时间间隔，展示了如何在一定时间后执行重定向操作，对于需要控制页面跳转时间的场景有参考价值。

使用自动重定向的场景不多，但用到时却很关键，比如：网站维护升级、页面迁移、限时活动、用户个性化，等等。

相比于传统的 服务器端重定向、JS 重定向，用它会更加简便！

代码解析

1. <meta> 标签

用于提供有关文档的元数据信息。

这些信息通常不会直接显示在页面上，但可以被浏览器和搜索引擎等使用。

2. http-equiv="refresh"

表示这是一个用于控制页面刷新或重定向的元数据。

兼容性如下：

meta 元标签中的 http-equiv 属性还有许多其他的值，以下是一些常见的值及其用途（了解一下就可以了）：

Content-Type：用于指定文档的 MIME 类型和字符编码，例如：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

X-UA-Compatible：用于指定浏览器以何种模式来渲染页面，例如：<meta http-equiv="X-UA-Compatible" content="IE=edge"> 表示以最高版本的 Internet Explorer 兼容模式渲染。

Expires：设置文档的过期时间，例如：<meta http-equiv="Expires" content="Wed, 21 Oct 2025 07:28:00 GMT">

Cache-Control：控制页面的缓存策略，例如：<meta http-equiv="Cache-Control" content="no-cache">

3. content="5;url=xxx"

content 属性包含了重定向的具体信息。

5 表示等待 5 秒钟。

url=xxx 表示 5 秒后要跳转到的目标 URL 地址。