超链接标签

最新推荐文章于 2023-12-07 20:17:31 发布

糯米小辣条

最新推荐文章于 2023-12-07 20:17:31 发布

阅读量1.3k

点赞数 1

分类专栏： Web practice of Educoder

本文链接：https://blog.csdn.net/m0_47174730/article/details/110347174

版权

Web practice of Educoder 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了超链接的概念、分类及设置方法，包括热字链接、图片链接、音乐链接和页内链接的实现。通过实例展示了如何创建指向百度网页的热字链接、用图片作为链接以及打开或下载音乐的超链接，以及如何实现网页内部的跳转。学习这些内容，有助于深入理解HTML中超链接的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第1关：超链接相关的概念
任务描述
本关任务：完成一组超链接相关的单选题。
相关知识
为了完成本关任务，你需要掌握：1.超链接的概念，2.超链接的分类及设置方法。
超链接的概念
超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件编辑器，一个音频或视频文件，甚至是一个应用程序。
设置一个超链接，至少需要两个基本要素：
链源：引起跳转的原因
链宿：要跳转的目标
超链接的分类
按照链源的种类来划分，超链可以有以下形式：
热字超链接：文本中被指定具有特殊含义或需要进一步解释的文字，触发这些文字可得到进一步的解释和说明。
热图超链接：一些具有特殊含义的图像，触发这些图像可以得到一个大图或者执行某种操作。
热区超链接：在图像的显示区上指明一个敏感区域，触发这个区域就能转移到另一个更为详尽的描述页面。
热点超链接：时基类媒体在时间轴上的点，触发该热点将从该点处继续播放。
热属性超链接：关系数据库中的属性，当属性值达到触发要求时将引起超链接。
按照链宿与网页的位置关系来划分，可以分两大类：
外部超链接：从当前HTML文档跳转到另一HTML文档或其他位置。
内部超链接：从当前HTML文档的某一位置跳到另一位置。按照链宿的具体表现，外部链接可以是打开一个新的网页、一个图片，一个电子邮件编辑器，一个音频或视频文件，甚至是一个应用程序等；内部链接可以是跳转到页内的锚点、设置页内的空链接（可用于绑定事件）等。
超链接的设置
使用<a>标记可以实现网页超链接，基本语法结构如下：

<a href="链宿">链源</a>

对于外部超链接，链宿是目标文件的路径，可以用绝对路径或相对路径方式提供。
如果链接目标为电子邮件编辑器，基本语法结构为：

<a href="mailto:邮箱地址">链源</a>

对于内部超链接，需要首先使用name属性为目标位置设置一个锚标识，然后再设置指向该标识的内部超链接。基本语法结构如下：

<a name="锚点名称"></a>
<a href="#锚点名称">链源</a>

超链接标签的属性主要有：
href：设置链宿的路径
name：创建文档内的书签
title：指向链接的提示信息
target：指定打开的目标窗口
target属性的取值及含义如下图所示：
在这里插入图片描述开始你的任务吧，祝你成功！
参考答案：

第2关：热字链接百度网址
任务描述
本关任务：编写一个实现热字超链接的小程序。
相关知识
为了完成本关任务，你需要掌握：1.外部超链接的语法格式，2.链源和链宿的设置。
外部超链接的语法格式
设置外部超链接的基本格式如下：

<a href="链宿">链源</a>

链源和链宿的设置
热字超链接，链源由对应的文本构成，外部超链接的链宿为目标文件的路径，例如链宿的绝对路径为https://www.educoder.net的话，可用下面的代码实现：

<a href="https://www.educoder.net">点一下试试</a>

编程要求
根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.在<body></body>之间添加超链接的设置，超链接文字为“这是一个指向百度页面的链接”；链接地址为（”https://www.baidu.com/" ）
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。注意：本测试对链接地址的引号无强制要求！

参考代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建超链接</title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
 <a href="https://www.baidu.com/">这是一个指向百度页面的链接</a>
   <!-- ********* End ********* -->
 </body> 
</html>在这里插入代码片

第3关：图片链接百度网址
任务描述
本关任务：编写一个通过图片实现超链接的程序。
相关知识
为了完成本关任务，你需要掌握：1.嵌入图像的标签及属性，2.超链接标签的target属性。
嵌入图像的标签及属性
用图像作为超链接的链源，可使用img标签来嵌入图像，该标签常用的属性有：src、alt、border、title、width、height等。
超链接标签及target属性
在超链接标签<a>中通过href属性设置链宿的路径，通过target属性设置打开目标的窗口，其取值可以是：_blank、_parent 、_self 、_top 和框架名。
编程要求
根据提示，在右侧编辑器中的Begin - End区域内补充代码，以实现通过点击下图所示的logo图片链接百度网址，具体要求是：
1.在a标签中设置href属性，百度地址为http://www.baidu.com ；target属性，要求点击图片后跳转到一个新的页面；
2.在img标签中要求设置图片border边距为0，logo图片的路径为https://www.educoder.net/api/attachments/1184937 。
在这里插入图片描述

测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
参考代码：

<!DOCTYPE html>
<html>
<body>
<p>
快来试试用图像作为超链接吧！：<br />
   <!-- ********* Begin ******* -->
 <a href="http://www.baidu.com" target="_blank"></a>
 <img border=0 src="https://www.educoder.net/api/attachments/1184937"/>
   <!-- ********* End ********* -->
</p>
</body>
</html>在这里插入代码片

第4关：打开或下载音乐
任务描述
本关任务：编写一个能打开或下载音乐的超链接程序。
相关知识
为了完成本关任务，你需要掌握：外部超链接的其他类型
外部超链接的其他类型外
外部超链接不仅可以打开网页，还可以打开图像、音乐和视频等文件，浏览器可以自动识别文件的后缀，从而确定打开的目标文件类型。不管何种类型设置超链接链源和链宿的方法都相同。
这里不再赘述。
编程要求
在右侧编辑器中的Begin - End区域内补充代码，为该网页添加外部超链接，链源热字为“钢琴曲《晨光》”，链宿音乐的URL为
http://sd.sycdn.kuwo.cn/e366519a4cfcc9fedbe3018f29a64d9e/5f7c4a24/resource/n1/4/9/3580363576.mp3
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。注意：本测试对链接地址的引号无强制要求！

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建打开或下载音乐</title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
<a href="http://sd.sycdn.kuwo.cn/e366519a4cfcc9fedbe3018f29a64d9e/5f7c4a24/resource/n1/4/9/3580363576.mp3">钢琴曲《晨光》</a>
   <!-- ********* End ********* -->
 </body> 
</html>在这里插入代码片

第5关：页内链接
任务描述
本关任务：编写一个能实现网页内部超链接的程序。
相关知识
为了完成本关任务，你需要掌握：1.页内链接的概念，2.页内链接的设置方法。
页内链接
从当前HTML文档的某一位置跳到另一位置的链接称为页内链接。
页内链接的设置
页内链接的设置有两个步骤：
1.在目标位置处设置锚点，若锚点名称为“name1”,代码如下：

<a name="name1"></a>

2.设置指向锚点位置的超链接，若链源热字为”跳转至name1”,代码如下：

<a href="#name1">跳转至name1</a>

编程要求
请在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.在Begin2 - End2区域处设置锚点，锚点名称为“Q”,链源文字为“这是第7个网页”。
2.在Begin1 - End1区域设置指向锚点“Q”的超链接，链源文字为“查看第7个网页”。
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
参考代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>链接到同一页面的不同位置</title>
 </head>
 <body>
   <!-- ********* Begin1 ******* -->
   <a href="#Q">查看第7个网页</a>
   <!-- ********* End1 ********* -->
	<h2>这是第1个网页</h2>
   <h2>这是第2个网页</h2>
   <h2>这是第3个网页</h2>
   <h2>这是第4个网页</h2>
   <h2>这是第5个网页</h2>
   <h2>这是第6个网页</h2>
   <h2>
    <!-- ********* Begin2 ******* -->
    <a name="Q">这是第7个网页</a>
    <!-- ********* End2 ********* -->
   </h2>
   <h2>这是第8个网页</h2>
 </body> 
</html>在这里插入代码片