鼠标放在a标签上不显示url地址怎么弄_使用HTML <base>元素指定文档根URL

HTML的<base>元素常被忽视,但它对于处理相对URL至关重要。它指定文档中所有相对链接的基础路径,影响如<a>、<img>、<link>等标签的URL解析。例如,设置<base href="http://www.deathghost.cn/">后,所有相对路径都将以此为基础。理解这一概念对于优化网页资源引用和单页应用尤其重要。
摘要由CSDN通过智能技术生成
通常Web页面创建链接资源(页面、样式表、图片等系列),一般情况下我们会通过绝对路径或相对路径链接到这些资源文件,使其可访问。那么我们今天看看HTML中<base>元素作用。

绝对路径是特定指向资源,通常以域名(http/https)开头,如同http://www.deathghost.cn/public/images/avatar.jpg这般;而相对路径则取决于你的根位置或当前域名下。

f99131b8d071d38568ba4cd0bd00ff68.png

犹如:
<img src="/public/images/avatar.jpg" alt="avatar"/>
这个问题都是众所周知,无需多言。
但是,我们往往在创建文档时可能很少注意<base>元素,这个一直存在,我们在创建基础文档却很少用或很少看到;单页面应用上如Angular创建时会在根文档上默认创建此标签,大家不妨看看项目里的index文件。
<base>元素的作用就是:允许我们在处理相对URL时指定其源目标路径,默认其上下文目标路径。
示例
我们在文档head元素包裹中添加设置一个<base>元素指向
<base href="http://www.deathghost.cn/">
然后再body内容中添加
<a href="b.html">URL</a>
鼠标移到页面链接上则可以看到其地址为:http://www.deathghost.cn/b.html
若无head中设置,则会显示文档所在目录地址
file:///C:/Users/DeathGhost/Desktop/b.html
我们可以通过JS脚本去查询document.baseURI,如果文档中不包含<base>标签,baseURI 默认为 document.location.href
另外注意一点是,<base>元素属于一个空元素,因此其没有技术标签且位于文档head元素中只可读取一个,多设无意。
使用 <base> 标签后浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a><img><link><form> 标签中的 URL。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值