Web(二)html5基础-超链接的应用(知识训练和编程训练)

news2024/11/15 8:37:35

web知识训练_html5_超链接的应用

 web编程训练_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://data.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://data.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>

第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">
        查看第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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/32674.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

FPGA——多路选择器实现按键控制LED灯的亮灭

文章目录前言一、多路选择器二、绘制模块框图及波形图三、Verilog HDL代码及测试代码四、创建工程五、仿真六、上板验证1、分配引脚2、烧录七、效果演示八、总结前言 软件&#xff1a;Quartus Prime Standard 18.0仿真软件&#xff1a;modelsim 10.5代码编写软件&#xff1a;V…

【虹科新品】 HK-MR430330绝对式光纤编码器介绍合集(下)

HK-MR430系列ZapFREE光纤位置传感器是一款外形小巧、具有13位单圈分辨率的旋转位置传感器。MR430设计新颖&#xff0c;开发了新的应用和OEM产品功能&#xff0c;这在以前的电子传感器是无法实现的。该传感器100%无源&#xff0c;不受EMI、RFI、微波和磁场的影响。创新型全绝缘设…

我参加NVIDIA Sky Hackathon 后端修改

文件架构 前面两个分别是执行语音识别和图片识别的代码templates 存放的是网页的模板&#xff0c; 前端将文件写在这里即可uploads 存放的是上传至后台的文件server.ipynb 用于启动 flash 服务器app.py 内是用 flash 写的 Python 后端install_tools.sh 是用于安装相关工具的 sh…

(十四)Spring之回顾代理模式

文章目录回顾代理模式动态代理常用技术CGLIB动态代理技术上一篇&#xff1a;&#xff08;十三&#xff09;Spring之JdbcTemplate 回顾代理模式 参考&#xff1a;代理模式Proxy Pattern 不用JDK的动态代理&#xff0c;手写JDK动态代理 动态代理常用技术 在程序运行阶段&…

CentOS 7 手动安装OpenStack

官网文档 因为之前已经在 Ubuntu 20.04 下完成了 Ubuntu 20.04 手动安装OpenStack &#xff0c;最后&#xff0c;想要学习 OVN 的时候&#xff0c;发现 ubuntu 上的 OVN 安装很复杂&#xff0c;没有 TripleO/RDO based deployments &#xff0c;所以&#xff0c;又在 CentOS 7…

项目开源!基于PaddleDetection打造实时人体姿态检测的多关节控制皮影机器人

本文已在【飞桨PaddlePaddle】公众号平台发布&#xff0c;详情请戳链接&#xff1a;项目开源&#xff01;基于PaddleDetection打造实时人体姿态检测的多关节控制皮影机器人 皮影戏是一种以兽皮或纸板做成的人物剪影以表演故事的民间戏剧&#xff0c;皮影一般由头、躯干&#x…

2003-2019年各省市场分割指数全步骤数据+最终结果

2003-2019年市场分割指数 1、时间&#xff1a;2003-2019年 2、数据包含&#xff1a;31各省份市场分割指数全步骤数据和最终结果 3、具体内容&#xff1a;市场分割指数差分形式相对价格、市场分割指数去均值、市场分割指数方差、市场分割指数最终结果。 4、指标说明&#xf…

vue3 框架学习概念笔记

文章目录前情提要框架设计概览命令式声明式小结虚拟dom性能运行时和编译时框架设计核心要素声明式描述UI渲染器组件的本质vue.js模板响应式系统概念完善的响应式系统响应式系统的调度计算属性Computedwatch 原理竞态问题非原始值的响应式方案javaScript 对象原始值的响应式方案…

毕业后河北种水稻 国稻种芯·中国水稻节:安徽姑娘承德务农

毕业后河北种水稻 国稻种芯中国水稻节&#xff1a;安徽姑娘承德务农 (新华每日电讯记者刘金海、方欣、牟宇) 新闻中国采编网 中国新闻采编网 谋定研究中国智库网 中国农民丰收节国际贸易促进会 国稻种芯中国水稻节 中国三农智库网-功能性农业农业大健康大会报道&#xff1a;整…

【Linux】内存查看vmstat命令(虚拟内存统计)

vmstat命令&#xff1a;虚拟内存统计 CPU使用率内存试用虚拟内存交换情况IO读写情况 process r&#xff1a;运行和等待CPU时间片的进程数 超过cpu个数&#xff0c; 出现CPU瓶颈 长时间大于1&#xff0c;CPU不足&#xff0c;需要增加CPU b&#xff1a;正在等待资源的进程数&…

玩转MySQL:定位排查解决突发Bug

引言 前面MySQL优化、调化两文中&#xff0c;聊到了关于数据库性能优化的话题&#xff0c;而本文则再来聊一聊关于MySQL线上排查方面的话题。线上排查、性能优化等内容是面试过程中的“常客”&#xff0c;而对于线上遇到的“疑难杂症”&#xff0c;需要通过理性的思维去分析问…

Java岗位必备技能SpringBoot的面试题集锦

当下SpringBoot框架真的很火&#xff0c;大多数企业把它作为基础技能&#xff0c;考察求职者的能力。如下截图&#xff0c;是我从Boss直聘中找到的&#xff0c;要求SpringBoot是必备技能。 所以非常有必要为了面试&#xff0c;好好归纳下SpringBoot常被提起来的问题。 题目大纲…

Tesseract .Net SDK C# OCR 2022.1

Tesseract .Net SDK C# OCR 库 #将扫描的 PDF 转换为可搜索的文档 #快速准确的基于神经网络的引擎 #纠正低质量扫描 # 120 多种语言 # .Net 2.0, .Net 5, 标准, 核心 Tesseract OCR - industry-fastest .Net OCR library 4 行代码&#xff0c;仅此而已 var api OcrApi.Creat…

[附源码]java毕业设计疫情环境下的酒店管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

不知道什么的复习题

P4408 [NOI2003] 逃学的小孩&#xff0c;一眼就看出要化简题面&#xff1a;不就是找三个点使得ABBC最大嘛&#xff0c;不妨想起直径的性质&#xff0c;最长&#xff0c;而且其他点到它的距离最长。那么直接拿直径来做就行。推导出结论为ansmax(min(dis[A][k],dis[B][k])dis[A][…

CSS3------CSS选择器

界面中的“超文本“本质上就是通过一个一个矩形盒子包起来&#xff0c;然后进行排版组合&#xff0c;那么接下来要详细研究这个标签盒子的细节结构&#xff0c;以帮助学习如何使用它&#xff0c;但是在开始研究它之前&#xff0c;我们先来了解一个概念&#xff0c;选择器的概念…

BN、CBN、CmBN 的对比与总结

BN、CBN、CmBN 的对比与总结 最近看到了关于 Yolo 系列 trick 的总结文章 【Make YOLO Great Again】YOLOv1-v7全系列大解析&#xff08;Tricks篇&#xff09;&#xff0c;其中提到了 YoloV4 中使用了 CmBN&#xff0c;这是对 CBN 的改进&#xff0c;可以较好的适应小 batch 的…

电容笔值不值得买?电容笔十大品牌排行

要想给我们的ipad配置一款电容笔&#xff0c;如果感觉苹果原装的电容笔价格远远超过预算。这时候平替电容笔是个非常值得入手的选择。试想一下购买一款苹果原装的电容笔的资金都够买整整四款平替电容笔了&#xff0c;平替电容笔价格便宜且功能跟苹果的电容笔相差无几。下面我来…

【设计模式】 - 结构型模式 - 迭代器模式

目录标题前言迭代器模式概述结构实现优缺点JDK源码解析前言 行为型模式用于描述程序在运行时复杂的流程控制&#xff0c;即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务&#xff0c;它涉及算法与对象间职责的分配。 行为型模式分为类行为模式和对象…

ai绘画有哪些软件,盘点三款免费且超级好用的AI绘画工具

Ai绘画有哪些软件&#xff1f;不但可以免费使用&#xff0c;而且生成的画作精美&#xff0c;而且生成的图片速度还要很快&#xff1f; 不用急&#xff0c;今天小编给大家推荐的这三款ai绘画工具完全满足了上述条件&#xff01; 第一款&#xff0c;重磅级产品&#xff0c;数画…