技能测试：链接

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

注意： 如需帮助，请阅读我们的“技能测试”使用指南。您也可以通过我们的沟通渠道与我们联系。

注意： 这些任务的起始代码中有一些链接设置了 target="_blank" 属性，因此当您点击它们时，它们会尝试在新标签页中打开链接页面，而不是当前标签页。这并非严格的最佳实践，但我们在这里这样做是为了防止页面在 MDN Playground 输出的 <iframe> 中打开，从而丢失您的示例代码！

任务 1

在此任务中，我们希望您帮助填写我们关于鲸鱼信息页面的链接。

要完成任务，请按如下方式更新链接：

第一个链接应链接到名为 whales.html 的页面，该页面与当前页面位于同一目录中。
当鼠标悬停在链接上时，为其提供一个工具提示，告知用户该页面包含蓝鲸和抹香鲸的信息。
第二个链接应转换为一个可点击的链接，该链接会打开一个电子邮件，收件人设置为“whales@example.com”，并使用用户默认的邮件应用程序。
如果还能将邮件的主题行自动设置为“关于鲸鱼的疑问”，则有额外加分。

html

<h1>Information on Whales</h1>

<p>
  For more information on our conservation activities and which Whales we study,
  see our <a target="_blank">Whales page</a>.
</p>

<p>
  If you want to ask our team more questions, feel free to
  <a target="_blank">email us</a>.
</p>

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
  color: purple;
}

p {
  color: gray;
  margin: 0.5em 0;
}

* {
  box-sizing: border-box;
}

点击此处显示解决方案

您完成的 HTML 应该看起来像这样

html

<h1>Information on Whales</h1>

<p>
  For more information on our conservation activities and which Whales we study,
  see our <a target="_blank" href="whales.html" title="Includes information on Blue Whales and Sperm Whales">
  Whales page</a>.
</p>

<p>
  If you want to ask our team more questions, feel free to
  <a target="_blank" href="mailto:whales@example.com?subject=Question%20about%20Whales">
  email us</a>.
</p>

任务 2

在此任务中，我们希望您填写四个链接，使其指向相应的位置。

要完成任务，请按如下方式更新链接：

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

html

<h1>List path tests</h1>

<ul>
  <li><a target="_blank">Link me to the blue whale image</a></li>
  <li><a target="_blank">Link me to the narwhal image</a></li>
  <li><a target="_blank">Link me to Google image search</a></li>
  <li><a>Link me to the paragraph at the bottom of the page</a></li>
</ul>

<div></div>

<p id="bottom">The bottom of the page!</p>

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
  color: purple;
}

li {
  color: gray;
  margin: 0.5em 0;
}

div {
  height: 600px;
}

点击此处显示解决方案

您完成的 HTML 应该看起来像这样

html

<h1>List path tests</h1>

<ul>
  <li><a target="_blank" href="blue/blue-whale.jpg">
    Link me to the blue whale image
  </a></li>
  <li><a target="_blank" href="../narwhal/narwhal.jpg">
    Link me to the narwhal image
  </a></li>
  <li><a target="_blank" href="https://www.google.co.uk/imghp">
    Link me to Google image search
  </a></li>
  <li><a href="#bottom">
    Link me to the paragraph at the bottom of the page
  </a></li>
</ul>

<div></div>

<p id="bottom">The bottom of the page!</p>

任务 3

以下链接指向有关独角鲸的信息页面、一个支持电子邮件地址和一个大小为 4MB 的 PDF 事实文件。

完成任务

请修改现有段落中写得不好的链接文本，使其具有良好的链接文本。
为任何需要添加警告的链接添加警告。

html

<p>
  We do lots of work with Narwhals. To find out more about this work,
  <a href="narwhals.html" target="_blank">click here</a>.
</p>

<p>
  You can email our support team if you have any more questions —
  <a href="mailto:whales@example.com">click here</a> to do so.
</p>

<p>
  You can also <a href="factfile.pdf" target="_blank">click here</a> to download
  our factfile, which contains lots more information, including an FAQ.
</p>

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

p {
  color: gray;
  margin: 0.5em 0;
}

* {
  box-sizing: border-box;
}

点击此处显示解决方案

您完成的 HTML 应该看起来像这样

html

<p>
  We do lots of work with Narwhals. <a href="narwhals.html" target="_blank">Find out more about this work</a>.
</p>

<p>
  You can <a href="mailto:whales@example.com">email our support team</a> if you have any more questions.
</p>

<p>
  You can also <a href="factfile.pdf" target="_blank">download
  our factfile</a> (PDF, 4MB), which contains lots more information, including an FAQ.
</p>

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年10月13日⁩，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题