Educoder html5-超链接的应用

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

html5-超链接的应用

第1关:创建热字超链接

相关知识

超链接的概念

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

  • 链源:引起跳转的原因
  • 链宿:要跳转的目标
热字超链接及其设置

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

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

编程要求

在右侧编辑器中的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关:创建热图超链接

相关知识

超链接的属性

超链接标签的属性除了href外,常用的还有:

  • title:设置鼠标悬停在链源上时的提示文字
  • target:指定打开目标窗口的方式

target属性的取值及含义如下图所示:  target属性

图像超链接及其设置

图像超链接采用图像作为超链接的链源,该链源可使用img标签来嵌入图像,该标签常用的属性有:src、alt、border、title、width、height等。

用法示例;

<a href="http://www.baidu.com"   target="_blank" title="单击图像实现超链接">
<img src="https://www.educoder.net/api/attachments/1184937" />
</a> 

编程要求

在右侧编辑器中的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关:创建页内超链接

相关知识

页内链接

从当前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>
 <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>

自我总结

一般在开发页面的过程中同页面内的路由跳转不用页内超链接的形式,下边是方法

同html页面内点击跳转

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值