标签仅影响HTML解析阶段的特定属性(如a、img、script、link、form、meta refresh及CSS url()),不作用于srcset、绝对URL、根相对路径、JS/CSS模块导入或fetch等运行时API,且必须置于内唯一存在。
标签确实会统一改写页面中所有相对 URL 的解析起点,但它只对特定属性生效,且极易因部署路径、资源类型或动态加载方式出错。别指望它“一设就灵”,多数线上问题都源于误判了它的作用边界。
哪些 HTML 属性真正受
控制
浏览器仅在 HTML 解析阶段对明确用于资源定位的属性应用
。这些属性包括:
→ 解析为
base.href
+
"about.html"
→ 同上
和
中的
url=
值
CSS 文件内
url()
函数(如
background: url(icon.svg)
)——注意:这是 HTML 解析时计算的,不是 CSS 引擎自己 resolve 的
不生效的典型例子:
(根相对路径)、
(绝对 URL)、
(
srcset
不受控)。
放错位置或重复声明的后果
它必须是
的直接子元素,且整个文档中只能有一个。常见翻车点:
立即学习
“
前端免费学习笔记(深入)
”;
放在
里 → 浏览器完全忽略,控制台无报错但行为失效
模板拼接时 SSR 多次注入(比如 header 模板 + 页面模板各塞一个)→ 只有第一个生效,后续被丢弃,控制台可能提示
Multiple base elements detected. Only the first one is used.
用 JS 动态插入(如
document.head.appendChild(baseEl)
)→ 已解析的
src
/
href
不会重算,只影响之后新创建的元素(如后续
document.createElement('img')
)
最稳妥的做法:在 HTML 源码中手动确保它出现在
最顶部,且仅一次。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
CSS 和 JS 的 import 行为完全绕过
这是最容易被忽略的盲区。无论你设了
还是
,以下全部不受影响:
CSS 文件内的
@import "reset.css"
→ 仍按该 CSS 文件所在路径解析
JS 中的
import('./utils.js')
或
import.meta.url
→ 以模块自身位置为基准
fetch('./data.json')
、
new Worker('./worker.js')
、
XMLHttpRequest.open('GET', 'api/users')
换句话说:
是 HTML 解析层的规则,不是运行时的全局 URL 重写器。混合部署(HTML 在主站、静态资源走 CDN)时,如果依赖
统一前缀,务必确认所有资源引用都是 HTML 层的
src
/
href
,而非 JS/CSS 内部逻辑。
部署在子路径时,
href
值该写成什么格式
关键原则:值必须是绝对 URL 或根相对路径(以
/
开头),不能是普通相对路径(如
./app/
)。
✅ 正确:
(根相对,推荐,不绑定协议和域名)
✅ 正确:
(绝对 URL)
❌ 错误:
或
→ 浏览器会尝试拼到当前页面 URL 上,结果不可控
如果站点同时支持 HTTP/HTTPS、或需兼容 CDN 域名切换,优先用根相对路径;若必须指向 CDN,请确认所有被
影响的资源(尤其是
和
)确实部署在该 CDN 路径下,否则 404 是必然结果。