在 HTML 中，插入图片是通过 标签实现的。 标签是一个空标签，意味着它不需要闭合标签。以下是插入图片的基本语法和常用属性的详细讲解。

一、基本语法

src：指定图片的路径，可以是相对路径或绝对路径。alt：为图片提供替代文本，用于无障碍访问和 SEO。

二、常用属性

1. src

src 属性用于指定图片的路径。路径可以是相对路径（相对于当前页面的路径）或绝对路径（完整的 URL）。

2. alt

alt 属性为图片提供替代文本，用于无障碍访问和 SEO。如果图片无法加载，浏览器会显示 alt 属性中的文本。

3. width 和 height

width 和 height 属性用于指定图片的宽度和高度。这些属性可以以像素为单位设置。

4. title

title 属性为图片添加额外的信息，通常作为工具提示显示。

5. style

style 属性用于为图片定义内联样式。

6. class 和 id

class 和 id 属性用于为图片添加类名和唯一标识符，通常与 CSS 一起使用。

三、示例

以下是一个完整的 HTML 示例，展示了如何插入图片并使用常用属性：

HTML 插入图片示例

四、图片懒加载

为了优化网页性能，可以使用 loading="lazy" 属性来实现图片懒加载。懒加载会在用户滚动到图片位置时才加载图片。

五、响应式图片

为了确保图片在不同设备上都能良好显示，可以使用 srcset 和 sizes 属性来实现响应式图片。

sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1024px"

src="images/example.jpg" alt="示例图片">

srcset：指定不同分辨率的图片路径。sizes：指定不同屏幕宽度下的图片尺寸。

六、总结

在 HTML 中插入图片非常简单，通过 标签和其属性可以实现各种功能。以下是常用的属性及其作用：

属性名描述示例src指定图片的路径alt为图片提供替代文本width指定图片的宽度height指定图片的高度title为图片添加额外的信息style为图片定义内联样式class为图片添加类名id为图片添加唯一标识符loading实现图片懒加载srcset指定不同分辨率的图片路径sizes指定不同屏幕宽度下的图片尺寸通过合理使用这些属性，可以创建出更加丰富、动态和用户友好的网页。