HTML 图像

图像可以改善网页的设计和外观。

HTML 图像语法

HTML <img> 标签用于在网页中嵌入图像。

图像实际上并未插入到网页中；而是链接到网页。 <img> 标签创建了一个用于引用图像的占位符。

<img> 标签是空的，它只包含属性，并且没有结束标签。

<img> 标签有两个必需的属性：

• src - 指定图像的路径
• alt - 指定图像的替代文本

src 属性

必需的 src 属性指定图像的路径（URL）。

注意：当网页加载时，它是在那一刻由浏览器从 Web 服务器获取图像并将其插入到页面中的。因此，请确保图像与网页保持在同一位置，否则您的访问者将看到一个损坏的链接图标。如果浏览器找不到图像，则会显示损坏的链接图标和 alt 文本。

alt 属性

必需的 alt 属性为图像提供了一个替代文本，如果用户因任何原因无法查看图像（例如，由于连接缓慢、src 属性错误或用户使用屏幕阅读器）。

alt 属性的值应描述图像。

如果浏览器找不到图像，它将显示 alt 属性的值。

图像尺寸 - 宽度和高度

您可以使用 style 属性来指定图像的宽度和高度。

或者，您可以使用 width 和 height 属性：

width 和 height 属性始终以像素为单位定义图像的宽度和高度。

宽度和高度，还是 Style？

width、height 和 style 属性在 HTML 中都是有效的。

但是，我们建议使用 style 属性。它可以防止样式表更改图像的大小。

另一个文件夹中的图像

如果您的图像在子文件夹中，则必须在 src 属性中包含文件夹名称。

另一个服务器/网站上的图像

一些网站指向另一个服务器上的图像。

要指向另一个服务器上的图像，您必须在 src 属性中指定绝对（完整）URL。

关于外部图像的注意事项：外部图像可能受版权保护。如果您没有获得使用许可，您可能侵犯了版权法。此外，您无法控制外部图像；它们可能会突然被删除或更改。

动画图像

HTML 支持动画 GIF。

将图像用作链接

要将图像用作链接，请将 <img> 标签放在 <a> 标签内。

图像浮动

使用 CSS float 属性可以让图像向右或向左浮动于文本。

常用图像格式

以下是最常见的图像文件类型，所有浏览器（Chrome、Edge、Firefox、Safari、Opera）都支持这些类型：

Chapter Summary

• 使用 HTML <img> 元素定义图像。
• 使用 HTML src 属性定义图像的 URL。
• 使用 HTML alt 属性为图像定义备用文本，以防其无法显示。
• 使用 HTML width 和 height 属性或 CSS width 和 height 属性来定义图像的大小。
• 使用 CSS float 属性让图像向左或向右浮动。

HTML 图像标签

视频：HTML 图像