参考资料

  1. HTML DOM 获取第一个链接ID的实例
  2. HTML DOM 给image加上border
  3. HTML DOM 返回和设置一个iframe中的scrolling属性的值
  4. HTML DOM 返回一个iframe中的marginwidth属性的值
  5. HTML DOM 返回和设置链接的href属性实例
  6. HTML DOM 返回文档中表单数目
  7. HTML DOM 改变iframe的高度和宽度
  8. HTML DOM 返回文档中第一个锚的 innerHTML
功能说明‌

HTML DOM 中，所有相对 URL 的基 URL 可通过 <base> 标签或 document.baseURI 属性定义和获取。基 URL 决定了页面内相对路径的解析基准，例如链接、图片、脚本等资源的定位。

核心标签‌
<base> 标签‌
用于在 HTML 文档的 <head> 中设置全局基 URL，所有相对 URL 均基于此路径解析。
属性‌：
href：基 URL 的绝对路径（如 https://example.com/）。
target（可选）：全局链接打开方式（如 _blank）。
JavaScript 用法‌

通过 document.baseURI 属性可直接获取当前文档的基 URL（由 <base> 标签或页面 URL 自动生成）。

javascript
Copy Code
// 返回基 URL
const baseUrl = document.baseURI; 
console.log(baseUrl); // 如 "https://example.com/base/"

完整实例‌
html
Copy Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <base href="https://example.com/base/" target="_blank"> <!-- 设置基 URL -->
</head>
<body>
    <a href="page.html">相对链接</a> <!-- 解析为 https://example.com/base/page.html -->
    <img src="images/logo.png"> <!-- 解析为 https://example.com/base/images/logo.png -->

    <script>
        // 获取基 URL
        console.log("基 URL:", document.baseURI); // 输出: https://example.com/base/
    </script>
</body>
</html>

说明‌：
<base> 标签需在 <head> 内声明，且每个文档仅允许一个 <base> 标签。
若未定义 <base>，document.baseURI 默认返回当前页面 URL。
功能特点‌
统一资源定位‌
通过基 URL，简化相对路径的维护，避免重复书写绝对路径。
动态适配‌
基 URL 可动态影响页面内所有相对路径资源（如 <a>、<img>、<script>）的加载行为。
注意事项‌
优先级规则‌
<base> 标签的 href 优先级高于页面 URL。若未设置 <base>，则基 URL 为当前文档 URL。
路径兼容性‌
基 URL 需以 / 结尾，否则可能引发相对路径解析错误（如 https://example.com/base → https://example.com/page.html）。
CSS 扩展‌
相对路径处理‌
CSS 中使用的相对 URL（如背景图路径）同样基于基 URL 解析。例如：
css
Copy Code
.banner {
    background-image: url("images/banner.jpg"); 
    /* 解析为 https://example.com/base/images/banner.jpg */
}

动态样式注入‌
通过 JavaScript 结合基 URL 动态生成 CSS 资源路径：
javascript
Copy Code
const style = document.createElement('style');
style.textContent = `.logo { background: url(${document.baseURI}images/logo.png); }`;
document.head.appendChild(style);


通过合理使用 <base> 标签和 document.baseURI，可高效管理页面资源的相对路径逻辑，提升开发效率和可维护性。