HTML基础之a标签的使用


文章目录

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


1. a 标签的语法

<a href="" target="_blank">HTML基础教程</a>

说明：

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

target 的值

说明

_blank

在新的浏览器标签中打开

_self

默认值，在本标签中打开

2. 文本上的 a 标签

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

<a href="" target="_blank">《HTML基础教程》</a>

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


3. 图片上的 a 标签

图片的链接代码：

<a href="https://www.baidu.com/">
<img src="https://s2.51cto.com/images/blog/202309/19205959_65099b4fbcb1225526.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="别名" width="200" height="100"></a>

说明：

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

上述代码的效果：

a标签图片 jquery html中a标签的怎样设置图片_html



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基础教程--张凯

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

点击后生成如下邮件：

a标签图片 jquery html中a标签的怎样设置图片_html_02



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基础学习之基础篇》的第五章《其他常用标签》，步骤如下：

  1. 确定在需要跳转的地方有id值，这里我在指定位置加入a标签，如： <a id='base_id_5'><a> 
<!-- 在文章 《HMTL基础学习之基础篇》的第五章标题中，增加 a 标签-->
5. 其他常用标签 <a id='base_id_5'><a>
  1. 在跳转的网址中增加 #base_id_5，如下：
<p>文章<a href=''>《HMTL基础学习之基础篇》</a>的第五章<a href='#base_id_5'>《其他常用标签》</a></p>

效果如下：

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

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