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://www.baidu.com/img/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:[email protected][email protected]&[email protected]&subject=Hello%20World&body=这是我用超链接创建的邮件!" target="_top">点击创建邮件!</a>
</p>
</body>
</html>
说明：
- href：如果要发送邮件，只需按照规定书写 href 地址即可；其中每个部分的解释如下，每部分间使用&连接即可；
- mailto:：收件人，如果有多个收件人，用英文逗号隔开；mailto与后面内容使用?连接；
- cc=：抄送人，如果有多个，用英文逗号隔开；
- bcc=：秘密抄送人，如果有多个，用英文逗号隔开；
- subject= ：邮件主题
- body=：邮件内容
- %20：在地址中不能包含空格，所以地址中的空格都必须使用%20来代替；
上述代码的效果如下：
点击这里发送电子邮件： 点击创建邮件!
点击后生成如下邮件：
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基础学习之基础篇》，可以跳转到指定文章；
点击《其他常用标签》，可以跳转到指定文章的制定位置；