答案：使用figure元素标注独立内容并配合figcaption添加说明。1. 用figure包裹img表示独立内容；2. 在figure内添加figcaption描述图片，通常置于下方；3. 确保img有alt属性，figcaption补充而非重复alt文本，避免放置装饰性图片；4. 可为figure添加class或id以便CSS样式控制，提升可访问性和结构清晰度。
在HTML5中，figure 元素用于对文档中的独立内容进行标注，比如图片、图表、代码片段等。配合 figcaption 元素，可以为这些内容添加标题或说明。以下是使用 figure 元素标注图片的详细步骤。
1. 使用 figure 标签包裹图片
将 img 元素放入 figure 标签内，表示这是一块独立的内容。即使页面结构发生变化，这张图片依然能独立理解。
示例代码：
@@##@@
立即学习“前端免费学习笔记（深入）”；
2. 添加 figcaption 提供说明文字
在 figure 内部添加 figcaption 元素，用来描述图片内容。它可以放在图片上方或下方，通常放在下方更符合阅读习惯。
示例代码：
@@##@@
一只红雀在清晨的阳光下栖息于松树枝头。
3. 确保语义正确和可访问性
为了提升网页的可访问性，需注意以下几点：
- 每张图片都应有 alt 属性，帮助屏幕阅读器理解图像内容
- figcaption 中的文字应补充而非重复 alt 文本
- 避免在 figure 中放置装饰性图片，它适用于具有独立意义的内容
4. 可选：为样式添加 class 或 id
如果需要对 figure 块进行样式控制，可以添加 class 或 id，便于 CSS 定制布局。
例如：
@@##@@
2024年夏季拍摄于云南洱海。
然后在CSS中设置居中、边距或字体样式。
基本上就这些。合理使用 figure 和 figcaption 能让网页结构更清晰，也更利于搜索引擎和辅助技术识别内容。不复杂但容易忽略细节。
