HTML中的图片标签详解及路径使用【学术投稿-第五届环境资源与能源工程国际学术会议（ICEREE 2025）】

官网：www.iceree.org

会议时间：2025年2月21-23日

会议地点：中国-昆明

简介

第五届环境资源与能源工程国际学术会议（ICEREE 2025）将于2025年2月21日至23日在中国昆明隆重举行。主要围绕“能源工程和能源技术”、“环境科学和环境工程”等研究领域展开讨论。旨在为能源资源与环境工程的专家学者及企业发展提供一个分享研究成果、讨论存在的问题与挑战、探索前沿科技的国际性合作交流平台。

目录

前言 

一、HTML中的标签

1.1 标签的基本用法

1.2 常用属性

1.3 注意事项

二、相对路径与绝对路径

2.1 相对路径

2.2 绝对路径

三、常见图片格式比较

3.1 JPEG（JPG）

3.2 PNG

3.3 GIF

3.4 SVG

3.5 WebP

3.6 HEIF

四、选择合适的图片格式

五、总结

---

前言 

在Web开发中，图片是丰富网页内容、提升用户体验的重要元素。HTML提供了<img>标签，用于在网页中嵌入图像。理解<img>标签的使用方法、路径选择以及图片格式的使用，对于开发高质量的网页至关重要。

一、HTML中的<img>标签

1.1 <img>标签的基本用法

<img>标签用于在HTML页面中嵌入图像。其基本语法如下：

<img src="图片路径" alt="替代文本" width="宽度" height="高度">

• src：指定图像的路径或URL。是必需的属性，浏览器通过它加载图像。
• alt：提供图像的替代文本。当图像无法显示时，浏览器会显示该文本。它有助于提升网页的可访问性，尤其对于使用屏幕阅读器的用户。
• width 和 height：指定图像的显示宽度和高度。如果未指定，浏览器会使用图像的原始尺寸。

示例：

<img src="example.jpg" alt="示例图片" width="500" height="300">

1.2 常用属性

• title：提供图像的附加信息。当鼠标悬停在图像上时，浏览器会显示该信息。
• loading：指定图像的加载策略。eager表示立即加载，lazy表示延迟加载，通常用于优化页面性能。
• usemap：将图像定义为客户端图像映射，允许在图像的不同区域定义超链接。需要配合<map>和<area>标签使用。

示例：

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

1.3 注意事项

• 替代文本（alt）：始终为每个图像提供描述性的alt文本，以提高网页的可访问性和SEO效果。
• 尺寸设置：如果指定了width和height，应保持图像的纵横比，以防止图像变形。
• 懒加载：使用loading="lazy"可以延迟加载图像，提升页面加载性能，尤其是图像较多的网页。

二、相对路径与绝对路径

在HTML中，引用图片时需要指定图片的路径。路径分为相对路径和绝对路径两种方式。

2.1 相对路径

相对路径是相对于当前HTML文件的位置来指定图片的路径。常见的相对路径形式包括：

• 同一级目录：如果HTML文件与图片在同一目录下，可以直接使用图片的文件名。

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

• 下一级目录：如果图片在HTML文件所在目录的子目录中，需要指定子目录名。

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

• 上一级目录：如果图片在HTML文件所在目录的上一级目录中，需要使用../表示上一级目录。

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

• 多级目录：可以使用多个../表示更上一级的目录。

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

注意：使用相对路径时，确保图片文件相对于HTML文件的位置正确，以避免图片无法显示。

2.2 绝对路径

绝对路径是指从根目录开始的完整路径，或者是完整的URL地址。常见的绝对路径形式包括：

• 本地文件路径：以盘符开始的路径，如C:\images\example.jpg。

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

• 网络URL：以http://或https://开头的完整URL地址。

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

注意：使用绝对路径时，需确保路径的正确性和有效性。对于本地文件路径，浏览器可能会限制访问，导致图片无法显示。

三、常见图片格式比较

选择合适的图片格式对于网页性能和用户体验至关重要。以下是几种常见图片格式的优缺点比较：

3.1 JPEG（JPG）

• 优点：适用于照片和复杂图像，压缩率高，文件体积小。
• 缺点：有损压缩，可能导致图像质量下降，不支持透明度和动画的能力有限。

3.2 PNG

• 优点：无损压缩，支持透明度，适用于图标、徽标和需要透明背景的图像。
• 缺点：文件体积较大，不适合用于照片。

3.3 GIF

• 优点：支持动画，适用于简单的动画效果。
• 缺点：色彩限制（最多256色），不适合复杂图像，文件体积可能较大。

3.4 SVG

• 优点：矢量图形，可无限缩放而不失真，文件体积小，适用于图标和简单插图。
• 缺点：不适合复杂的照片或图像。

3.5 WebP

• 优点：支持有损和无损压缩，文件体积小，支持透明度和动画。
• 缺点：兼容性较差，部分老旧浏览器不支持。

3.6 HEIF

• 优点：高效的压缩算法，文件体积小，支持透明度和动画。
• 缺点：兼容性差，主要用于移动设备。

四、选择合适的图片格式

• 照片和复杂图像：优先选择JPEG，以获得较小的文件体积和良好的图像质量。
• 图标、徽标和简单插图：优先选择SVG或PNG，支持透明度，文件体积小。
• 动画效果：如果需要简单的动画，使用GIF；如果需要更高质量的动画，考虑WebP。

五、总结

在Web开发中，合理使用<img>标签和选择合适的图片格式，对于提升网页性能和用户体验至关重要。始终考虑图像的内容、用途和目标浏览器的兼容性，选择最适合的格式，以实现最佳效果。通过合理使用相对路径和绝对路径，可以有效管理和引用图像资源，进一步提升网页加载速度和可维护性。希望这篇博客能帮助更好地理解HTML图片标签的使用，并选择合适的图片格式。

---

如有任何疑问或建议，欢迎在评论区留言交流！