首页 » 编程语言 » html » 正文

html中base标签的作用及用法详解

HTML中的<base>标签似乎使用的人不多,但是毕竟base标签还是有用武之地的时候,特别是哪些目录层级较多的情况下使用可以方便简洁链接地址,所以,我们有必须了解一下!

<base>标签定义

<base>标签可以帮你统一网页文档页面上的所有相对URL地址,指定一个默认地址和默认打开方式的属性(target属性)。

<head><base href="目标链接地址"  target="打开方式"></head>

base标签中href属性指定的目标链接地址,叫做基链接,或基准链接;

base标签中的基准链接是针对页面中所有相对链接才会起作用;

base标签是单标签,必须写在head标签内,一个页面最多只能有一个base标签;

base标签中target属性是针对所有没有设置target属性值的链接地址有效;

所有主流浏览器都支持base标签

<base>标签属性

属性名称属性值说明
href
URL规定页面中所有相对链接的基准 URL
target
_blank在新窗口中打开被链接的文档
_parent在父窗口中打开被链接的文档
_self默认值。在相同的框架中打开被链接文档。
_top在整个窗口中打开被链接文档
framename在指定的框架中打开被链接文档  

<base>标签用法 

当网页文档head标签内使用了<base>标签后,浏览器就会通过base标签指定的基准链接来解析当前页面中所有的相对URL地址。也就是说,浏览器在解析的时候会在相对链接的前面加上base标签指定的链接地址,从而使页面中所有的相对链接转换成绝对链接。

为了更加明白,我们来举例说明:  

首先,我们要在head标签内使用base标签,设置href属性值和target属性值,如下图所示:

<head>
<base href=http://www.liudaima.com  target=" _blank">
</head>

当我们使用了上面的base标签代码,设置了基准链接地址:http://www.liudaima.com ,也设置了target打开链接的方法是 _blank(表示在新窗口中打开链接),那么,我们就可以在网页代码中使用相对URL地址,如下面的代码:

<img src="logo.png" >

上面的代码中,logo图片地址是一个不完整的链接,但因为我们设置了base基准链接,所以,在浏览器中解析的时候会将这个不完整的图片地址转换成完整的绝对URL地址,也就是:

https://www.liudaima.com/logo.png

不仅图片img标签的src地址适合base基准链接规则,超链接a标签的href地址也适合,比如:

 <a href="5.html">这是一个地址不完整的相对链接地址</a>

上面这个超链接,也是一个不完整的相对链接地址,有了base基准链接的存在,这个超链接的相对URL地址也会在浏览器中被转换成下面这个完整的绝对地址:

https://www.liudaima.com/5.html

还有就是,<a>标签中没有设置target属性值,也就没有设置超链接打开的方式,所以,<a>标签里的超链接打开方式就会使用<base>标签中target设置打开链接的方法_blank,也就是在新窗口中打开链接地址!

如果a标签的href属性值没有设置,也就为空时,如下:

<a href="">这是一个href属性值为空的超链接地址</a>

 当超链接<a>标签href属性值为空时,超链接地址就会默认使用<base>标签的基准链接地址:http://www.liudaima.com

上面我们讲到了图像<img>和超链接<a>都适合于base标签内的规则,还有iframe、表单<form>、脚本、样式也适合于base标签规则,只要是base规则页面内的所有相对地址都是适用的,如果遇见没有指定src、href,或target属性值为空的情况,那么,均默认使用<base>标签内的基准链接地址和target属性值

绝对地址不适合<base>标签规则

但页面中所有的绝对地址和已经设置了target打开方式的属性值,都不适合base标签规则的。

<a href=https://www.liudaima.com/5.html target=" _blank">这个超链接是绝对地址且有target属性值</a>

由于上面的超链接代码中,href属性值有完整的绝对地址,且也有自己的target属性值_blank,所以,base标签的规则对这个超链接就不起作用!




欢迎您发表评论或留言