【web编程训练-html5-超链接的应用】【web知识训练-html5-超链接的应用】

最新推荐文章于 2023-03-22 19:02:33 发布

牛小小小婷～

最新推荐文章于 2023-03-22 19:02:33 发布

阅读量1.6k

点赞数 2

分类专栏： # web 文章标签： html html5

本文链接：https://blog.csdn.net/hannah2233/article/details/121604486

版权

web 专栏收录该内容

14 篇文章 8 订阅

订阅专栏

文章目录

一、 web编程训练-html5-超链接的应用

第一关创建热字超链接

编程要求

在右侧编辑器中的Begin - End区域内补充代码，创建热字超链接，具体要求是：

链源文字为“听音乐找酷我”。
链宿地址为“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>

第二关创建热图超链接

编码要求：

在右侧编辑器中的Begin - End区域内补充代码，创建图像超链接，具体要求是：

链源图像的路径为“https://www.educoder.net/api/attachments/2357951”。
为链源图像设置图文对齐属性，属性取值为bottom
图像超链接的链宿地址为“https://www.kuwo.cn/”。
当鼠标悬停在链源图像上时显示提示文字“单击进入”。
设置超链接目标窗口的打开方式为“在新窗口中打开被链接的文档”。

代码展示

<!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 align="bottom" src="https://www.educoder.net/api/attachments/2357951" />
  </a> 
    
    
   <!-- ********* End ********* -->
   好音质用酷我
 </body> 
</html>

第三关

编码要求

在右侧编辑器中的Begin - End区域内补充代码，创建音频超链接，具体要求是：

链源热字为“安妮的仙境”
链宿音频的路径为“https://www.educoder.net/api/attachments/2364090”。
为链源热字设置鼠标悬停的提示文字为“下载班得瑞钢琴曲-安妮的仙境”。

代码展示

<!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 ******* -->
  推荐下载：  
  <a href="https://www.educoder.net/api/attachments/2364090" title="下载班得瑞钢琴曲-安妮的仙境"><audio controls="controls" >安妮的仙境</audio></a>

   <!-- ********* End ********* -->
  <p><h2>在线播放：</h2><audio src="https://www.educoder.net/api/attachments/2364090" controls="controls"></audio>
  </p>
 </body> 
</html>

第4关：创建页内超链接

编码要求

请在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

在Begin2 - End2区域处设置锚点，锚点名称为“Q",链源文字为“这是第7个音频”。
在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">查看第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">这是第7个音频</a>
    <!-- ********* End2 ********* -->
     </h2>
     <h2>这是第8个音频</h2>
 </body> 
</html>

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

1、在HTML中，下面是超链接标签的是（）。
A、<a>...</a>

2、下列选项中，用于设置超链接链宿路径的属性是（ B、href ）。

3、在HTML中，若点击超链接时，弹出一个新的网页窗口，下列选项符合要求的是（ C、
<a href="right.html" target="_blank">看一看</a>）。

4、<a href="#">所表示的意义是（ D、
表示空链接，不做任何跳转）。

5、如果要在超链接中设置电子邮件链接，则href属性值可设置为（ B、
mailto:zhangsan@qq.com）

牛小小小婷～

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【web编程训练-html5-超链接的应用】【web知识训练-html5-超链接的应用】

文章目录一、 web编程训练-html5-超链接的应用第一关创建热字超链接编程要求代码展示第二关创建热图超链接编码要求：代码展示第三关编码要求代码展示第4关：创建页内超链接编码要求代码展示二、web知识训练-html5-超链接的应用一、 web编程训练-html5-超链接的应用第一关创建热字超链接编程要求在右侧编辑器中的Begin - End区域内补充代码，创建热字超链接，具体要求是：链源文字为“听音乐找酷我”。链宿地址为“https://www.kuwo.cn/”。代码展示&l
复制链接

扫一扫