在 HTML 中重定向到一个网页

  1. 使用元刷新来重定向 HTML
  2. 使用锚标记在 HTML 中重定向
  3. 结论

如果服务器出现故障或正在维护中,可以使用多种 HTML 方法重新路由用户。这取决于业务要求,该站点应具有哪种重定向行为。在 UI 中处理重定向可提高性能,因为网页 HTML 将是第一个呈现的页面。让我们从浏览 HTML 重定向到另一个网页的方式开始。

  1. 元刷新
  2. 锚标签

使用元刷新来重定向 HTML

在 HTML 中,浏览器可以理解 <meta> 标记。使用此 HTML 标签,我们可以要求浏览器重定向到所述页面。如果我们想的话,它还允许我们编写一个延迟程序。

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

这里包含了两个参数,即 http-equivcontent

  • http-equiv:类似于 HTTP 请求标头,发送其他信息供浏览器理解。此属性接受各种值。最常用的一种是 content-type,它告诉浏览器期望的内容类型。refreshhttp-equiv 的另一个值,它告诉浏览器导航到 content 属性中指定的链接。
  • 内容:包括一个可编程的延迟(以秒为单位),以使用户知道他们正在被重定向。如果他们希望继续,他们可以或留在原处而无需重定向。URL 是应该进行导航的链接。

备注

  1. 此方法通常在基础页面上用于在站点加载之前重定向用户。
  2. 根据 meta 标记中设置的时间,页面加载后,meta 刷新功能将自动重定向用户。
  3. 包含此代码的网页可能无法通过浏览器后退按钮访问。
  4. 如果我们未指定 URL,则将重新加载页面。
  5. 请勿过度使用页面上的元重定向标签。它被视为包含垃圾内容,并可能影响搜索引擎列表的声誉。

使用锚标记在 HTML 中重定向

你可能熟悉 HTML 中的锚标记。它广泛用于网页中以导航到子页面或外部网站。与 meta 刷新方法不同,锚标签是静态的。因此,它需要一个事件(单击)来调用它。我们可以通过以下方式使用定位标记来重定向用户:

<a href='https://www.delftstack.com/'>Go to Delfstack</a>
<a href='/tutorial'>Tutorials</a>
  • 第一种方法使用整个 URL(https://www.delftstack.com/)作为值传递给 <a> 标记的 href 属性;如果我们需要离开应用程序并导航到外部站点,则此方法有效。可以使用浏览器的后退按钮返回到原始页面。
  • 第二种方法用于导航到站点内的页面。在这种情况下,我们提到了预期页面的相对路径(/tutorial)。浏览器将此相对路径转换为 https://www.delftstack.com/tutorial

备注

  1. 此方法基于用户交互(用于导航的 click 事件)。
  2. 可以使用 Anchor 标签重定向方法在网站内或到其他网站进行路由。
  3. 如果我们没有将任何 URL 传递给 href 属性,则单击锚标记将重新加载当前页面。

结论

根据业务需求,最好在用户进入维护网站网页时使用 meta 刷新方法来重定向用户。它使我们可以自由地引入延迟,以向用户显示消息以进行重新路由。如果要基于事件(例如用户单击)进行导航,则使用定位标记非常普遍。