文章目录
- 一、 web编程训练-html5-超链接的应用
- 第一关 创建热字超链接
- 编程要求
- 代码展示
- 第二关 创建热图超链接
- 编码要求 :
- 代码展示
- 第三关
- 编码要求
- 代码展示
- 第4关:创建页内超链接
- 编码要求
- 代码展示
- 二、web知识训练-html5-超链接的应用
一、 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
)