HTML中base标签与绝对URL的区别解析-html教程-PHP中文网

标签仅对纯相对路径（如"logo.png"、"app.js"）生效，即既无协议也无开头斜杠的url；它不改变绝对url（含http://、https://）或根相对路径（以/开头）的解析行为。

html中base标签与绝对url的区别解析

<base> 标签不改变绝对 URL 的解析行为——写 href="https://example.com/js/app.js" 或 src="/css/main.css"，浏览器根本不会看 <base> 一眼。

它只接管形如 "logo.png"、"app.js"、"style.css" 这类**既无协议、也无斜杠开头**的路径。这类路径才叫“纯相对路径”，浏览器才会拿 document.baseURI 去拼。

<img src="icon.svg"> → 拼成 https://cdn.example.com/v3/icon.svg（如果 <base href="https://cdn.example.com/v3/">）
<script src="./utils.js"></script> → ./ 是合法相对前缀，仍被拼接
<link href="/admin/style.css"> → 以 / 开头，直接按根路径解析，<base> 不介入
<iframe src="https://api.example.com/frame"></iframe> → 含协议，完全绕过 <base>

浏览器只接受以 http://、https://、// 或 / 开头的 href 值。其他一律静默丢弃——控制台不报错，但后续所有 src="logo.png" 都退回到按当前页面 URL 解析。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

<base href="assets/"> → 被忽略，src="main.js" 变成 https://example.com/current/path/main.js
<base href="../static"> → 含 ..，规范禁止，直接丢弃
<base href="/myapp"> → 缺结尾斜杠，Firefox/Opera 会把 css/app.css 拼成 /myappcss/app.css
<base href="https://cdn.example.com/v3"> → 缺结尾斜杠，部分浏览器可能截断为 https://cdn.example.com/v3css/

<base> 是 HTML 解析器在加载阶段做的“一次性拼接”，JS 运行时构造的路径（比如 fetch()、import()、new Worker()）和 CSS 的 @import 完全不受影响。

fetch("./api/user") → 按当前页面 URL 解析，不是 document.baseURI
import("./utils.js") → 模块解析由打包工具或浏览器 ES 模块机制决定，与 <base> 无关
background: url(avatar.jpg) → 这个生效，因为是 HTML 加载 CSS 文件时，用 <base> 解析 CSS 文件里的相对 url()
@import "reset.css" → 不生效，CSS 的 @import 是 CSS 引擎自己 resolve 的，不走 HTML 解析流程

加了 <base href="/admin/">，不代表前端路由就自动适配。Vue Router、React Router v6+、Vite 构建配置都得显式设 base 或 basename，否则 router.push("/home") 仍跳到根域名下。

Vite 已配 build.base: "/admin/"，HTML 中再写 <base href="/admin/"> 可能导致双斜杠（如 /admin//admin/js/app.js）
Webpack 的 publicPath 和 <base href> 若值相同，资源路径可能被拼两次
<base> 必须放在最顶部，前面不能有 <title></title> 或 <meta>，否则它之后的资源才生效，之前的已按原始 URL 解析完毕