HTML - 3、图片<img>

  <img> 标签是 HTML 中用于插入图像的标签。它是一个自闭合标签（即不需要闭合标签），用于在网页中显示图片。以下是关于 <img> 标签的详细信息和用法：

基本语法

<img src="image_url" alt="描述性文字">

常用属性

1. src：
   • 作用：指定图像的路径或URL。
   • 示例：<img src="images/example.jpg">
2. alt：
   • 作用：提供图像的替代文本，当图像无法显示时，浏览器会显示这段文本。这对于无障碍访问和搜索引擎优化（SEO）非常重要。
   • 示例：<img src="images/example.jpg" alt="示例图片">
3. width 和 height：
   • 作用：设置图像的宽度和高度。
   • 单位：可以是像素（px）或百分比（%）。
   • 示例：<img src="images/example.jpg" width="200" height="100">
4. title：
   • 作用：为图像提供额外的信息，鼠标悬停在图像上时会显示。
   • 示例：<img src="images/example.jpg" alt="示例图片" title="这是一个示例图片">
5. class 和 id：
   • 作用：用于为图像添加类名或ID，便于CSS样式控制或JavaScript操作。
   • 示例：<img src="images/example.jpg" class="image-class" id="image-id">

示例代码

以下是一些常见的 <img> 使用示例：

1. 基本用法

<img src="images/example.jpg" alt="示例图片">

2. 设置宽度和高度

<img src="images/example.jpg" alt="示例图片" width="200" height="100">

3. 添加标题

<img src="images/example.jpg" alt="示例图片" title="这是一个示例图片">

4. 使用类名和ID

<img src="images/example.jpg" class="image-class" id="image-id" alt="示例图片">

5. 从外部URL加载图片

<img src="https://example.com/images/example.jpg" alt="示例图片">

注意事项

1. 图像路径：
   • 如果图像位于当前页面的同一目录下，可以直接使用文件名（如example.jpg）。
   • 如果图像位于其他目录或外部服务器，需要使用完整的路径或URL。
2. 图像格式：
   • 常见的图像格式包括jpg、png、gif等。选择合适的格式以优化加载速度和显示效果。
3. SEO和无障碍访问：
   • alt 属性：为图像提供描述性文本，有助于搜索引擎理解和索引图像内容，同时为视障用户提供了图像的描述。
   • title 属性：提供额外的信息，鼠标悬停时显示。
4. 响应式图像：
   • 可以使用CSS的max-width和height属性来实现响应式图像，确保图像在不同设备上自适应显示。
   • 示例：

     img {
         max-width: 100%;
         height: auto;
     }

总结

• <img>：用于在网页中插入图像。
• 常用属性：src（图像路径）、alt（替代文本）、width 和 height（图像尺寸）、title（鼠标悬停显示的文本）、class 和 id（用于样式和脚本操作）。
• 最佳实践：始终为图像提供alt属性，优化图像格式和路径，确保图像在不同设备上自适应显示。