HTML|链接标签

最新推荐文章于 2023-05-23 19:24:32 发布

Alan_Lowe

最新推荐文章于 2023-05-23 19:24:32 发布

阅读量335

点赞数 1

分类专栏： # HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_45985728/article/details/118705337

版权

HTML 专栏收录该内容

26 篇文章 5 订阅

订阅专栏

HTML|链接标签

1.格式

IDEA输入a再按一下tab键即可生成a标签格式

<a href=""></a>

a标签的href时必填的，表示要跳转到哪个页面

2.文字标签跳转到百度

将href的内容设置为百度的网址，在a标签关闭之前写上前往百度即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<a href="https://www.baidu.com">前往百度</a>

</body>
</html>

点开网页：

在这里插入图片描述

我们再点击网页中的“前往百度”链接，即可跳转到百度：

在这里插入图片描述

3.图像标签跳转到我的博客主页

我们只需要将href的内容输入为自己的csdn主页地址，并且在a标签结束前设置一个图片即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<a href="https://blog.csdn.net/qq_45985728"><img src="../resource/image/demo01.png" alt=""></a>

</body>
</html>

点开网页：

在这里插入图片描述

点击我们在网页中放置的图片，即可前往我的csdn主页：

在这里插入图片描述

4.target

target的内容是我们链接出来的窗口在哪里打开，我们在默认情况下，点击了链接过后会在本页面打开，如果我们给target赋值为_blank，顾名思义，blank是空白的意思，链接会在一个新的网页打开：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<a href="https://blog.csdn.net/qq_45985728" target="_blank"><img src="../resource/image/demo01.png" alt=""></a>

</body>
</html>

结果：

在这里插入图片描述

5.锚链接

我们刚刚讲到的都是网页间的跳转，我们平时在上网的时候肯定遇到过，浏览到网页底部了，有一个回到网页顶部的按钮，点击过后即可跳转到网页顶部，这个就需要用到锚链接。

锚链接需要一个标记，而它被点击过后就会跳转到标记。

怎样做一个标记呢？只需要将a标签的href属性删除，再加上一个name属性就可以了：

<a name="top">顶部</a> <br/>

这样我们就生成了一个top标记，叫做顶部
我们再在网页中插入多张图片，让网页变长
最后我们再用一个a标签，将href属性写为#加上标记即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<a name="top">顶部</a> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>
<img src="../resource/image/demo01.png" alt="" width="400" height="400"> <br/>

<a href="#top">回到顶部</a>

</body>
</html>

打开网页我们可以看到网页已经比较长了：

在这里插入图片描述

我们可以看到整个网页除了中间的很多图片，最顶部有顶部两个字，这就是我们生成的top标签，而网页底部有一个链接“回到顶部”，这个链接就是我们设置的锚链接，点击它即可跳转到网页的顶部标签。

也可以将href设置为某个网页，然后在后面加上一个标记，即可跳转到该网页的该标记处。

6.邮件链接

href设置为mailto+邮箱即可

<a href="mailto:3036001820@qq.com">点击联系我</a>

人生没有白走的路，每一步都算数！

Alan_Lowe

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML|链接标签

HTML|链接标签1.格式IDEA输入a再按一下tab键即可生成a标签格式<a href=""></a>a标签的href时必填的，表示要跳转到哪个页面2.文字标签跳转到百度将href的内容设置为百度的网址，在a标签关闭之前写上前往百度即可：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>链接标签学习&
复制链接

扫一扫