HTML <img> 标签用于在网页中嵌入图片。本文将详细介绍该标签的使用方法和各种属性。
基础语法
要插入图片，你需要使用 <img> 标签，如下所示：
<img src="url" alt="描述文本">
-
src: 指定图像的 URL。这是必需的属性。 -
alt: 定义当图片无法显示时，会显示的替代文本。这也是一个必需的属性，它对可访问性非常重要，并且有助于搜索引擎优化。
设置宽度和高度
你可以使用 width 和 height 属性来调整图像的大小：
<img src="url" alt="描述文本" width="500" height="600">
注意，如果只设置了宽度或高度中的一个，另一个属性将根据图像的原始比例自动调整。
响应式图片
为了确保你的网站在不同的设备上都能正常显示，可以使用 max-width CSS 属性来创建响应式图片：
<img src="url" alt="描述文本" style="max-width:100%;height:auto;">
超链接图片
要使图像成为超链接，你可以将 <img> 标签包裹在 <a> 标签内：
<a href="url"><img src="image_url" alt="描述文本"></a>
背景图片
除了 <img> 标签，你还可以使用 CSS 的 background-image 属性来设置元素的背景图像。这对于创建按钮、卡片等组件非常有用。
<div style="background-image: url('image_url');"></div>
总结
本教程介绍了 HTML <img> 标签的基础使用方法，包括设置宽度和高度、创建响应式图片以及如何将图像转换为超链接。最后，我们还简要讨论了使用 CSS 背景图片来设置元素的背景图像。希望本文对你有所帮助！