此文为【前端修炼场】第六篇，上一篇文章链接：
img 标签
文章目录
前言
本篇文章我将带领诸位学习如何在页面中添加超链接。其实对于超链接我们应该很熟悉才是，就是我们平时点击链接之后，跳转到一个新的页面上的这一过程。
话不多说，诸君准备好了么？打开 VSCode 和我一起操作吧！
一、超链接引入
首先我们引入超链接的标签： < a > </ a> 很明显这是一个双标签。他的作用就是当我们点击标签的内容时，我们会跳转到一个新的页面，标签内容可以是文字也可以是图片，本文都以文字为例，诸位可以自行尝试内容为图片。
接下来我们直接在 VSCode 里面进行操作吧
- HTML 框架搭建
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html> - 构建 a 标签
<body><a></a></body> - 实现超链接切换（个人主页）
<body><ahref="https://blog.csdn.net/fsadagds?type=blog"title="一碗黄豆酱的个人主页"target="_blank">一碗黄豆酱的个人主页</a></body> - 效果展示>
细心的道友肯定已经发现了，我们前面光介绍了 a 标签，别的啥也没讲咋就突然搞出来超链接来了？我也没错过什么呀，那当然是因为我们超链接标签的属性值没有介绍，接下来我们详细介绍一下超链接的属性值。
二、属性值介绍
属性值****含义href添加跳转路径title鼠标悬停时的提示信息target跳转方式
接下里我将为诸位详细介绍每一个属性值。
2.1 href 属性值
href 属性的作用就是提供路径，让我们的 a 标签能够识别到目标。
接下来我带诸位详细的感受一下 href 属性值（前面我们讲过的绝对地址和相对地址，如果忘记了可以回顾一下）
传送门
2.1.1 在同一文件路径下跳转
- 示例代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><ahref="img/pic1.jpeg">超链接</a></body></html>`````` a 标签内容我们写入 ‘超链接’ ，href 属性我们填入 img/pic1.jpeg，这就说明我们跳转的目的地址为同一文件目录下的 img 文件内的 pic1.jpeg 图片。 - 注解：> 上述代码实现的前提是需要在路径下添加上所示的图片，诸位可以自行添加图片，然后进行尝试。
2.1.2 跳转任意网址
- 实例跳转到百度
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><ahref="https://www.baidu.com/">百度</a></body></html> - 诸位可以复制上述代码，查看结果
2.2 title 属性值
title 属性值的作用是显示我们鼠标悬停时候的提示信息，比如希望实现鼠标悬停在超链接内容上面时显示 ‘ 跳转到 *** ’的提示符。这时候只需要我们将 title 属性值设置为 ‘ 跳转到 *** ’即可。
诸位一定要自行尝试！
2.3 target 属性值
target 属性值的作用是设置超链接网页打开方式，我们可以选择从当前页面打开超链接，也可以选择跳转到新页面打开。
target 属性值打开方式默认或者_self默认在当前页面打开超链接_blank在新页面打开超链接
- 代码示例：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><ahref="https://www.baidu.com/"target="_self">百度</a><ahref="https://www.baidu.com/"target="_blank">百度</a></body></html> - 注解：> 诸位可以复制上述代自行运行查看区别，我分别创建了两个超链接，一个是当前页面跳转，另一个是新页面跳转。
总结
很开心与你们相遇，相遇即是缘，祝愿我们都越来越好！
本文转载自: https://blog.csdn.net/fsadagds/article/details/127226984
版权归原作者 一碗黄豆酱 所有， 如有侵权，请联系我们删除。
版权归原作者 一碗黄豆酱 所有， 如有侵权，请联系我们删除。