📌  相关文章
📜  HTML base标签(1)

📅  最后修改于: 2023-12-03 14:41:45.395000             🧑  作者: Mango

HTML 的 BASE 标签

<base> 元素指定了文档中所有相对 URL 的基础 URL。

在文档头部加入 <base> 元素，能够使网页访问的路径更加灵活，大大方便了开发者的编码工作。

语法
<head>
  <base href="base_URL">
</head>
属性
  • href：指定当前 HTML 文档的基础 URL。默认为当前文档的 URL。
用法

在以下情况下，使用 <base> 是很有用的：

1.有多个页面指向同一个 css/js 文件

  • 需要在多个 HTML 文件页面中链接同一个 CSS 或 JavaScript 文件时，使用 <base> 可以简单地指向相同的文件目录。
<!DOCTYPE html>
<html>
  <head>
    <base href="https://cdn.example.com/libs/">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- 代码... -->
    <script src="main.js"></script>
  </body>
</html>

2. URL 不完整

  • 例如，如果您的 href 属性值仅包含页面文件名、片段标识符，但缺少主机名或 /，则会在当前页面的 URL 后附加该值。
<head>
  <base href="https://www.example.com/index.html">
  <link rel="stylesheet" href="css/styles.css">
</head>

3. 长时间为搜索引擎缓存页面

  • 当使用相对路径的文档已被缓存时，使用带有 BASE 元素的相同文档也将使用新的 href 属性 URL。
注意事项

1. 只能有一个 <base> 元素

规范中规定一个HTML页面只能有一个元素。

2. 必须放在中

在规范中base标签必须放在中。

3. 必须有href属性

基础URL和当前文档的URL之间的关系都是相对路径，所以规范中规定base必须有href属性。

总结

<base>元素可以指定页面上的所有相对 URL 的基础 URL。它的主要目的是为了确保相对路径链接正确地指向所需的位置。通过使用基本元素，浏览器就知道了基本URL，当它们查找相对URL的位置时，就能更好地遵循相对路径。它能大大方便开发者的编码工作，节省一些代码的编写，是一个周期很短，易于掌握的HTML标签。