在本教程中,我们将学习如何使用 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 文档添加链接。