base 标签|学习笔记

简介: 快速学习 base 标签

开发者学堂课程【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,会很麻烦,可以定义一个基础模板在其之上进行修改将会较为便利

相关文章
|
开发者
base 标签|学习笔记
快速学习 base 标签
|
9月前
|
存储 编解码 前端开发
Base64编码与打印标签(label)实例
在本篇文章,我们认识什么是Base64编码格式,以及它内部的编码规则;也列举了base64的常用使用场景以及注意方面,同时也列举了实际场景使用与代码示例。最后列举几种常用base64转码为arrayBuffer,blod等格式。
167 0
|
开发者
HTML标签 -base标签|学习笔记
快速学习HTML标签 -base标签
HTML标签 -base标签|学习笔记
|
运维 算法 数据挖掘
Proximity-Base Approaches|学习笔记
快速学习 Proximity-Base Approaches
Proximity-Base Approaches|学习笔记
学习:base64和图片。
一、网页即时聊天中,客户端A可以将图片转换为base64,发送到客户端B(可能经server端转发) 再由base64转换为图片。 关键字搜索:url、base64。
566 0
|
7月前
|
JavaScript
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
|
移动开发 前端开发 数据安全/隐私保护
标签 tag
学习tag标签
108 0
|
前端开发 Windows
最新评论--MXCMS LastComm标签
功能说明 最新评论 适用范围 首页模板,列表模板,内容模板 基本语法 [NT:Loop,NT:SiteID=0,NT:LabelType=LastComm,NT:Number=10,NT:ShowNavi=1, NT:NaviCSS=css,NT:TitleNumer=20,NT:C...
797 0
|
弹性计算 运维 数据安全/隐私保护
标签(TAG)的最佳实践
随着用户资源增加,用户管理难度也随之增加。标签是大客户批量管理资源的必需品;标签是人、财、物管理的重要手段;横向拉通云产品的分组工具。使用标签最有效的用户(公司/个人)通常创建与业务相关的标签组,以便从技术、业务和安全维度管理资源。
6455 0

热门文章

最新文章