# 图像插入

URL: https://caijiao.org/html/03-media/02-images
Source: docs/html/03-media/02-images.md
Description: 使用 HTML 的 标签可以将图片插入网页，丰富视觉内容。掌握图片路径、替代文本和尺寸设置是实现良好网页体验的关键。

在 HTML 中，使用 `<img>` 标签将图片嵌入到网页中，增强页面的视觉效果和内容表达。

### 基本语法

```html
<img src="图片路径" alt="替代文本" />
```

- `src` 属性指定图片的文件路径，可以是相对路径或绝对 URL。
- `alt` 属性提供图片无法显示时的替代文本，有助于搜索引擎优化和无障碍访问。

### 示例

```html
<img src="images/logo.png" alt="网站 Logo" />
```

### 常用属性

- `width` 和 `height`：设置图片显示的宽度和高度。

```html
<img src="images/photo.jpg" alt="照片" width="300" height="200" />
```

- `title`：鼠标悬停时显示的提示信息。

```html
<img src="images/photo.jpg" alt="照片" title="这是照片" />
```

注意：`<img>` 是自闭合标签，不需要结束标签。

合理使用图片不仅美化网页，还能提升用户体验和信息传达效果。