在 HTML 中，插入图片是通过 <img> 标签实现的。<img> 标签是一个空标签，意味着它不需要闭合标签。以下是插入图片的基本语法和常用属性的详细讲解。
一、基本语法
<img src="图片路径" alt="替代文本">
src：指定图片的路径，可以是相对路径或绝对路径。alt：为图片提供替代文本，用于无障碍访问和 SEO。
二、常用属性
1. src
src 属性用于指定图片的路径。路径可以是相对路径（相对于当前页面的路径）或绝对路径（完整的 URL）。
<img src="images/example.jpg" alt="示例图片"> <!-- 相对路径 -->
<img src="https://www.example.com/images/example.jpg" alt="示例图片"> <!-- 绝对路径 -->
2. alt
alt 属性为图片提供替代文本，用于无障碍访问和 SEO。如果图片无法加载，浏览器会显示 alt 属性中的文本。
<img src="images/example.jpg" alt="示例图片">
3. width 和 height
width 和 height 属性用于指定图片的宽度和高度。这些属性可以以像素为单位设置。
<img src="images/example.jpg" alt="示例图片" width="200" height="100">
4. title
title 属性为图片添加额外的信息，通常作为工具提示显示。
<img src="images/example.jpg" alt="示例图片" title="这是一个示例图片">
5. style
style 属性用于为图片定义内联样式。
<img src="images/example.jpg" alt="示例图片" style="border: 1px solid black; border-radius: 5px;">
6. class 和 id
class 和 id 属性用于为图片添加类名和唯一标识符，通常与 CSS 一起使用。
<img src="images/example.jpg" alt="示例图片" class="example-image" id="unique-id">
三、示例
以下是一个完整的 HTML 示例，展示了如何插入图片并使用常用属性：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 插入图片示例</title><style>.example-image {border: 1px solid black;border-radius: 5px;max-width: 100%;}</style>
</head>
<body><h1>HTML 插入图片示例</h1><img src="images/example.jpg" alt="示例图片" class="example-image" title="这是一个示例图片">
</body>
</html>
四、图片懒加载
为了优化网页性能，可以使用 loading="lazy" 属性来实现图片懒加载。懒加载会在用户滚动到图片位置时才加载图片。
<img src="images/example.jpg" alt="示例图片" loading="lazy">
五、响应式图片
为了确保图片在不同设备上都能良好显示，可以使用 srcset 和 sizes 属性来实现响应式图片。
<img srcset="images/example-small.jpg 480w, images/example-medium.jpg 768w, images/example-large.jpg 1024w"sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1024px"src="images/example.jpg" alt="示例图片">
srcset：指定不同分辨率的图片路径。sizes：指定不同屏幕宽度下的图片尺寸。
六、总结
在 HTML 中插入图片非常简单，通过 <img> 标签和其属性可以实现各种功能。以下是常用的属性及其作用：
| 属性名 | 描述 | 示例 |
|---|---|---|
src | 指定图片的路径 | <img src="images/example.jpg"> |
alt | 为图片提供替代文本 | <img alt="示例图片"> |
width | 指定图片的宽度 | <img width="200"> |
height | 指定图片的高度 | <img height="100"> |
title | 为图片添加额外的信息 | <img title="这是一个示例图片"> |
style | 为图片定义内联样式 | <img style="border: 1px solid black;"> |
class | 为图片添加类名 | <img class="example-image"> |
id | 为图片添加唯一标识符 | <img id="unique-id"> |
loading | 实现图片懒加载 | <img loading="lazy"> |
srcset | 指定不同分辨率的图片路径 | <img srcset="images/example-small.jpg 480w, images/example-medium.jpg 768w, images/example-large.jpg 1024w"> |
sizes | 指定不同屏幕宽度下的图片尺寸 | <img sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1024px"> |
通过合理使用这些属性，可以创建出更加丰富、动态和用户友好的网页。
