图片标签 - <img>
什么是 <img> 标签？
<img> 标签用于在HTML页面中嵌入图像。它是一个空标签（void element），意味着它不需要结束标签。图片标签通过 src 属性指定图像的URL，并通过 alt 属性提供图像的替代文本。
基本语法
<img src="image.jpg" alt="图片描述">
核心属性
src 属性
src 属性（source的缩写）是 <img> 标签最重要的属性，用于指定图像的URL（统一资源定位符）。URL可以是：
- 绝对URL：指向另一个网站上的图像，例如
https://example.com/image.jpg - 相对URL：指向同一个网站内的图像，例如
images/image.jpg
示例：
<!-- 绝对URL -->
<img src="https://example.com/logo.png" alt="示例网站Logo">
<!-- 相对URL -->
<img src="images/photo.jpg" alt="风景照片">
alt 属性
alt 属性（alternative的缩写）用于提供图像的替代文本，这对于：
- 可访问性：屏幕阅读器会读取这个文本，帮助视觉障碍用户理解图像内容
- 图像加载失败时：如果图像无法加载，浏览器会显示替代文本
- SEO：搜索引擎使用替代文本理解图像内容
示例：
<!-- 有意义的替代文本 -->
<img src="sunset.jpg" alt="海滩上的日落，天空呈现橙红色">
<!-- 装饰性图像使用空alt -->
<img src="divider.png" alt="">
width 和 height 属性
width 和 height 属性用于指定图像的显示尺寸，以像素为单位。设置这些属性可以帮助浏览器在加载图像之前预留空间，减少页面布局的跳动。
示例：
<!-- 设置图像尺寸 -->
<img src="photo.jpg" alt="风景照片" width="500" height="300">
loading 属性
loading 属性用于控制图像的加载行为，以提高页面性能：
| 值 | 描述 |
|---|---|
eager |
默认值，立即加载图像 |
lazy |
延迟加载图像，直到图像接近视口 |
示例：
<!-- 延迟加载图像 -->
<img src="large-image.jpg" alt="大图" loading="lazy">
srcset 属性
srcset 属性用于为不同设备提供不同分辨率的图像，以支持响应式设计：
<img src="small.jpg"
srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, 1280px"
alt="响应式图像">
alt 属性最佳实践
替代文本的编写应遵循以下原则：
- 描述性：准确描述图像的内容和用途
- 简洁：保持在125个字符以内
- 有意义：帮助用户理解图像在页面中的作用
- 装饰性图像：使用空字符串
alt=""，而不是省略alt属性
好的示例：
<img src="apple.jpg" alt="红苹果的特写照片">
<img src="button.png" alt="提交按钮">
<img src="spacer.gif" alt="">
不好的示例：
<!-- 太模糊 -->
<img src="apple.jpg" alt="图片">
<!-- 冗余 -->
<img src="apple.jpg" alt="图像：红苹果">
<!-- 装饰性图像没有使用空alt -->
<img src="divider.jpg" alt="分隔线">
全局属性
<img> 标签支持所有HTML全局属性，包括 class、id、style、title 等。
示例：
<!-- 使用class和title -->
<img src="photo.jpg" alt="风景照片" class="gallery-image" title="美丽的风景">
响应式图像
为了确保图像在不同设备上正确显示，可以使用CSS的 max-width 属性：
<!-- CSS -->
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<!-- HTML -->
<img src="responsive.jpg" alt="响应式图像">
最佳实践
-
始终提供alt属性：即使是装饰性图像，也应该使用空的alt属性
-
使用合适的图像格式：
- JPEG：适合照片和复杂图像
- PNG：适合需要透明度的图像
- WebP：现代图像格式，提供更好的压缩
- SVG：适合矢量图形
-
优化图像大小：压缩图像以提高页面加载速度
-
设置width和height属性：帮助浏览器预留空间，减少布局跳动
-
使用lazy loading：对不在首屏的图像使用
loading="lazy" -
使用响应式图像：为不同设备提供不同分辨率的图像
-
确保图像可访问：使用有意义的alt文本，确保颜色对比度符合要求
示例
<!-- 基础图像 -->
<img src="cat.jpg" alt="一只黑猫在阳光下睡觉">
<!-- 带尺寸和标题的图像 -->
<img src="dog.jpg" alt="一只金毛犬" width="400" height="300" title="我的宠物狗">
<!-- 响应式图像 -->
<img src="flower.jpg" alt="一朵红色的花" style="max-width: 100%; height: auto;">
<!-- 延迟加载图像 -->
<img src="large-photo.jpg" alt="大型照片" loading="lazy">
<!-- 响应式图像集 -->
<img src="default.jpg"
srcset="default.jpg 400w, large.jpg 800w, extra-large.jpg 1200w"
sizes="100vw"
alt="响应式图像集">
浏览器兼容性
<img> 标签在所有现代浏览器中都得到广泛支持。新属性如 loading 和 srcset 在较新的浏览器版本中支持良好，但在旧浏览器中可能需要优雅降级。
总结
<img> 标签是HTML中用于嵌入图像的基本元素，它通过 src 和 alt 等属性控制图像的显示和行为。正确使用图像标签对于创建视觉吸引力强、性能优良且可访问的网站至关重要。