base标签必须置于head内且仅能有一个,href须为绝对或协议相对URL,target属性会全局影响链接行为,SPA应优先配置构建工具而非base标签。
base标签必须放在head里,且只能有一个
html
的
标签不是可有可无的装饰,它会直接影响所有相对url的解析起点。一旦放错位置(比如塞进
),浏览器直接忽略——连警告都不会抛。更麻烦的是,如果页面中意外出现两个
,后一个会覆盖前一个,但部分旧版ie甚至会直接崩溃解析。
实操建议:
只在
内写一次,且务必在所有
、
、
等依赖路径的标签之前
不要用JavaScript动态插入
,DOM操作无法改变已开始解析的URL基准
服务端渲染时注意模板拼接顺序,避免条件逻辑导致重复或遗漏
href值必须是绝对路径,不能用相对路径或变量占位
这种写法看似省事,实际无效:浏览器要求
属性必须是**绝对URL**(含协议和域名)或**协议相对URL**(如
)。写相对路径会导致整个
被静默丢弃,后续所有相对链接仍按当前页面URL解析,极易引发404。
常见错误现象:
本地开发时
能跑,部署到子路径(如
)后所有CSS/JS 404
误用环境变量,如
,未被服务端替换就发给浏览器,变成字面量字符串
正确做法:
立即学习
“
前端免费学习笔记(深入)
”;
静态站点:用完整绝对路径,如
单页应用(SPA)部署在子路径:必须带上下文路径,如
(注意结尾斜杠)
避免在
里拼接查询参数或hash,它们会被忽略
target属性影响所有带rel="noreferrer"以外的a标签跳转
看着方便,但副作用极隐蔽:它会让页面中**所有没显式声明
的
标签**默认新窗口打开——包括你根本没意识到的
、
,甚至第三方组件里的链接。更糟的是,现代浏览器对未声明
的
会强制降级为
,但老版本不会,存在安全风险。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
使用场景判断:
纯文档站、营销页,确实需要全局外链新开,才考虑设
Web应用、后台系统,一律不要设
,让交互逻辑由JS控制更可控
若必须用,优先写
(尽管
在
上不生效,得每个
自己加)
Vue/React项目里别靠base标签解决资源路径,改构建配置
在打包工具生成的HTML中硬塞
,短期能绕过404,但埋下三类坑:路由匹配失败(Vue Router的
选项和HTML
不联动)、懒加载chunk加载路径错乱、Service Worker缓存策略错位。Webpack/Vite的
或
配置才是正解。
实操对比:
错:在
里写
,同时Vite配置
→ 双重base导致资源路径变成
对:删掉HTML里的
,只配Vite的
,或Webpack的
SSR场景下,还要同步检查Node服务返回的HTML中
是否被模板引擎重复注入
真正难处理的是混合部署:前端静态资源走CDN,而API接口走另一个域名。这时候
完全无能为力,必须靠环境变量+运行时拼接URL。
href//cdn.example.com/https://a.com/myapp/hreftargetrel="noopener"target="_blank"target="_blank noopener"targettargetrelbasepublicPathbaseindex.htmlbase: "/admin/"/admin/admin/assets/xxx.jsbase: "/admin/"output.publicPath: "/admin/"