HTML 格式的图像

一开始，网络只是文本，它真的非常无聊。幸运的是，不久之后，在网页中嵌入图像（以及其他更有趣的内容类型）的功能就被添加了。还有其他类型的多媒体需要考虑，但从不起眼​的<img>​​元素开始是合乎逻辑的，该元素用于在网页中嵌入简单的图像。在本文中，我们将介绍如何深入使用它，包括基础知识，使用​​​<图>​​​​用标题注释它，并详细说明它与​​CSS​​背景图像的关系。

我们如何将图像放在网页上？

为了在网页上放置一个简单的图像，我们使用​​​<img>​​​元素。这是一个空元素（意味着它没有文本内容或结束标记），至少需要一个属性才能有用 - （有时作为其完整标题，来源）。该属性包含指向要嵌入到页面中的图像的路径，该路径可以是相对 URL 或绝对 URL，其方式与 ​​​<a>​​​ 元素中的属性值相同。​​src​​​​src​​​​href​​

注意：在继续之前，您应该阅读有关URL和路径的快速入门，以刷新相对和绝对URL上的记忆。

例如，如果你的图像被调用，并且它与你的HTML页面位于同一目录中，你可以像这样嵌入图像：​​dinosaur.jpg​​

<img src="dinosaur.jpg">

复制到剪贴板

如果图像位于子目录中，该子目录与 HTML 页面位于同一目录中，则您可以按如下方式嵌入它：​​images​​

<img src="images/dinosaur.jpg">

复制到剪贴板

等等。

注意：搜索引擎还会读取图像文件名并将其计入SEO。因此，您应该为图像提供一个描述性的文件名; 比 .​​dinosaur.jpg​​​​img835.png​​

您可以使用其绝对 URL 嵌入图像，例如：

<img src="https://www.example.com/images/dinosaur.jpg">

复制到剪贴板

但这是毫无意义的，因为它只会使浏览器做更多的工作，从DNS服务器再次查找IP地址，等等。您几乎总是将网站的图像保存在与HTML相同的服务器上。

警告：大多数图像受版权保护。不要在网页上显示图像，除非：

• 您拥有该映像。
• 您已收到图像所有者的明确书面许可。
• 你有充分的证据证明该图像实际上属于公有领域。

侵犯版权是非法和不道德的。此外，切勿将您的属性指向您无权链接到的其他人网站上托管的图像。这称为“热链接”。同样，窃取某人的带宽是非法的。它还会减慢您的页面速度，使您无法控制图像是被删除还是替换为令人尴尬的内容。​​src​​

我们上面的代码会给我们以下结果：

注意：​​​<img>​​​和​<video>​等元素有时称为替换元素。这是因为元素的内容和大小由外部资源（如图像或视频文件）定义，而不是由元素本身的内容定义。您可以在替换的元素中阅读有关它们的更多信息。

​

替代文本

我们将要查看的下一个属性是 。它的值应该是图像的文本描述，用于由于互联网连接缓慢而无法看到/显示图像或需要很长时间才能呈现的情况。例如，我们上面的代码可以像这样修改：​​alt​​

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

复制到剪贴板

测试文本的最简单方法是故意拼错文件名。例如，如果我们的图像名称拼写为 ，浏览器将不会显示图像，而是显示替代文本：​​alt​​​​dinosooooor.jpg​​

那么，为什么您会看到或需要替代文本呢？由于多种原因，它可以派上用场：

• 用户有视觉障碍，并且正在使用屏幕阅读器向他们朗读 Web。实际上，使用替代文本来描述图像对大多数用户都很有用。
• 如上所述，文件或路径名的拼写可能不正确。
• 浏览器不支持图像类型。有些人仍然使用纯文本浏览器，例如​​Lynx​​，它显示图像的替代文本。
• 您可能希望提供文本供搜索引擎使用;例如，搜索引擎可以将替代文本与搜索查询进行匹配。
• 用户已关闭图像以减少数据传输量和干扰。这在移动电话上以及带宽有限或昂贵的国家尤其常见。

你到底应该在你的属性中写些什么？这取决于为什么图像首先在那里。换句话说，如果你的图片没有显示，你会失去什么：​​alt​​

• 装饰。您应该将CSS 背景图像用于装饰性图像，但如果必须使用 HTML，请添加一个空白 。如果图像不是内容的一部分，屏幕阅读器不应浪费时间阅读它。​​alt=""​​
• 内容。如果你的图片提供了重要的信息，请在简短的文本中提供相同的信息，或者更好的是，在每个人都能看到的正文中。不要写多余的文本。对于视力正常的用户来说，如果所有段落都在主要内容中写了两次，那会有多烦人？如果主文本正文充分描述了图像，则可以只使用 。​​alt​​​​alt​​​​alt=""​​
• 链接。如果将图像放在​​​<a>​​​ 标记内，若要将图像转换为链接，仍必须提供​​辅助链接文本​​。在这种情况下，您可以将其写在同一元素中，也可以写在图像的属性中 - 以最适合您的情况为准。​​<a>​​​​alt​​
• 发短信。您不应将文本放入图像中。例如，如果您的主标题需要投影，​​请使用CSS​​，而不是将文本放入图像中。但是，如果您确实无法避免这样做，则应在属性中提供文本。​​alt​​

从本质上讲，关键是要提供可用的体验，即使看不到图像也是如此。这可确保所有用户都不会丢失任何内容。尝试关闭浏览器中的图像，看看内容的外观。您很快就会意识到，如果看不到图像，替代文本是多么有用。

注意：有关更多信息，请参阅我们的​​替代文本​​指南。

宽度和高度

您可以使用 和 属性来指定图像的宽度和高度。您可以通过多种方式查找图片的宽度和高度。例如，在Mac上，您可以使用+来显示图像文件的信息。回到我们的例子，我们可以这样做：​​width​​​​height​​CmdI

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341">

复制到剪贴板

在正常情况下，这不会对显示器产生太大差异。但是，如果未显示图像，例如，用户刚刚导航到该页面，并且图像尚未加载，您会注意到浏览器正在为图像的显示留出空间：

这是一件好事，可以使页面加载更快，更流畅。

但是，您不应使用 HTML 属性更改图像的大小。如果将图像大小设置得太大，则最终将得到看起来颗粒状，模糊或太小的图像，并且浪费带宽下载不符合用户需求的图像。如果您不保持正确的​​宽高比​​，图像也可能最终看起来失真。在将图像放在网页上之前，您应该使用图像编辑器将图像放在正确的大小。

注意：如果您确实需要更改图像的大小，则应改用​​CSS​​。

图片标题

​​​​​您还可以向图像添加属性，以便在需要时提供进一步的支持信息。在我们的示例中，我们可以这样做：​​title​​

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

复制到剪贴板

这为我们提供了鼠标悬停时的工具提示，就像链接标题一样：

但是，不建议这样做 - 有许多可访问性问题，主要是基于屏幕阅读器支持非常不可预测的事实，大多数浏览器不会显示它，除非您悬停鼠标（例如，无法访问键盘用户）。如果您对此的更多信息感兴趣，请阅读Scott O'Hara​​的The Trials and Tribulations of the Title Attribute​​。​​title​​

最好在正文中包含此类支持信息，而不是附加到图像上。

主动学习：嵌入图像

现在轮到你玩了！这个主动学习部分将通过简单的嵌入练习让您启动并运行。您将获得一个基本的​​​<img>​​​标签;我们希望您嵌入位于以下 URL 中的图像：

​​https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg​​

早些时候，我们说过永远不要热链接到其他服务器上的图像，但这只是为了学习目的，所以我们会让你离开这一次。

我们还希望您：

• 添加一些替代文本，并通过拼错图像 URL 来检查它是否有效。
• 设置图像的正确和（提示：它是200px宽和171px高），然后尝试其他值以查看效果是什么。​​width​​​​height​​
• 在映像上设置 a。​​title​​

如果您犯了错误，可以随时使用“重置”按钮进行重置。如果您真的遇到困难，请按“显示解决方案”按钮以查看答案：

使用图形和图形标题注释图像

说到标题，您可以通过多种方式添加标题以配合图像。例如，没有什么可以阻止您这样做：

<div class="figure">
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

复制到剪贴板

这没关系。它包含您需要的内容，并且可以使用CSS很好地进行样式化。但这里有一个问题：没有任何内容在语义上将图像链接到其标题，这可能会给屏幕阅读器带来问题。例如，当您有 50 张图片和标题时，哪个标题与哪个图像一起显示？

更好的解决方案是使用HTML5​​​<>​​​和​​​<>​​​元素。创建它们正是出于这个目的：为图形提供语义容器，并清楚地将图形链接到标题。我们上面的例子可以这样重写：

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

复制到剪贴板

​​​<字大写>​​​元素告诉浏览器和辅助技术，标题描述了​​​<>​​​元素的其他内容。

注意：从辅助功能的角度来看，字幕和​​​替代​​​文本具有不同的作用。字幕甚至使能够看到图像的用户受益，而​​​替代​​​文本提供的功能与缺少的图像相同。因此，标题和文本不应该只是说同样的事情，因为它们在图像消失时都会出现。尝试在浏览器中关闭图像，看看它的外观。​​alt​​

图形不必是图像。它是一个独立的内容单元，它：

• 以紧凑，易于掌握的方式表达您的意义。
• 可以在页面的线性流中的多个位置。
• 提供支持正文的基本信息。

一个图形可以是多个图像、代码片段、音频、视频、方程式、表格或其他东西。

主动学习：创建图形

在此主动学习部分中，我们希望您从上一个主动学习部分中获取完成的代码，并将其转换为图形：

1. 将其包装在​​​<人像>​​​元素中。
2. 将文本从属性中复制出来，删除属性，然后将文本放在图像下方​​​的<>​​​元素中。​​title​​​​title​​

如果您犯了错误，可以随时使用“重置”按钮进行重置。如果您真的遇到困难，请按“显示解决方案”按钮以查看答案：

CSS 背景图像

你也可以使用CSS将图像嵌入到网页中（和JavaScript，但这完全是另一回事）。CSS ​​​背景图像​​​属性和其他属性用于控制背景图像放置。例如，要在页面上的每个段落上放置背景图像，可以执行以下操作：​​background-*​​

p {
  background-image: url("images/dinosaur.jpg");
}

复制到剪贴板

生成的嵌入图像可以说比HTML图像更容易定位和控制。那么为什么要为HTML图像而烦恼呢？如上所述，CSS 背景图像仅用于装饰。如果您只想在页面中添加一些漂亮的内容以增强视觉效果，这很好。但是，这样的图像根本没有语义意义。它们不能有任何文本等效项，对屏幕阅读器不可见，等等。这就是HTML图像闪耀的地方！

总结：如果图像有意义，就您的内容而言，您应该使用HTML图像。如果图像纯粹是装饰，则应使用 CSS 背景图像。

注意：您将在我们的 CSS 主题中了解有关 ​​CSS 背景图像​​的更多信息。

测试你的技能！

您已经到达了本文的结尾，但是您能记住最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证您是否保留了此信息 — 请参阅​​测试您的技能：HTML 图像​​。

总结

这就是现在的一切。我们已经详细介绍了图像和标题。在下一篇文章中，我们将逐步提升它，了解如何使用HTML在网页中嵌入​​视频和音频内容​​。