<base>标签用于统一指定页面中所有相对URL的解析基准，必须置于<head>内且仅能有一个，其href值须为绝对URL或根相对路径，影响HTML中相对链接、图片、样式表及CSS url()，但不影响JS动态导入和CSS @import。
<base> 标签的作用很明确：它让页面里所有相对 URL（比如 <a href="about.html">、<img src="logo.png">、<link href="style.css">）都以你指定的基准来解析，而不是默认按当前页面 URL 推导。
什么时候必须用 <base>？
典型场景是单页应用（SPA）或静态站点生成器输出的 HTML 文件被部署在子路径下（比如 https://example.com/blog/），但页面内大量资源路径写的是 ./css/app.css 或 images/icon.svg。不设 <base>，浏览器会从当前 HTML 的 URL（如 https://example.com/blog/post-1.html）出发解析这些相对路径，结果 404。
- 部署在非根路径（
/admin/、/v2/、/zh-CN/）时，<base href="/v2/">可统一修正所有相对链接的起点 - 需要强制所有外链在新窗口打开，且不想逐个加
target="_blank"，可用<base target="_blank"> - 静态站点生成（如 Hugo、Jekyll）中，通过模板注入
<base href="{{ .Site.BaseURL }}">避免硬编码
<base> 必须放在 <head> 里，而且只能有一个
这是硬性规范。放错位置（比如塞进 <body>）会导致浏览器忽略它；放两个，后一个会被丢弃 —— 多数现代浏览器只认第一个，且控制台可能报 Multiple base elements detected. Only the first one is used.。
- 必须写在
<head>内，且最好紧贴<head>开始位置（早于<title>、<meta>） -
href属性值必须是绝对 URL（含协议和域名）或根相对路径（以/开头），不能是纯相对路径（如../assets/） -
target属性影响所有未显式声明target的<a>和<form>，但对<iframe>无效
容易踩的坑：CSS 和 JS 的 @import / import() 不受 <base> 影响
<base> 只作用于 HTML 解析阶段的相对 URL，不改变 CSS 文件内部的 @import "reset.css" 或 JS 中的 import('./utils.js')。这些仍按各自文件所在路径解析。
- 图片、样式表、脚本标签的
src/href属性受<base>控制 - CSS 里的
url()（如background: url(avatar.jpg)）也受控 —— 它是 HTML 解析时计算的，不是 CSS 引擎自己 resolve 的 - 但 JS 的动态导入（
import()）、fetch('./data.json')、new Worker('./worker.js')全部绕过<base>，得靠代码逻辑处理 - 如果用了
<base href="https://cdn.example.com/">，而页面本身在https://example.com/，那么<a href="contact.html">会指向https://cdn.example.com/contact.html—— 这很可能不是你想要的
真正难搞的不是怎么写 <base>，而是判断哪些资源该被它管、哪些不该。尤其在混合部署（静态资源走 CDN，HTML 走主站）时，href 值稍有偏差，整个页面的链接和资源加载就全乱了。动手前先用 DevTools 的 Network 面板确认几个关键请求的实际 URL，比盲目加标签更可靠。
