测试你的技能：HTML 图片

本技能测试的目的是评估你是否理解 图片以及如何将它们嵌入 HTML。

¥The aim of this skill test is to assess whether you understand images and how to embed them in HTML.

注意：你可以在此页面上的交互式编辑器或在线编辑器（例如 CodePen、JSFiddle 或 Glitch）中尝试解决方案。

¥Note: You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

如果你遇到困难，可以通过我们的 沟通渠道 之一与我们联系。

¥If you get stuck, you can reach out to us in one of our communication channels.

任务 1

¥Task 1

在此任务中，我们希望你将一些蓝莓的简单图片嵌入到页面中。你需要：

¥In this task, we want you to embed a simple image of some Blueberries into the page. You need to:

  • 将图片的路径添加到适当的属性中以将其嵌入页面中。该图片名为 blueberries.jpg，位于当前文件夹内名为 images 的文件夹中。
  • 向适当的属性添加一些替代文本来描述图片，供看不到图片的人使用。
  • 为 <img> 元素指定适当的 width 和 height，以便它以正确的宽高比显示，并在页面上留下足够的空间来显示它。图片的固有尺寸为 615 x 419 像素。

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

¥Try updating the live code below to recreate the finished example:

下载此任务的起点 在你自己的编辑器或在线编辑器中工作。

¥Download the starting point for this task to work in your own editor or in an online editor.

任务 2

¥Task 2

在此任务中，你已经有了一个功能齐全的图片，但我们希望你添加一个工具提示，当鼠标悬停在该图片上时会出现该工具提示。你应该在工具提示中添加一些适当的信息。

¥In this task, you already have a full-featured image, but we'd like you to add a tooltip that appears when the image is moused over. You should put some appropriate information into the tooltip.

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

¥Try updating the live code below to recreate the finished example:

下载此任务的起点 在你自己的编辑器或在线编辑器中工作。

¥Download the starting point for this task to work in your own editor or in an online editor.

任务 3

¥Task 3

在此任务中，你将获得全功能图片和一些标题文本。你在这里需要做的是添加将图片与标题关联起来的元素。

¥In this task, you are provided with both a full-featured image and some caption text. What you need to do here is add elements that will associate the image with the caption.

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

¥Try updating the live code below to recreate the finished example:

下载此任务的起点 在你自己的编辑器或在线编辑器中工作。

¥Download the starting point for this task to work in your own editor or in an online editor.