在HTML中,图像通常使用<img>
标签来插入。以下是<img>
标签的主要属性及其详解:
src:
- 描述:指定图像的URL或路径。
- 示例:
<img src="image.jpg" alt="描述文本">
alt:
- 描述:提供图像的替代文本,当图像无法显示时,或用于屏幕阅读器。
- 示例:
<img src="image.jpg" alt="这是一张风景图">
width:
- 描述:设置图像的宽度,可以是像素值或百分比。
- 示例:
<img src="image.jpg" width="300">
height:
- 描述:设置图像的高度,可以是像素值或百分比。
- 示例:
<img src="image.jpg" height="200">
title:
- 描述:提供图像的额外信息,通常在鼠标悬停时显示。
- 示例:
<img src="image.jpg" title="这是标题">
loading:
- 描述:控制图像的加载方式,值可以是
lazy
(延迟加载)或eager
(立即加载)。 - 示例:
<img src="image.jpg" loading="lazy">
- 描述:控制图像的加载方式,值可以是
class:
- 描述:为图像指定一个或多个CSS类,以便于样式化。
- 示例:
<img src="image.jpg" class="my-image">
style:
- 描述:直接在标签中添加内联CSS样式。
- 示例:
<img src="image.jpg" style="border: 1px solid #000;">
usemap:
- 描述:与
<map>
标签结合使用,定义图像映射。 - 示例:
<img src="image.jpg" usemap="#mapname">
- 描述:与
ismap:
- 描述:指示图像是一个服务器端图像映射。
- 示例:
<img src="image.jpg" ismap>
这些属性可以组合使用,以实现更复杂的图像展示效果。