HTML 图像

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

实例

<img src="shenzhen.jpg" alt="深圳的蓝调时刻">

亲自试一试

实例

<img src="girl.jpg" alt="戴帽子的女孩">

亲自试一试

实例

<img src="car.jpg" alt="梅赛德斯跑车">

亲自试一试

图像语法

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

从技术上讲，图像并不是插入到网页中的；图像是链接到网页的。<img> 标签为引用的图像创建了一个占位空间。

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

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

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

语法

<img src="url" alt="替代文本">

src 属性

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

注意：当网页加载时，是浏览器在那一刻从网络服务器获取图像并将其插入到页面中的。因此，请确保图像相对于网页的实际位置保持不变，否则访问者将看到一个损坏的链接图标。如果浏览器找不到图像，将显示损坏的链接图标和替代文本。

实例

<img src="car.jpg" alt="梅赛德斯跑车">

亲自试一试

alt 属性

必需的 alt 属性为图像提供替代文本，以便用户在因某些原因无法查看图像时使用（例如连接缓慢、src 属性错误或用户使用屏幕阅读器）。

alt 属性的值应描述图像：

实例

<img src="car.jpg" alt="梅赛德斯跑车">

亲自试一试

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

实例

<img src="wrongname.gif" alt="梅赛德斯跑车">

亲自试一试

提示：屏幕阅读器是一种软件程序，它可以读取 HTML 代码，并允许用户“听”到内容。屏幕阅读器对视障人士或学习障碍者非常有用。

图像尺寸 - 宽度和高度

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

实例

<img src="girl.jpg" alt="戴帽子的女孩" style="width:750px;height:500px;">

亲自试一试

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

实例

<img src="girl.jpg" alt="戴帽子的女孩" width="750" height="500">

亲自试一试

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

注意：请始终指定图像的宽度和高度。如果不指定宽度和高度，网页在图像加载时可能会闪烁。

使用 Width 和 Height 属性还是 Style 属性？

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

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

实例

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="flower.gif" alt="花朵" width="180" height="180">

<img src="flower.gif" alt="花朵" style="width:180px;height:180px;">

</body>
</html>

亲自试一试

其他文件夹中的图像

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

实例

<img src="/images/flower.gif" alt="花朵" style="width:180px;height:180px;">

亲自试一试

其他服务器/网站上的图像

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

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

实例

<img src="https://www.w3school.com.cn/images/w3logo.png" alt="W3School.com.cn">

亲自试一试

关于外部图像的注意事项：外部图像可能受版权保护。如果您未经许可使用，可能违反版权法。此外，您无法控制外部图像；它们可能突然被删除或更改。

动画图像

HTML 允许使用动画 GIF：

实例

<img src="cat.gif" alt="猫咪" style="width:150px;height:150px;">

亲自试一试

图像作为链接

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

实例

<a href="index.asp">
  <img src="html5.gif" alt="HTML 教程" style="width:128px;height:128px;">
</a>

亲自试一试

图像浮动

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

实例

<p>
<img src="smile.gif" alt="笑脸" style="float:right;width:128px;height:128px;">
图像将浮动到文本的右侧。
</p>

<p>
<img src="smile.gif" alt="笑脸" style="float:left;width:128px;height:128px;">
图像将浮动到文本的左侧。
</p>

亲自试一试

提示：要了解更多关于 CSS 浮动的知识，请阅读我们的 CSS 浮动教程。

常见的图像格式

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

缩写文件格式文件扩展名

APNG	动画便携式网络图形	.apng
GIF	图形交换格式	.gif
ICO	Microsoft 图标	.ico, .cur
JPEG	联合图像专家组图像	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	便携式网络图形	.png
SVG	可缩放矢量图形	.svg

本章总结

使用 HTML <img> 元素定义图像
使用 HTML src 属性定义图像的 URL
使用 HTML alt 属性为无法显示的图像定义替代文本
使用 HTML width 和 height 属性或 CSS width 和 height 属性定义图像的尺寸
使用 CSS float 属性让图像向左或向右浮动

注意：加载大图像需要时间，并且可能会减慢网页速度。请谨慎使用图像。

HTML 图像标签

标签	描述
<img>	定义图像。
<map>	定义图像映射。
<area>	定义图像映射内的可点击区域。
<picture>	为多个图像资源定义容器。

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。