当前位置：首页 > article >正文

html 公共路径标签base

article 2024/10/24 6:26:53

使用元素，我们就可以像 axios 那样，设置一个 baseURL,所有的公共路径指向这个标签

一个网页中，如果存在多个相对链接，使用标签可以确保这些相对链接都以相同的基础 URL 进行解析。这对于在不同环境中部署的网页非常有用，例如在开发、测试和生产环境中，基础 URL 可能会不同，但通过设置标签，可以使相对链接在不同环境中都能正确指向目标资源。

标签必须放在标签内，通常是在其他元数据标签（如、等）之后

标签只影响相对链接的解析，绝对链接不受其影响。设置标签后，所有相对链接都会以指定的基础 URL 进行解析。这意味着如果在页面中使用了相对链接的 JavaScript 代码或 CSS 文件，也会受到标签的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base href="https://img2.baidu.com/" />
</head>
<body>
    <img src="it/u=2814429148,2262424695&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422" alt="" srcset="">
    <img src="it/u=1058961982,3919091402&fm=253&fmt=auto&app=120&f=JPEG?w=779&h=500" alt="" srcset="">
    <img src="it/u=446981511,947966320&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500" alt="" srcset="">
</body>
</html>

<!-- 一般写法 -->
<body>
  <a href="https://xinyuzone.cn/user/1837128766716076032/column">跳转大澈的技术专栏</a>
  <a href="https://xinyuzone.cn/user/1837128766716076032/column">跳转大澈的技术专栏</a>
  <a href="https://xinyuzone.cn/user/1837128766716076032/column">跳转大澈的技术专栏</a>
</body>

<!-- 新写法 -->
<body>
  <base href="https://xinyuzone.cn" />
  <!-- 上面是baseURL，下面是链接跳转 -->
  <a href="/user/1837128766716076032/column">跳转大澈的技术专栏</a>
  <a href="/user/1837128766716076032/column">跳转大澈的技术专栏</a>
  <a href="/user/1837128766716076032/column">跳转大澈的技术专栏</a>
</body>