👻 DeathGhost

使用HTML <base>元素指定文档根URL

这篇文章发布于

DeathGhost 编辑, 归类于HTML » 当前评论0条。

通常Web页面创建链接资源(页面、样式表、图片等系列),一般情况下我们会通过绝对路径或相对路径链接到这些资源文件,使其可访问。那么我们今天看看HTML中<base>元素作用。

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

HTML <base> 标签
HTML <base> 标签 文档根URL元素

犹如:

<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。

在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

当前共获取0条评论。

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕

"新码笔记"微信公众号🤳

Web前端实时信息尽在掌握之中

🟢同意 🔴拒绝