📌  相关文章
📜  HTML |<base> href 属性(1)

📅  最后修改于: 2023-12-03 15:01:14.659000             🧑  作者: Mango

HTML | href 属性

在 HTML 页面中，当链接到一个外部资源（例如样式表或脚本文件）时，常常需要指定相应资源的路径。如果不指定路径，浏览器将相对于当前页面的 URL 地址查找该资源。但是在某些场合下，这种查找可能会出现错误，如相对路径不正确或者当前页面的 URL 地址发生了变化等。为了解决这个问题，我们可以使用 标签来为整个 HTML 文档指定默认基础 URL，这样就可以方便地为文档中的链接、图像、脚本等资源设置路径了。

使用方法

以下是基础使用方法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <base href="https://www.example.com/">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Hello, world!</h1>
    <img src="images/logo.png" alt="Logo">
    <script src="app.js"></script>
</body>
</html>

在 head 部分使用 标签指定基础 URL：

<base href="https://www.example.com/">

这样，文档中的所有相对路径都将基于这个 URL 进行解析，例如上面的代码片段中的链接、图像和脚本文件都将从 https://www.example.com/ 开始查找：

<link rel="stylesheet" type="text/css" href="styles.css">
<img src="images/logo.png" alt="Logo">
<script src="app.js"></script>

如果文档中的某个资源需要使用不同的基础 URL，则可以在相应的标签中指定绝对路径或相对路径。例如，以下链接将基于 https://www.example2.com/ 进行解析：

<a href="https://www.example2.com/page.html">Link to another website</a>
注意事项
  • 标签必须放在 head 标签内的第一个标签中。
  • 基础 URL 必须包含 scheme、host 和可选的端口号，例如 https://www.example.com/，不能仅使用相对路径或主机名。
  • 如果文档中使用了多个 标签，则只有第一个 标签会生效。
结论

使用 标签可以为整个 HTML 文档指定默认基础 URL，方便设置文档中的链接、图像、脚本等资源的路径，避免出现路径不正确的错误。同时需要注意 标签的使用方法和注意事项，以确保其正确性和有效性。