HTML - 3、图片<img>

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

1. <img src="https://www.cnblogs.com/image_url" alt="描述性文字">

复制代码

常用属性

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

示例代码

以下是一些常见的 <img> 使用示例：1. 基本用法

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

复制代码

2. 设置宽度和高度

1. <img src="https://www.cnblogs.com/images/example.jpg" alt="示例图片" width="200" height="100">

复制代码

3. 添加标题

1. <img src="https://www.cnblogs.com/images/example.jpg" alt="示例图片" title="这是一个示例图片">

复制代码

4. 使用类名和ID

1. <img src="https://www.cnblogs.com/images/example.jpg"  id="image-id" alt="示例图片">

复制代码

5. 从外部URL加载图片

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

复制代码

注意事项

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

    复制代码
  
  

总结

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！