协议相对路径合法有效，但必须以//开头且结尾带斜杠，否则firefox等浏览器会错误拼接路径；它仅影响html中纯相对url（如logo.png），对根路径、绝对路径及js/css内路径无效。
base href="//cdn.example.com/" 是合法且有效的写法
协议相对路径（即以 // 开头的 URL）是 <base> 标签明确支持的三种合法格式之一，和 https://、http://、/ 开头的值一样，会被浏览器正常识别并生效。它不是“相对路径”，而是协议相对 URL——浏览器会自动继承当前页面的协议（http 或 https），再拼接后续部分。
常见误判是把它当成普通相对路径而拒绝使用，其实只要开头是 //，结尾带斜杠（如 //cdn.example.com/v3/），就完全合规。
-
//cdn.example.com/v3/✅ 生效，适用于混合协议环境（比如 HTTP 内网调试 + HTTPS 生产） -
//cdn.example.com/v3❌ 缺尾斜杠，Firefox 可能截断为//cdn.example.com/v3css/，导致style.css请求失败 -
cdn.example.com/v3/❌ 无协议前缀，被静默忽略，所有相对路径退回到按当前页面 URL 解析 -
https://cdn.example.com/v3❌ 缺尾斜杠，同样有截断风险，应写成https://cdn.example.com/v3/
协议相对 base 不影响根相对或绝对路径的解析
<base href="//cdn.example.com/v3/"> 只改写纯相对路径（如 logo.png、app.js）的起点，对已有协议或根路径的 URL 完全无感。
也就是说，以下写法都不受它影响：
-
<img src="/assets/icon.svg">→ 仍解析为https://example.com/assets/icon.svg（根相对，跳过 base） -
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>→ 绝对 URL，原样请求 -
<link href="style.css">→ 纯相对，被重写为https://example.com/cdn.example.com/v3/style.css（假设当前页是 HTTPS）
协议相对 base 在跨协议部署时最实用，但也最容易漏掉斜杠
当你需要同一份 HTML 同时跑在 HTTP（本地开发、内网测试）和 HTTPS（线上）环境时，// 前缀省去了硬编码协议的麻烦。但它的容错率极低：浏览器只检查开头是否为 //，不校验域名合法性，也不验证路径是否存在——只要格式对，就执行；格式错，就静默丢弃。
实际踩坑点集中在结尾斜杠上：
- 没斜杠 → Firefox / Opera 会把后续拼接的路径（如
style.css）直接黏在域名后，变成//cdn.example.com/v3style.css - CDN 域名带路径层级（如
//cdn.example.com/v3/static/）→ 必须确保末尾是/，否则整个路径层级错位 - 本地开发用
file://协议时，//base 通常失效，部分浏览器不支持该协议下的协议相对解析
JS 和 CSS 里的路径不受协议相对 base 影响
这是最容易混淆的一点：<base href="//cdn.example.com/v3/"> 对 fetch('./api')、import('./utils.js')、@import "reset.css"、background: url(avatar.jpg) 全部无效。
原因很直接：这些路径是在 JS 执行时或 CSS 解析时动态计算的，而 <base> 仅作用于 HTML 解析阶段的静态属性值（src、href、action 等）。所以别指望靠它“一揽子解决所有路径问题”——它只管 HTML 层那一批纯相对字符串。
真正要统一 JS/CSS 内部路径，得靠构建工具配置（如 Webpack 的 publicPath、Vite 的 base）或运行时拼接逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
