html5-超链接的应用

2023-10-03 16:53:58

web知识训练-html5-超链接的应用

其中，属性href用于设置链宿的路径，超链接开始标签<a>和结束标签</a>之间的内容是链宿。运行效果如下：点一下试试

热字超链接及其设置

热字超链接，链源由对应的文本构成，外部超链接的链宿为目标文件的路径，例如链宿的绝对路径为https://https://www.baidu.com的话，可用下面的代码实现： <a href="https://www.baidu.com">点一下试试</a>

1、在HTML中，下面是超链接标签的是（A <a>...</a>）
2、下列选项中，用于设置超链接链宿路径的属性是（Bhref ）
3、在HTML中，若点击超链接时，弹出一个新的网页窗口，下列选项符合要求的是（C
<a href="right.html" target="_blank">看一看</a> ）
4、<a href="#">所表示的意义是（D.表示空链接，不做任何跳转）。
5、如果要在超链接中设置电子邮件链接，则href属性值可设置为（ B.mailto:zhangsan@qq.com）

第1关：创建热字超链接

任务描述

本关任务：编写一个带有热字超链接的网页。

相关知识

为了完成本关任务，你需要掌握：1.超链接的概念，2.热字超链接的语法格式。

超链接的概念

超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件编辑器，一个音频或视频文件，甚至是一个应用程序。设置一个超链接，至少需要两个基本要素：
链源：引起跳转的原因
链宿：要跳转的目标

编程要求

在右侧编辑器中的Begin - End区域内补充代码，创建热字超链接，具体要求是： 1.链源文字为“听音乐找酷我”。 2.链宿地址为“https://www.kuwo.cn/”。

测试说明

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建超链接</title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
 <h2><a href="https://www.kuwo.cn/">听音乐找酷我</a></h2>
   <!-- ********* End ********* -->
 </body> 
</html>

第2关：创建热图超链接

任务描述

本关任务：编写一个带有图像超链接的网页。

编程要求

在右侧编辑器中的Begin - End区域内补充代码，创建图像超链接，具体要求是： 1.链源图像的路径为“https://www.educoder.net/api/attachments/2357951”。 2.为链源图像设置图文对齐属性，属性取值为bottom 3.图像超链接的链宿地址为“https://www.kuwo.cn/”。 4.当鼠标悬停在链源图像上时显示提示文字“单击进入”。 5.设置超链接目标窗口的打开方式为“在新窗口中打开被链接的文档”。

测试说明

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建超链接</title>
 </head>
 <body>
 <h2><a href="https://www.kuwo.cn/">听音乐找酷我</a></h2>
   <!-- ********* Begin ******* -->
   <a href="https://www.kuwo.cn/"  target="_blank"  title="单击进入">
      <img src="https://www.educoder.net/api/attachments/2357951" align="bottom">
    </a>
    
   <!-- ********* End ********* -->
   好音质用酷我
 </body> 
</html>

第3关：下载歌曲超链接

任务描述

本关任务：编写一个能打开或下载音乐的超链接程序。

编程要求

在右侧编辑器中的Begin - End区域内补充代码，创建音频超链接，具体要求是： 1.链源热字为“安妮的仙境” 2.链宿音频的路径为“https://www.educoder.net/api/attachments/2364090”。 3.为链源热字设置鼠标悬停的提示文字为“下载班得瑞钢琴曲-安妮的仙境”。

测试说明

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建超链接</title>
 </head>
 <body>
 <h2><a href="http://www.kuwo.cn/">听音乐找酷我</a></h2>
  <a href="http://www.kuwo.cn/"><img src=https://www.educoder.net/api/attachments/2357951  align=bottom /></a>
  好音质用酷我<br/>
   <!-- ********* Begin ******* -->
  推荐下载：  
  安妮的仙境
   <!-- ********* End ********* -->
  <p><h2>在线播放：</h2><audio src="https://www.educoder.net/api/attachments/2364090" controls="controls"></audio>
  </p>
 </body> 
</html>

第4关：创建页内超链接

任务描述

本关任务：编写一个能实现网页内部超链接的程序。

编程要求

请在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.在Begin2 - End2区域处设置锚点，锚点名称为“Q",链源文字为“这是第7个音频”。 2.在Begin1 - End1区域设置指向锚点“Q”的超链接，链源文字为“查看第7个音频”。

测试说明

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建超链接</title>
 </head>
 <body>
 <h2><a href="http://www.kuwo.cn/">听音乐找酷我</a></h2>
  <a href="http://www.kuwo.cn/"><img src=https://www.educoder.net/api/attachments/2357951  align=bottom /></a>
  好音质用酷我<br/>
   <!-- ********* Begin1 ******* -->
  <h2><a href="#Q" title="查看第7个音频">查看第7个音频</a></h2>
   <!-- ********* End1 ********* -->
  推荐下载：  
  <a href="https://www.educoder.net/api/attachments/2364090" title="下载班得瑞钢琴曲-安妮的仙境">安妮的仙境</a>
  <p><h2>在线播放：</h2><audio src="https://www.educoder.net/api/attachments/2364090" controls="controls"></audio>
  </p>
	 <h2>这是第1个音频</h2>
     <h2>这是第2个音频</h2>
     <h2>这是第3个音频</h2>
     <h2>这是第4个音频</h2>
     <h2>这是第5个音频</h2>
     <h2>这是第6个音频</h2>
     <h2>
    <!-- ********* Begin2 ******* -->
       <a name="Q" title="这是第7个音频">这是第7个音频</a>
    <!-- ********* End2 ********* -->
     </h2>
     <h2>这是第8个音频</h2>
 </body> 
</html>

码农公寓

web知识训练-html5-超链接的应用

任务描述

相关知识

编程要求

测试说明

第2关：创建热图超链接

任务描述

相关知识

编程要求

测试说明

第3关：下载歌曲超链接

任务描述

相关知识

编程要求

测试说明

第4关：创建页内超链接

任务描述

相关知识

编程要求

测试说明

相关文章