如何使用HTML将图像添加到您的网页

在本教程中，我们将学习如何使用 HTML 在网站上添加图像。 我们还将学习如何向图像添加替代文本，以提高使用屏幕阅读器的网站访问者的可访问性。

使用 HTML 添加图像

使用 <img> 元素将图像添加到 HTML 文档中。 <img> 元素需要属性 src，它允许您设置存储图像的文件的位置。 一个图像元素是这样写的：

<img src="Image_Location">

请注意，<img> 元素确实 not 使用结束 </img> 标记。 要尝试使用 <img> 元素，请下载 我们的 Sammy the Shark 图像并将其放在您的项目目录 html-practice.

注意：要下载Sammy the Shark的图像，请访问链接和CTRL + Left Click（Mac）或Right Click（Windows）图像并选择“将图像另存为”并将其保存为 small-profile.jpeg 到您的项目目录。

接下来，删除 index.html 文件的内容并将 <img src="Image_Location"> 粘贴到文件中。 （如果您还没有学习教程系列，您可以在我们的教程 设置 HTML 项目 中查看设置 index.html 文件的说明。

然后，复制图像的文件路径并将Image_Location替换为您保存的图像的位置。 如果您使用的是 Visual Studio Code 文本编辑器，您可以在图像文件 small-profile.jpeg 上使用 CTRL + Left Click（在 Mac 上）或 Right Click（在 Windows 上）复制文件路径在左侧面板中并选择“复制路径”。 有关该过程的说明，请参见下面的 gif：

注意：一定要复制镜像的相对或项目文件路径，而不是镜像的绝对或完整文件路径. 相对路径指的是相对于当前工作目录的文件位置（与 absolute 路径相反，后者指的是相对于根目录的文件位置。）虽然这两个路径都可以在这种情况下工作，如果我们决定在线发布我们的网站，则只有 relative 路径有效。 由于我们的最终目标是创建一个可发布的网站，我们现在将在向文档添加 <img> 元素时开始使用相对路径。

保存您的 index.html 文件并在浏览器中重新加载它。 您应该会收到如下信息：

从技术上讲，您还可以使用指向在线托管图像的链接作为文件路径。 要了解这是如何工作的，请尝试将图像位置替换为我们的鲨鱼 Sammy 图像的链接，如下所示：

<img src="https://html.sammy-codes.com/images/small-profile.jpeg">

保存文件并在浏览器中重新加载。 该图像仍应加载到您的 Web 文档中，但这次图像是从其在线位置而不是您的本地项目目录中获取的。 您可以尝试添加其他在线图像，方法是将它们的位置链接用作 <img> 标记中的 src 属性。

但是，在构建网站时，通常最好将图像托管在项目目录中，以确保网站的可持续性。 如果图像被其主机删除或地址更改，它将不再呈现在您的网站上。

可访问性的替代文本

添加图像时，您应该始终使用 alt 属性包含描述其内容的替代文本。 此文本通常不会显示在网页上，但屏幕阅读器会使用此文本将内容传达给视障网站访问者。

<img src="https://html.sammy-codes.com/images/small-profile.jpeg" alt="Digital Ocean’s mascot, a blue smiling shark." >

添加替代文本时，请牢记以下最佳做法：

• 对于 信息丰富的 图像，替代文本应清晰简洁地描述图像的主题，而不是参考图像本身。 例如，不要写“Sammy the Shark，DigitalOcean 的吉祥物”，而是“Sammy the Shark，DigitalOcean 的吉祥物”。
• 对于 装饰性 图像，仍应使用 alt 属性，但应使用空值，因为这会改善屏幕阅读器体验：<img src="images/decorative_image.jpeg" alt="">。
• 有关确定图像是信息性还是装饰性的有用指南，请访问 https://www.w3.org/WAI/tutorials/images/decision-tree/

您现在应该熟悉如何将图像添加到您的 HTML 文档以及如何添加替代文本以帮助实现可访问性。 我们将在本系列后面的教程 如何将个人资料图像添加到您的网页 中学习如何更改图像大小和样式。 在下一个教程中，我们将学习如何向 HTML 文档添加链接。