在本 HTML 教程中，您将学习有关 HTML 中图像标签的所有知识。我们还将讨论 HTML 中最常用的图像标签属性。
HTML 中的 <img> 标签用于在网页上显示图像。图像通过使网站更加有趣和生动，从而在视觉上更具吸引力。HTML <img> 标签是一个只有属性的空标签；HTML 图像元素中不使用闭合标签。
<img src="url" alt="some_text">
每个 标签必须至少有两个属性：src 和 alt 属性。src 属性指示浏览器在哪里查找图像。它的值是图片文件的 URL。另一方面，alt 属性为图像提供替代文本，以防图像不可用或因任何原因无法显示。它的值应该是图像的重要替代品。
<img src="smile.jpg" alt="Smiling Face">
<img src="kid.jpg" alt="Kids Playing">
<img src="garden.jpg" alt="Garden">
| 属性 | 描述 |
|---|---|
| src | 这是一个必需属性，用于描述图像的来源或路径。它告诉浏览器在服务器上哪里查找图片。图片可能位于同一目录中，也可能位于不同的服务器上。 |
| alt | 如果无法显示图片，alt 属性将指定替代文本。alt 属性的值用文字描述了图像。alt 属性被认为在 SEO 方面很有用。 |
| width | 这是一个可选属性，用于指定显示图像的宽度。现在不再建议使用。应使用 CSS 来代替 width 属性。 |
| height | 它指定了图像的高度。HTML height 属性也接受图像和对象组件。现在不再建议使用。您应该使用 CSS 来代替 height 属性。 |
为了适应不同的设备（或屏幕尺寸）而缩放图像，效果可能并不总是如预期。同样，使用 width 和 height 属性来减小图像尺寸并不会减小原始文件的大小。为了解决这些问题，HTML5 中的 <picture> 元素允许您声明图像的多个副本，以针对不同类型的设备。
<picture> 元素包含零个或多个 <source> 元素，每个元素都指向一个不同的图像源，最后是一个 <img> 元素。此外，每个 <source> 元素都包含一个 media 属性，该属性设置一个媒体条件（如媒体查询），浏览器用它来决定何时应使用某个特定的源。
<picture>
<source media="(min-width: 1000px)" srcset="logo-large.png">
<source media="(max-width: 500px)" srcset="logo-small.png">
<img src="logo-default.png" alt="My logo">
</picture>
