HTML a标签（a标签的使用，收藏这一篇就够了）

这么神奇

已于 2022-09-08 13:15:02 修改

阅读量1.6w

点赞数 8

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

于 2020-10-15 12:46:22 首次发布

本文链接：https://blog.csdn.net/weixin_47139649/article/details/109079440

版权

HTML 专栏收录该内容

4 篇文章 31 订阅

订阅专栏

HTML基础之a标签的使用

文章目录

HTML基础之a标签的使用

1. a 标签的语法

<a href="https://blog.csdn.net/weixin_47139649/article/details/109075700" target="_blank">HTML基础教程</a>

说明：

href：a 标签的链接地址；
target：新地址的打开方式；见下表：

target 的值	说明
_blank	在新的浏览器标签中打开
_self	默认值，在本标签中打开

2. 文本上的 a 标签

文本的链接比较简单，代码如下：

<a href="https://blog.csdn.net/weixin_47139649/article/details/109075700" target="_blank">《HTML基础教程》</a>

上述代码的效果：《HTML基础教程》

3. 图片上的 a 标签

图片的链接代码：

<a href="https://www.baidu.com/">
<img src="https://i-blog.csdnimg.cn/blog_migrate/ffd0b02b62b8799a69d21fd99d5735ab.png" alt="别名" width="200" height="100"></a>

说明：

href：链接的地址；点击图片则跳转到该地址；
src：图片的本地路径或者网络图片的地址；
alt ：图片不能正确加载时候，使用别名代替图片；
width：图片宽度；
height：图片高度；
style：可以在这里调节图片的样式；例如加边框：style="border:10px #FFF000 solid;"；

上述代码的效果：

4. 通过 a 标签创建电子邮件

电子邮件链接的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML基础教程--张凯</title>
</head>
<body>

<p>
点击这里发送电子邮件：
<a href="mailto:794532995@qq.com?cc=123456@qq.com&bcc=7890@qq.com&subject=Hello%20World&body=这是我用超链接创建的邮件!" target="_top">点击创建邮件!</a>
</p>

</body>
</html>

说明：

href：如果要发送邮件，只需按照规定书写 href 地址即可；其中每个部分的解释如下，每部分间使用&连接即可；
mailto:：收件人，如果有多个收件人，用英文逗号隔开；mailto与后面内容使用?连接；
cc=：抄送人，如果有多个，用英文逗号隔开；
bcc=：秘密抄送人，如果有多个，用英文逗号隔开；
subject= ：邮件主题
body=：邮件内容
%20：在地址中不能包含空格，所以地址中的空格都必须使用%20来代替；

上述代码的效果如下：

HTML基础教程--张凯

点击这里发送电子邮件：点击创建邮件!

点击后生成如下邮件：
在这里插入图片描述

5. 通过 a 标签跳转到当前页面的指定位置

5.1 返回顶部

网页编程中，很多时候我们可以看到‘回到顶部’，这样的按钮，点击我们就可以回到网页的顶部。这功能也可以通过a标签实现，方法如下：

<!-- 第一步：在需要返回的地方加一个 id ，这里我在标题的地方增加了一个id-->
<!-- 这个例子中，我在这篇文章标题的地方增加了一个id，这并不可见，我们可以通过查看源代码看到-->
HTML基础之a标签的使用（创建链接）<p id='id1'></p>

<!-- 第二步：创建一个连接，指向前面的 id -->
<p><a href="#id1"> 回到顶部</a></p>

上述代码的效果如下：

回到顶部

5.2 跳转到指定章节

再举一个例子：
我们在读电子书的时候，可以跳转到制定的章节；
把以下代码保存成 .html，即可使用；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a标签跳转到指定位置--张凯</title>
</head>
<body>

<p>
<a href="#8">查看第8章</a>
</p>

<h2>第1章</h2>
<p>这边显示该章节的内容……</p>

<h2>第2章</h2>
<p>这边显示该章节的内容……</p>

<h2>第3章</h2>
<p>这边显示该章节的内容……</p>

<h2>第4章</a></h2>
<p>这边显示该章节的内容……</p>

<h2>第5章</h2>
<p>这边显示该章节的内容……</p>

<h2>第6章</h2>
<p>这边显示该章节的内容……</p>

<h2>第7章</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="8">第8章</h2>
<p>这边显示该章节的内容……</p>

<h2>第9章</h2>
<p>这边显示该章节的内容……</p>

<h2>第10章</h2>
<p>这边显示该章节的内容……</p>

<h2>第11章</h2>
<p>这边显示该章节的内容……</p>

<h2>第12章</h2>
<p>这边显示该章节的内容……</p>

<h2>第13章</h2>
<p>这边显示该章节的内容……</p>

<h2>第14章</h2>
<p>这边显示该章节的内容……</p>

<h2>第15章</h2>
<p>这边显示该章节的内容……</p>

<h2></a>第16章</h2>
<p>这边显示该章节的内容……</p>

<h2>第17章</h2>
<p>这边显示该章节的内容……</p>

<h2>第18章</h2>
<p>这边显示该章节的内容……</p>

</body>
</html>

效果为：点击查看第8章，则页面跳转到第8章；

5.3 跳转到指定页面的制定位置

比如我现在有一个需求，想要通过超链接，跳转到文章《HMTL基础学习之基础篇》的第五章《其他常用标签》，步骤如下：

确定在需要跳转的地方有id值，这里我在指定位置加入a标签，如： <a id='base_id_5'><a>

<!-- 在文章 《HMTL基础学习之基础篇》的第五章标题中，增加 a 标签-->
5. 其他常用标签 <a id='base_id_5'><a>

在跳转的网址中增加 #base_id_5，如下：

 <p>文章<a href='https://blog.csdn.net/weixin_47139649/article/details/109075700'>《HMTL基础学习之基础篇》</a>的第五章<a href='https://blog.csdn.net/weixin_47139649/article/details/109075700#base_id_5'>《其他常用标签》</a></p>

效果如下：

文章《HMTL基础学习之基础篇》的第五章《其他常用标签》

点击《HMTL基础学习之基础篇》，可以跳转到指定文章；
点击《其他常用标签》，可以跳转到指定文章的制定位置；

这么神奇

关注

8
点赞
踩
68

收藏

觉得还不错? 一键收藏
打赏
3
评论
HTML a标签（a标签的使用，收藏这一篇就够了）

图片的链接：<a href="https://www.baidu.com/"><img border="10" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="别名" width="200" height="100"></a>上述代码的效果：
复制链接

扫一扫