测试您的技能:链接

本技能测试的目的是评估您是否理解如何在 HTML 中实现超链接。 在 HTML 中实现超链接。

注意: 您可以在本页面上的交互式编辑器中或在线编辑器(例如 CodePenJSFiddleGlitch)中尝试解决方案。

如果您遇到困难,可以通过我们的 沟通渠道 联系我们。

任务 1

在这个任务中,我们希望您帮助填写我们鲸鱼信息页面的链接。

  • 第一个链接应链接到名为 whales.html 的页面,该页面与当前页面位于同一目录中。
  • 我们还希望您在鼠标悬停时为其提供工具提示,告诉用户该页面包含有关蓝鲸和抹香鲸的信息。
  • 第二个链接应该变成一个可点击的链接,以在用户的默认邮件应用程序中打开一封电子邮件,收件人设置为 "[email protected]"。
  • 如果您还将其设置为自动将电子邮件主题行填充为“关于鲸鱼的问题”,您将获得一个加分项。

注意: 示例中的两个链接都设置了 target="_blank" 属性。这并非严格意义上的最佳做法,但我们在这里这样做是为了防止链接在嵌入的 <iframe> 中打开,从而避免您的示例代码丢失!

尝试更新下面的实时代码以重新创建完成的示例。

下载此任务的起点 以在您自己的编辑器或在线编辑器中进行操作。

任务 2

在这个任务中,我们希望您填写四个链接,使它们链接到相应的位置。

  • 第一个链接应链接到名为 blue-whale.jpg 的图像,该图像位于当前目录内的名为 blue 的目录中。
  • 第二个链接应链接到名为 narwhal.jpg 的图像,该图像位于名为 narwhal 的目录中,该目录位于当前目录的上一级目录中。
  • 第三个链接应链接到英国 Google 图片搜索。基本 URL 为 https://www.google.co.uk,图片搜索位于名为 imghp 的子目录中。
  • 第四个链接应链接到当前页面最底部的段落。它有一个 ID 为 bottom

注意: 示例中的前三个链接都设置了 target="_blank" 属性,以便当您单击它们时,它们会在新标签页中打开链接的页面。这并非严格意义上的最佳做法,但我们在这里这样做是为了防止页面在嵌入的 <iframe> 中打开,从而避免您的示例代码丢失!

尝试更新下面的实时代码以重新创建完成的示例。

下载此任务的起点 以在您自己的编辑器或在线编辑器中进行操作。

任务 3

以下链接链接到关于独角鲸的信息页面、支持电子邮件地址以及大小为 4MB 的 PDF 信息文件。在这个任务中,我们希望您

  • 使用现有段落中写得不佳的链接文本,并将其重写,使其具有良好的链接文本。
  • 向任何需要添加警告的链接添加警告。

注意: 示例中的第一个和第三个链接都设置了 target="_blank" 属性,以便当您单击它们时,它们会在新标签页中打开链接的页面。这并非严格意义上的最佳做法,但我们在这里这样做是为了防止页面在嵌入的 <iframe> 中打开,从而避免您的示例代码丢失!

尝试更新下面的实时代码以重新创建完成的示例。

下载此任务的起点 以在您自己的编辑器或在线编辑器中进行操作。