HTML <img> 标签介绍

<img> 标签是HTML中用于在网页上嵌入图像的标签，它是自闭合标签，不需要结束标签。

基本语法

<img src="图像路径" alt="替代文本">

主要属性介绍

使用实例

1. 基本图像嵌入

<img src="images/photo.jpg" alt="美丽的风景照片">

2. 设置图像尺寸

<img src="logo.png" alt="公司Logo" width="200" height="100">

3. 添加悬停提示

<img src="product.jpg" alt="产品展示" title="点击查看详情">

图像路径类型

支持的图像格式

响应式图像技术

1. srcset 属性使用

<img src="image-800.jpg" 
     srcset="image-400.jpg 400w, 
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     alt="响应式图像示例">

2. sizes 属性配合

<img src="banner-800.jpg"
     srcset="banner-400.jpg 400w,
             banner-800.jpg 800w,
             banner-1600.jpg 1600w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1200px) 800px,
            1600px"
     alt="自适应横幅">

3. picture 元素高级用法

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="自适应图像">
</picture>

性能优化相关属性

可访问性最佳实践

• 始终提供有意义的 alt 文本
• 装饰性图像使用空 alt 属性：alt=""
• 复杂图像（如图表）提供详细描述
• 避免在 alt 文本中使用"图片"、"图像"等词语

常见错误用法

实际应用场景

产品展示

<img src="products/laptop.jpg" 
     alt="XX品牌笔记本电脑 - 15寸超薄设计"
     width="300" 
     title="点击查看产品详情">

用户头像

<img src="avatars/user123.jpg" 
     alt="张三的头像"
     width="80" 
     height="80">

图标和Logo

<img src="icons/email.svg" 
     alt="电子邮件图标"
     width="24" 
     height="24">

注意事项

• 图片文件大小要优化，避免影响页面加载速度
• 使用适当的图像格式，平衡质量和文件大小
• 为重要的图像提供有意义的alt文本
• 考虑使用现代图像格式如WebP
• 在高分辨率屏幕上使用2x或3x图像

<img> 标签是网页开发中最常用的标签之一，正确使用可以大大提升用户体验和网站性能。