HTML5+CSS前端开发【保姆级教学】+超链接标签

一、引入:

Hello!,各位编程猿们!一个页面可以跳转到其他页面,去访问其他资源,使得我们的文档更加的灵动,那我们如何实现不同页面的跳转呢?本期主要介绍超链接标签

那么什么是超链接标签呢?

我们可以打开百度的官网页面

当我们点击新闻按钮

就会跳转到百度新闻页面

当我们点击贴吧

页面则跳转到百度贴吧,我们点击的文字按钮就是超链接

二、超链接介绍

超链接是用于导航的一种基本元素,它允许用户通过单击跳转到其他页面或资源。它可以是一个字、一个词或者一组词,也可以是一幅图像,单击这些内容就可以跳转到新的文档或者当前文档中的某个部分。

(1)语法格式:

<a href="链接路径">文本或图像</a>

(2)作用:

它可以跳转到指定的页面(或者网站)

(3)属性介绍:

1.href

指定链接路径(a标签所要跳转的目标地址)

2.target

定义目标窗口 (通俗来说就是设置在浏览器打开目标网址的方式)

用于设置当前超链接跳转的目标网址,target属性值为为**_blank**时,指代当前超链接标签在新的窗口打开目标网址

3.title

定义链接提示信息

三、接下来我们用代码演示一下

首先,我们在键盘上输入a,回车

这时候我们可以看到a标签出来了

我们在href属性里面填写我们要跳转的路径,这里我们粘贴上B站的域名,并写上"哔哩哔哩"的文本

保存代码运行一下,可以看到页面上显示哔哩哔哩的文本链接,那么我们点击上面的文本链接

我们就可以看到页面会跳转到,哔哩哔哩的官网页面

  • 这里我们使用target属性,让它重新载入一个新窗口载入

现在我们看到的B站官网就是没有覆盖到原先的文本链接的页面

当然我们也可以多写一个超链接标签

我们可以发现两个超链接位于同一行

当然,如何我们不想让它们位于同一行,可以在每一句超链接标签外面,使用段落标签

运行结果,即可实现超链接标签换行效果

注意!目标地址不光是别人的网址,还可以跳转到自己的页面,这里只需要做的事情就是把链接路径改成要跳转的绝对路径就可以了,这期内容就到这里,如果你喜欢这篇文章的话,别忘了动动小手,点赞收藏噢!

相关推荐
Asmewill5 分钟前
DeepAgents学习笔记三(Backend记忆存储)
前端
RainCity17 分钟前
Java Swing 自定义组件库分享(十)
java·笔记·后端
Alan Lu Pop21 分钟前
前端开发助手
前端·智能体
程序员鱼皮22 分钟前
我用 GitHub 仓库养 AI 龙虾,自动开发上线项目!保姆级教程
前端·人工智能·ai·程序员·github·编程·ai编程
276695829235 分钟前
京东随机变速滑块拼图验证码识别(京东E卡)
java·服务器·前端·python·京东滑块·京东变速滑块·京东e卡绑卡
FakeOccupational1 小时前
【数学 代数学】无理数:\sqrt2和\pi 是无理数的证明 + 无理数集合的“非正则”性质(暂记)
笔记
এ慕ོ冬℘゜1 小时前
手写生产级 jQuery Toast 轻量提示组件|零插件依赖、动画流畅、极简高
前端·javascript·jquery
Oneslide1 小时前
UI设计-企业OA风格
前端
是小王同学啊~1 小时前
Kafka 面试通关笔记:高频八股 + 生产实战 + 追问链路(上)
笔记·面试·kafka
程序员海军1 小时前
我用了 8 个月 Codex CLI,总结出这套 AI 编程工作流
前端·后端·aigc