HTML基础之a标签的使用

文章目录

HTML基础之a标签的使用
- 1. a 标签的语法
- 1. 文本上的 a 标签
- 1. 图片上的 a 标签
- 1. 通过 a 标签创建电子邮件
- 1. 通过 a 标签跳转到当前页面的指定位置
- - 5.1 返回顶部
  - 5.2 跳转到指定章节
  - 5.3 跳转到指定页面的制定位置

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="/images/20221123/603277e803444415a09837e8d89847c9.png">
<img src="/images/20221123/603277e803444415a09837e8d89847c9.pngimg/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.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基础教程—张凯

点击这里发送电子邮件： 123456@qq.com&bcc=7890@qq.com&subject=Hello%20World&body=这是我用超链接创建的邮件!">点击创建邮件!

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

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>