开发者学堂课程【HTML 基础入门学习: base 标签】学习笔记与课程紧密联系,让用户快速学习知识
课程地址:https://developer.aliyun.com/learning/course/465/detail/5716
base标签
内容介绍
一、<base/>
二、href属性
三、target属性
四、实例
一、<base/>
标签是一个单标签,不是成对出现的,与 link 相同。
必须置于head里,属于头部页面相关信息。
二、href 属性
1.作用
定义默认链接地址
2.原理
网页上拥有众多链接,这些链接必须进行链接地址的书写。当没有写链接地址时,点击是无效的,此时若使用 base 设定了默认的链接地址 down,即使一个链接没有写对应的地址,由于在头部设置了默认地址,故链接仍然有效。
三、target 属性
(1)作用
定义默认打开链接的方式
(2)可设定的方式
一个链接点击后可能在当前页面进行刷新,也可能跳转到新的页面,此即可以设定打开的方式。
四、实例
1.实例1
<html>
<head>
<title><title>
</head>
<body></body>
</html>
//引入代码后写入地址:
<html>
<head>
<title><title>
<base href="http://www.abc.com/static/"/>
//地址一定放在头部。 此处 href 指明了默认链接,没有写链接的时候,默认链接就是其本身。
<base target="_blank"/>
//如果不写此属性就是处在当前页面,写入 _blank(即空白)则为在新的页面打开,此即为经常遇到的点击一个链接会新开一个页面的情况。默认所有链接都在新页面打开。
</head>
<body>
<a href=“”>abc.com</a>
</body>
</html>
此时为空,什么都没有写,观察它是否会跳到此地址栏。
打开显示: abc.com ,此时在上方加入了 _blank,表示在新页面中打开。点击链接会新开一个页面。
此链接里什么都没有写,但是会跳转到 www.abc.com/static/
这时候将<base href="http://www.abc.com/static/"/>
注释掉,刷新页面,点击链接,相当于空,就是当前本身。
没有写默认链接的时候,点击还是会跳到当前页面,如果写了以后,点击链接就会跳到默认的页面。
这时候写入:
<html>
<head>
<title><title>
<base href="http://www.abc.com/static/"/>
<base target="_blank"/>
</head>
<body>
<a href=“news”>abc.com</a>
</body>
</html>
刷新,点击链接会发现虽然这个链接不存在但是会跳转到默认链接前面地址和 news 拼接成一个完整的链接:
www.abc.com/static/news
当一个页面有很多链接的时候每个地方都要写完整链接十分麻烦,有些链接域名都是一样的,可以定义域名,只改变域名后面的内容。
比如写入:
<a href=“about”>abc.com2</a>
刷新点击会跳到about的页面,也就是跳到不同网站的域名下不同页面,此为base的作用。其他链接同理。
2.实例2
来到百度页面,随便点击一个页面上的链接,如高速拟长期收费链接,在地址栏中会看到这个链接的地址:
https:/www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=
高速拟长期收费&rsv_idx=2
将s?cl=3&tn=baidutop10&fr=top1000&wd=
高速拟长期收费&rsv_idx=2 复制下来写入刚才的代码中替换 news 如下,将链接改为baidu
.com
:
<html>
<head>
<
title><title>
<base href="http://www.abc.com/static/"/>
<base target="_blank"/>
</head>
<body>
<a
href=
“
s?cl=3&tn=baidutop10&fr=top1000&wd=
高速拟长期收费&rsv_idx=2”>abc.com</a>
<a
href=
“about
”>abc.com2</a>
</body>
</html>
//所有链接默认链接都跳到百度,之后的内容即写入的链接和基础的链接拼成一个完整的链接。
//刷新页面显示:
Abc.com abc.com2
//点击第一个链接,会新开一个页面直接跳到百度中高速拟长期收费的消息页面。
//如果网站是abc.com,所有链接在写的时候都是会跟基础的默认链接进行一个拼接,但一个网站的链接有可能不是abc,而想要别的网站,比如abc里的链接,链接到淘宝。
//此种情况下不能书写相对链接,此种情况为相对路径,若此时需要写一个绝对路径:
<a href="http://taobao.com">taobao</a>
//这时即使设置了基础链接,如果 a 标签里用的是绝对路径,完整的路径那么基础链接是没有效果的。
//刷新页面:
Abc.com abc.com2
taobao
点击 taobao 链接就会跳转到:
https://www.taobao.com
//当不是完整的链接,是相对链接的时候就会和 base 进行拼接,这就是 base。
//如果使用的是一个相对路径,就是没有 http 打头的链接,那么就可以和base进行拼接,拼接成一个完整的链接。
//当做页面存在众多站内的链接时,编写大量诸如 abc.com,会很麻烦,可以定义一个基础模板,在其之上进行修改,将会较为便利。