此文为【前端修炼场】第六篇，上一篇文章链接：img 标签
前言
本篇文章我将带领诸位学习如何在页面中添加超链接。其实对于超链接我们应该很熟悉才是，就是我们平时点击链接之后，跳转到一个新的页面上的这一过程。
话不多说，诸君准备好了么？打开 VSCode 和我一起操作吧！
一、超链接引入
首先我们引入超链接的标签： < a > </ a> 很明显这是一个双标签。他的作用就是当我们点击标签的内容时，我们会跳转到一个新的页面，标签内容可以是文字也可以是图片，本文都以文字为例，诸位可以自行尝试内容为图片。
接下来我们直接在 VSCode 里面进行操作吧
HTML 框架搭建
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>构建 a 标签
<body> <a></a> </body>实现超链接切换（个人主页）
<body> <a href="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 在同一文件路径下跳转
示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="img/pic1.jpeg">超链接</a> </body> </html>a 标签内容我们写入 ‘超链接’ ，href 属性我们填入 img/pic1.jpeg，这就说明我们跳转的目的地址为同一文件目录下的 img 文件内的 pic1.jpeg 图片。注解：
上述代码实现的前提是需要在路径下添加上所示的图片，诸位可以自行添加图片，然后进行尝试。
2.1.2 跳转任意网址
实例跳转到百度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="https://www.baidu.com/">百度</a> </body> </html>诸位可以复制上述代码，查看结果
2.2 title 属性值
title 属性值的作用是显示我们鼠标悬停时候的提示信息，比如希望实现鼠标悬停在超链接内容上面时显示 ‘ 跳转到 *** ’的提示符。这时候只需要我们将 title 属性值设置为 ‘ 跳转到 *** ’即可。
诸位一定要自行尝试！
2.3 target 属性值
target 属性值的作用是设置超链接网页打开方式，我们可以选择从当前页面打开超链接，也可以选择跳转到新页面打开。
| target 属性值 | 打开方式 |
|---|---|
| 默认或者_self | 默认在当前页面打开超链接 |
| _blank | 在新页面打开超链接 |
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="https://www.baidu.com/" target="_self" >百度</a> <a href="https://www.baidu.com/" target="_blank" >百度</a> </body> </html>注解：
诸位可以复制上述代自行运行查看区别，我分别创建了两个超链接，一个是当前页面跳转，另一个是新页面跳转。
总结
很开心与你们相遇，相遇即是缘，祝愿我们都越来越好！
