Educoder html5-超链接的应用

最新推荐文章于 2022-04-06 19:25:54 发布

是小鹿啊

最新推荐文章于 2022-04-06 19:25:54 发布

阅读量616

点赞数 2

分类专栏： Educoder 前端文章标签：前端 html5

来自是小鹿啊的博客

本文链接：https://blog.youkuaiyun.com/m0_51511286/article/details/121645354

版权

前端同时被 2 个专栏收录

40 篇文章

订阅专栏

Educoder

35 篇文章

订阅专栏

本文详细介绍了HTML5中超链接的四种应用：热字链接、图像链接、下载链接和页内链接。通过实例代码展示了如何创建这些链接，包括设置链源、链宿、目标窗口、提示文字和锚点等。学习者可以通过此教程掌握HTML5超链接的基本用法。

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

html5-超链接的应用

第1关：创建热字超链接

编程要求

在右侧编辑器中的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/" title="单击进入" target="_blank">
     <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 ******* -->
  推荐下载：  
  <a href="https://www.educoder.net/api/attachments/2364090" title="下载班得瑞钢琴曲-安妮的仙境">安妮的仙境</a>
   <!-- ********* End ********* -->
  <p><h2>在线播放：</h2><audio src="https://www.educoder.net/api/attachments/2364090" controls="controls"></audio>
  </p>
 </body> 
</html>

自我总结

注意关于<a>标签和<img>标签相关的链接元素的属性的意思和相应需要填写的部分

第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>