HTML标签用于图片选择

在HTML中，我们可以使用几种不同的标签来选择并显示图像。下面是一些常用的HTML标签：

1. <img> 标签

<img>标签是HTML中最简单和最常用的图像标签。它允许您指定要显示的图像的路径和一些可选属性，如图像大小和替代文本。

<img src="path/to/image.jpg" alt="Alternate text" width="200" height="150">

• src - 要显示的图像的路径
• alt - 图像的替代文本
• width - 图像的宽度（可选）
• height - 图像的高度（可选）

2. <picture> 标签

<picture> 标签允许您指定多个图像，以便在不同的屏幕大小或设备上显示不同的图像版本。 这对于响应式设计非常有用。

<picture>
  <source media="(min-width: 768px)" srcset="big_image.jpg">
  <source media="(max-width: 767px)" srcset="small_image.jpg">
  <img src="fallback_image.jpg" alt="Alternate text">
</picture>

• <source> - 指定不同版本的图像和它们应该在哪个屏幕大小或设备上使用。
• srcset - 指定要显示的图像的路径
• media - 指定图像应该在哪个屏幕大小或设备上使用

3. <figure> 和 <figcaption> 标签

<figure> 和 <figcaption> 标签一起使用，可以为图像添加标题和说明文本。

<figure>
  <img src="path/to/image.jpg" alt="Alternate text">
  <figcaption>这是一个美丽的图像</figcaption>
</figure>

• <figcaption> - 图像的标题和说明文本。

4. <svg> 标签

<svg> 标签允许您在网页上显示可缩放矢量图形（SVG），这是一种矢量图形格式，可用于创建高品质的图像。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" />
</svg>

• width - 图像的宽度（可选）
• height - 图像的高度（可选）

上述是一些常见的HTML标签，用于选择并显示图像。通过结合使用它们，您可以创建出非常漂亮和丰富的图像展示效果。