HTML中base标签配合相对路径的使用示例-html教程-PHP中文网

标签重置 html 解析器对后续纯相对 url 的基准起点，必须为绝对 url 或根相对路径（结尾带斜杠），且须置于最顶部唯一存在；非法值或错误位置会导致资源静默 404。

html中base标签配合相对路径的使用示例

<base> 标签不是“给相对路径加前缀”，而是重置 HTML 解析器对后续所有纯相对 URL 的基准起点；写错值、放错位置或与构建配置冲突，<img src="logo.png"> 就会静默 404。

base href 必须是绝对 URL 或根相对路径（结尾带斜杠）

浏览器只认以 https://、http://、// 或 / 开头的 href 值。其他写法（如 assets/、../static/、%PUBLIC_URL%/）会被整条忽略——不报错、不警告，但所有 src="app.js" 都退回到用当前页面 URL 解析。

https://cdn.example.com/v3/ ✅ 推荐：协议、域名、路径明确，适合 CDN 场景
/myapp/ ✅ 合法：根相对路径，结尾斜杠不可省；缺斜杠在 Firefox 中可能截断为 /myappcss/app.css
//cdn.example.com/v3/ ✅ 可用：协议相对，自动继承当前页 http/https
assets/ ❌ 无效：无协议也无根斜杠，标签被静默丢弃
/myapp ❌ 无效：结尾缺斜杠，触发浏览器路径拼接异常

base 必须放在最顶部且唯一

<base> 的作用发生在 HTML 解析阶段，它只对它之后出现的标签生效。放错位置等于没写。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

正确顺序：<base href="/myapp/"> <title>App</title> <link href="style.css">
错误示例：<link href="main.css"> <base href="/myapp/"> → main.css 已解析完毕，不受控
禁止放入：浏览器直接忽略，控制台通常无提示
多个 <base>：只有第一个生效，Chrome 控制台提示 Multiple base elements detected. Only the first one is used.

哪些路径真受影响，哪些完全不受控

<base> 只影响 HTML 解析阶段硬编码的纯相对路径（即不以 /、: 或协议开头），对 JS/CSS 运行时行为零影响。

✅ 真受影响：<img src="logo.png">、<script src="app.js"></script>、<link href="theme.css">、<form action="submit.php"></form>、CSS 中的 background: url(avatar.jpg)
❌ 完全不受：fetch('./api/user')、import('./utils.js')、@import "reset.css"、new Worker('./worker.js')
⚠️ 半受控：document.baseURI 返回 <base href> 值，可用于 new URL('data.json', document.baseURI)；但 window.location 和 document.URL 完全不变

SPA 项目中必须显式对齐前端路由与构建配置

Vue Router v4+ 和 React Router v6+ 完全不读 document.baseURI，也不会根据 <base> 自动修正导航。HTML 里写了 <base href="/myapp/">，但路由没配 base，就会资源加载走 /myapp/js/app.js，而点击链接跳到 /home —— 行为割裂。

Vue Router：createRouter({ base: '/myapp/' }) + createWebHistory('/myapp/')
React Router：<router basename="/myapp"></router>
Vite 构建若已设 build.base: '/myapp/'，HTML 中再手动写 <base href="/myapp/"> 会导致路径重复，例如请求 /myapp//myapp/assets/index.js
Webpack 的 publicPath 若设为 '/'，但 HTML 有 <base href="/myapp/">，runtime chunk 会从错误路径加载，直接 404