当前位置:   article > 正文

Web(二)html5基础-超链接的应用(知识训练和编程训练)_在右侧编辑器中的begin - end区域内补充代码,创建热字超链接,具体要求是: 1.链源

在右侧编辑器中的begin - end区域内补充代码,创建热字超链接,具体要求是: 1.链源

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

 web编程训练_html5_超链接的应用

第1关_创建热字超链接

编程要求

在右侧编辑器中的Begin - End区域内补充代码,创建热字超链接,具体要求是: 1.链源文字为“听音乐找酷我”。 2.链宿地址为“https://www.kuwo.cn/”。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>创建超链接</title>
  6. </head>
  7. <body>
  8. <!-- ********* Begin ******* -->
  9. <h2>
  10. <a href="https://www.kuwo.cn/">听音乐找酷我</a>
  11. </h2>
  12. <!-- ********* End ********* -->
  13. </body>
  14. </html>

第2关_创建热图超链接

编程要求

在右侧编辑器中的Begin - End区域内补充代码,创建图像超链接,具体要求是: 1.链源图像的路径为“https://data.educoder.net/api/attachments/2357951”。 2.为链源图像设置图文对齐属性,属性取值为bottom 3.图像超链接的链宿地址为“https://www.kuwo.cn/”。 4.当鼠标悬停在链源图像上时显示提示文字“单击进入”。 5.设置超链接目标窗口的打开方式为“在新窗口中打开被链接的文档”。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>创建超链接</title>
  6. </head>
  7. <body>
  8. <h2><a href="https://www.kuwo.cn/">听音乐找酷我</a></h2>
  9. <!-- ********* Begin ******* -->
  10. <a href="https://www.kuwo.cn/" target="_blank" title="单击进入">
  11. <img src="https://www.educoder.net/api/attachments/2357951" align="bottom">
  12. </a>
  13. <!-- ********* End ********* -->
  14. 好音质用酷我
  15. </body>
  16. </html>

第3关_下载歌曲超链接 

编程要求

在右侧编辑器中的Begin - End区域内补充代码,创建音频超链接,具体要求是: 1.链源热字为“安妮的仙境” 2.链宿音频的路径为“https://data.educoder.net/api/attachments/2364090”。 3.为链源热字设置鼠标悬停的提示文字为“下载班得瑞钢琴曲-安妮的仙境”。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>创建超链接</title>
  6. </head>
  7. <body>
  8. <h2>
  9. <a href="http://www.kuwo.cn/">听音乐找酷我</a>
  10. </h2>
  11. <a href="http://www.kuwo.cn/">
  12. <img src=https://www.educoder.net/api/attachments/2357951 align=bottom />
  13. </a>
  14. 好音质用酷我<br/>
  15. <!-- ********* Begin ******* -->
  16. 推荐下载:
  17. <a href="https://www.educoder.net/api/attachments/2364090" title="下载班得瑞钢琴曲-安妮的仙境">
  18. 安妮的仙境
  19. </a>
  20. <!-- ********* End ********* -->
  21. <p><h2>在线播放:</h2><audio src="https://www.educoder.net/api/attachments/2364090" controls="controls"></audio>
  22. </p>
  23. </body>
  24. </html>

第4关_创建页内超链接

编程要求

请在右侧编辑器中的Begin - End区域内补充代码,具体要求是: 1.在Begin2 - End2区域处设置锚点,锚点名称为“Q",链源文字为“这是第7个音频”。 2.在Begin1 - End1区域设置指向锚点“Q”的超链接,链源文字为“查看第7个音频”。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>创建超链接</title>
  6. </head>
  7. <body>
  8. <h2><a href="http://www.kuwo.cn/">听音乐找酷我</a></h2>
  9. <a href="http://www.kuwo.cn/"><img src=https://www.educoder.net/api/attachments/2357951 align=bottom /></a>
  10. 好音质用酷我<br/>
  11. <!-- ********* Begin1 ******* -->
  12. <h2>
  13. <a href="#Q">
  14. 查看第7个音频
  15. </a>
  16. </h2>
  17. <!-- ********* End1 ********* -->
  18. 推荐下载:
  19. <a href="https://www.educoder.net/api/attachments/2364090" title="下载班得瑞钢琴曲-安妮的仙境">安妮的仙境</a>
  20. <p><h2>在线播放:</h2><audio src="https://www.educoder.net/api/attachments/2364090" controls="controls"></audio>
  21. </p>
  22. <h2>这是第1个音频</h2>
  23. <h2>这是第2个音频</h2>
  24. <h2>这是第3个音频</h2>
  25. <h2>这是第4个音频</h2>
  26. <h2>这是第5个音频</h2>
  27. <h2>这是第6个音频</h2>
  28. <h2>
  29. <!-- ********* Begin2 ******* -->
  30. <a name="Q">
  31. 这是第7个音频
  32. </a>
  33. <!-- ********* End2 ********* -->
  34. </h2>
  35. <h2>这是第8个音频</h2>
  36. </body>
  37. </html>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/110395
推荐阅读
相关标签
  

闽ICP备14008679号