HTML 图片 - Html

在 HTML 中，图片是通过使用 <img> 标签来插入的。使用正确的属性和 alt 属性，可以确保页面在图片加载失败时仍能够提供有关图像的信息。

语法

<img src="image.jpg" alt="描述图片的文本" width="500" height="300">

• src 属性指定要显示的图像的 URL。
• alt 属性提供有关图像的替代文本，在图像未能显示时，该文本将代替该图像的位置。
• width 和 height 属性定义图像的宽度和高度。

实例

<!-- 使用 src 属性引用文件 -->
<img src="image.jpg" alt="描述图片的文本">

<!-- 使用 height 和 width 属性缩放图片 -->
<img src="image.jpg" height="200" width="300" alt="描述图片的文本">

alt 属性

alt 属性，也称为替代文本，提供了有关图像内容的文字说明。除了对访问者有帮助外，替代文本还适合视力受损的人员（使用屏幕阅读器）和可能因其他原因无法加载图像的访问者。

如果图像在页面中是不必要的（例如纯装饰性元素），则可以将 alt 属性设置为空字符串或省略它，但这种情况很少发生。

srcset 属性

srcset 是一个包含一组由逗号分隔的 URL 和它们所对应的一个大小（以像素为单位）的列表。它告诉浏览器在不同条件下选择适当的图像。在高分辨率显示器上，使用宽度更大的图像可以获得更好的清晰度。

<img srcset="small.jpg 640w, medium.jpg 1024w, large.jpg 1600w" sizes="(max-width: 900px) 50vw, 33vw" alt="描述图片的文本">

响应式图片

使用响应式图像，可以确保图像始终以最佳的分辨率和大小呈现。为了实现这个目的，可以使用插入图片的 <picture> 元素。

<picture>
   <source media="(min-width: 801px)" srcset="large.jpg">
   <source media="(min-width: 501px)" srcset="medium.jpg">
   <img src="small.jpg" alt="描述图片的文本">
</picture>

上面的代码将对不同屏幕尺寸加载不同的图像，以提高加载速度和分辨率。