嵌入图像

让我们将注意力集中在 元素上：

html

这段代码通过 src（源）属性将图片嵌入页面，该属性包含我们要嵌入的图片文件路径。

该元素还包括一个 alt（alternative，替代）属性。在 alt 属性中，是图像的描述内容，用于当图像不能被用户看见时显示，不可见的原因可能是：

用户有视觉障碍。有严重视觉障碍的用户可以使用屏幕阅读器来朗读 alt 属性的内容。

有些错误使图像无法显示。可以试着故意将 src 属性里的路径改错。保存并刷新页面就可以在图像位置看到：

编写的替代文本应为读者提供足够的信息，使其能够充分理解图像所传达的内容。在此示例中，当前文本“My test image”并不理想，因为它未能描述图像的具体信息。对于 Firefox 徽标而言，更佳的替代方案应为：“The Firefox logo: a flaming fox surrounding the Earth.”。

备注：诸如 之类的元素既无内容也无闭合标签，因此被称为空元素。有时会在单标签末尾添加尾随斜杠（），但此写法并非强制要求。

现在我们来让图像显示出来。

在 first-website 文件夹内创建名为 images 的新文件夹，并将前例中选定的图片放入该文件夹。

在 标签的 src 属性值中输入图片路径。该图片位于名为 images 的文件夹内，该文件夹与 index.html 文件位于同一目录下，因此路径应为 images/ 加上图片文件名。例如，若图片名为 firefox-icon.png，则 src 属性应为：src="images/firefox-icon.png"。

将 alt 属性的值——My test image——替换为更准确描述图片的文本。

在 web 浏览器中打开 index.html 文件。此时应能看到图片显示。若未显示，请对照示例代码检查 元素：确保语法正确（如引号位置），并确认图片文件名无误。

若图片过大导致无法完整显示，请不必担心。我们将在下篇文章中解决此问题。

备注：在我们的无障碍多媒体教程和替代文本决策树中，了解如何在不同场景下为图片添加 alt 属性。