HTML 图像

通过使用 HTML，可以在文档中显示图像。图像可以改善网页的设计和外观。

HTML Images 语法

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

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

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

• src - 指定图像的路径
• alt - 指定图像的备用文本

src 属性

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

注释: 当网页加载时，这时浏览器从web服务器获取图像并将其插入到网页中。因此，请确保图像实际上与网页保持在同一位置，否则您的访问者将得到一个断开的链接图标。如果浏览器找不到图像，则会显示断开的链接图标和 alt 文本。

alt 属性

如果用户由于某种原因无法查看图像（由于连接速度慢、src属性出错或用户使用屏幕阅读器），则需要 alt 属性为图像提供备用文本。

alt 属性的值应该描述图像:

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

图像大小 - 宽度和高度

使用 style 属性指定图像的宽度和高度。

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

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

使用 Width 和 Height 或者 Style?

width, height, 和 style 属性在HTML中都有效。

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

其他文件夹中的图像

如果图像位于子文件夹中，则必须在 src 属性中包含文件夹名称:

外部图像

有些图像在其他服务器/网站上。

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

外部图像注释: 外部图像可能属于版权所有。如果你没有获得使用它的许可，你可能违反版权法。此外，您无法控制外部图像；它可以突然删除或更改。

动画图像

HTML 允许动画 GIF:

图像可作为链接

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

浮动图像

使用 CSS float 属性使图像浮动到文本的右侧或左侧:

图像格式

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

本章小结

• 使用 HTML <img> 元素定义图像
• 使用 HTML src 属性定义图像的URL
• 使用 HTML alt 属性为其定义备用文本
• 使用 HTML width 和 height 属性 或 CSS width 和 height 属性定义图像的大小
• 使用 CSS float 属性使图像向左或向右浮动

HTML 实验

HTML Image 标签