【前端修炼场】— 网页到底是添加超链接的呢

一碗黄豆酱

已于 2023-01-15 22:30:25 修改

阅读量3.2k

点赞数 13

分类专栏：【前端修炼场】文章标签：前端 vscode javascript

于 2022-10-11 16:25:06 首次发布

本文链接：https://blog.csdn.net/fsadagds/article/details/127226984

版权

【前端修炼场】专栏收录该内容

9 篇文章 49 订阅

订阅专栏

在这里插入图片描述

此文为【前端修炼场】第六篇，上一篇文章链接：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>

注解：

诸位可以复制上述代自行运行查看区别，我分别创建了两个超链接，一个是当前页面跳转，另一个是新页面跳转。

总结

很开心与你们相遇，相遇即是缘，祝愿我们都越来越好！

在这里插入图片描述

一碗黄豆酱

关注

13
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
6
评论
【前端修炼场】— 网页到底是添加超链接的呢

本篇文章我将带领诸位学习如何在页面中添加超链接。其实对于超链接我们应该很熟悉才是，就是我们平时点击链接之后，跳转到一个新的页面上的这一过程。话不多说，诸君准备好了么？打开 VSCode 和我一起操作吧！属性值含义href添加跳转路径title鼠标悬停时的提示信息target跳转方式接下里我将为诸位详细介绍每一个属性值。很开心与你们相遇，相遇即是缘，祝愿我们都越来越好！
复制链接

扫一扫