HTML <img> 标签

在HTML中，<img> 标签用于插入图片。这个标签是一个空标签，它只包含属性，没有闭合标签。下面是一些关于如何使用 <img> 标签的详细说明：

基本语法

<img src="URL" alt="替代文本">
  • src: 这个属性指定了图片的 URL。浏览器将从该地址获取图片并显示在网页上。
  • alt: 这个属性提供了一段文字，当图片无法加载时会显示出来。它对于可访问性和SEO都很重要，因为搜索引擎依赖于这些文本来理解图片的内容。

其他常用属性

  • width 和 height: 这两个属性指定了图片的宽度和高度。如果只指定一个，另一个会根据原始图片的比例自动调整。
  • title: 这个属性提供了关于图片的额外信息，当用户将鼠标悬停在图片上时显示为工具提示。
  • loading: 这个属性指定了浏览器加载图片的方式。可以设置为 lazy 来延迟加载图片，直到用户滚动到它们出现在视口中。

示例

<img src="https://example.com/image.jpg" alt="一个美丽的山景" width="600" height="400" title="点击查看高清图片" loading="lazy">

在这个示例中，我们插入了一张宽度为600像素、高度为400像素的图片。如果图片无法加载，浏览器会显示 "一个美丽的山景" 作为替代文本。当用户将鼠标悬停在图片上时，会看到工具提示 "点击查看高清图片"。此外，由于 loading 属性设置为了 lazy，浏览器只有在用户滚动到图片出现在视口中时才开始加载它。

希望这篇教程对你有所帮助！如果你还有其他问题或需求，请随时告诉我。