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

相关文章
|
算法 Java Go
Go语言GC:吞吐量和延迟的博弈
Go语言GC:吞吐量和延迟的博弈
291 0
|
4月前
|
机器学习/深度学习 人工智能 监控
AI 视频监控技术核心解析:三大底层能力支撑智能化升级
AI视频监控突破传统安防局限,依托三大核心技术:从“被动感知”到“主动理解”,实现精准场景识别;从“孤立运行”到“深度协同”,构建业务联动闭环;从“高门槛应用”到“普惠化落地”,降低部署成本与使用门槛。技术融合场景定制、智能决策与轻量化架构,推动安防向高效、智能、普及化方向升级。
1086 0
|
5月前
|
缓存 Shell Android开发
抖音私信卡片怎么做,安卓和IOS设备
抖音私信卡片开发指南(Android/iOS) 一、技术实现原理
微信养号脚本,导入手机号自动添加,autojs代码分享
这段代码实现了基本的微信自动添加好友功能,包括读取手机号文件、启动微信、搜索用户和发送
|
9月前
|
安全 Java API
理解Akamai EdgeGrid认证在REST API中的应用
Akamai作为内容分发和云服务的领导者,提供了EdgeGrid平台以提升Web应用的速度、可靠性和安全性。EdgeGrid认证(Auth)通过基于令牌的安全机制,利用HMAC-SHA256签名、时间戳和Nonce确保API请求的合法性与唯一性。文章详细介绍了在Python、Java和Go语言中实现EdgeGrid认证的方法,并探讨了如何使用Apipost、Postman和curl工具进行测试。这一认证机制是保障与Akamai REST API安全交互的关键,助力开发者构建更安全高效的数字平台。
|
7月前
|
存储 JSON 安全
HarmonyOS5云服务技术分享--ArkTS调用函数
本指南详细介绍了如何使用HarmonyOS的ArkTS语言通过云函数实现文件获取功能。从前期准备到核心四步(创建HTTP触发器、获取关键信息、编写调用代码、处理返回数据),手把手教你轻松上手。文中提供完整代码模板,包含基础与高级配置示例,并分享实战技巧和避坑指南,助你高效开发!适合初学者入门,快来尝试吧!
|
JavaScript Java 测试技术
基于SpringBoot+Vue的小零食销售系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的小零食销售系统的详细设计和实现(源码+lw+部署文档+讲解等)
233 11
基于SpringBoot+Vue的小零食销售系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
机器学习/深度学习 数据采集 人工智能
探索人工智能中的深度学习模型优化策略
探索人工智能中的深度学习模型优化策略
516 13
|
缓存 文件存储 Windows
何恢复被卸载软件的数据记录
何恢复被卸载软件的数据记录
1064 5
|
运维 监控 Devops