技能测试：HTML 图片 - 学习 Web 开发

任务 1

在此任务中，我们希望您将一张蓝莓图片嵌入页面。

完成任务

将图片的路径添加到适当的属性中，将其嵌入页面。图片名为 blueberries.jpg，其路径为 https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images/blueberries.jpg?raw=true。
向适当的属性添加一些替代文本，以便无法看到图片的用户能够理解图片内容。
为 <img> 元素设置适当的 width，以便它以正确的纵横比显示，并且页面上有足够的空间来显示它。该图片的固有尺寸为 615 x 419 像素。

html

<h1>Basic image embed</h1>

<img />

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

* {
  box-sizing: border-box;
}

img {
  border: 1px solid black;
}

点击此处显示解决方案

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

html

<h1>Basic image embed</h1>

<img src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images/blueberries.jpg?raw=true"
     alt="A pile of small blue berries"
     width="400" />

任务 2

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

html

<h1>Basic image title</h1>

<img
  src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/larch.jpg?raw=true"
  alt="Several tall evergreen trees called larches" />

点击此处显示解决方案

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

html

<h1>Basic image title</h1>

<img
  src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/larch.jpg?raw=true"
  alt="Several tall evergreen trees called larches"
  title="And now, Number 1, The Larch" />

任务 3

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

html

<h1>Image and caption</h1>

<img
  src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/firefox.png?raw=true"
  alt="An abstract flaming fox wrapping around a blue sphere"
  width="446"
  height="460" />
The 2019 Firefox logo

figcaption {
  font-style: italic;
}

点击此处显示解决方案

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

html

<h1>Image and caption</h1>

<figure>
  <img
    src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/firefox.png?raw=true"
    alt="An abstract flaming fox wrapping around a blue sphere"
    width="446"
    height="460" />
  <figcaption>The 2019 Firefox logo</figcaption>
</figure>

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年10月13日，作者是 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的错误