HTML5 中与图像相关的标签主要有以下几个：
-
<img>(Image): 这是最常用的图像标签，用于在网页上嵌入图像。它是一个自关闭标签，意味着它不需要结束标签</img>。 -
<picture>(Picture):<picture>元素允许你定义多个图像源，浏览器会根据不同的设备特性（例如屏幕分辨率、像素密度等）选择最合适的图像显示。这有助于提供响应式图像，提升用户体验并节省带宽。 -
<source>(Source):<source>元素与<picture>元素一起使用，用于指定不同的图像源。它必须嵌套在<picture>元素内部，并且需要设置srcset和media属性，以便浏览器根据条件选择合适的图像。 -
<map>(Image Map) &<area>(Area):<map>元素与<img>元素结合使用，可以创建图像地图。图像地图允许你在图像上定义不同的区域（热点），每个区域可以链接到不同的 URL 或执行不同的 JavaScript 代码。<area>元素用于定义图像地图中的各个区域，它必须嵌套在<map>元素内部。 -
<canvas>(Canvas):<canvas>元素允许你使用 JavaScript 动态地绘制图形、图表和图像。它本身并不直接显示图像，而是提供了一个绘图区域，你可以使用 JavaScript API 在上面绘制任何你想要的内容。 -
<svg>(Scalable Vector Graphics):<svg>元素允许你在网页上嵌入 SVG 矢量图形。SVG 图形可以无限缩放而不失真，并且通常比位图图像更小。
以下是一个简单的示例，展示了如何使用 <picture> 和 <source> 元素实现响应式图像：
<picture><source srcset="image-small.jpg" media="(max-width: 600px)"><source srcset="image-medium.jpg" media="(max-width: 1000px)"><img src="image-large.jpg" alt="A descriptive image alt text">
</picture>
在这个例子中，浏览器会根据屏幕宽度选择合适的图像：
- 屏幕宽度小于 600px 时，显示
image-small.jpg。 - 屏幕宽度在 600px 到 1000px 之间时，显示
image-medium.jpg。 - 屏幕宽度大于 1000px 时，显示
image-large.jpg。
记住，<img> 标签的 alt 属性非常重要，它用于提供图像的替代文本描述，这对于屏幕阅读器用户和搜索引擎优化至关重要。 始终确保为你的图像提供合适的 alt 文本。
