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

htmledit_views">

官网：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页面中嵌入图像。其基本语法如下：

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

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

示例：

html"><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文件与图片在同一目录下，可以直接使用图片的文件名。
```
html"><img src="example.jpg" alt="示例图片">
```
下一级目录：如果图片在HTML文件所在目录的子目录中，需要指定子目录名。
```
html"><img src="images/example.jpg" alt="示例图片">
```
上一级目录：如果图片在HTML文件所在目录的上一级目录中，需要使用../表示上一级目录。
```
html"><img src="../example.jpg" alt="示例图片">
```
多级目录：可以使用多个../表示更上一级的目录。
```
html"><img src="../../images/example.jpg" alt="示例图片">
```

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

2.2 绝对路径

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

本地文件路径：以盘符开始的路径，如C:\images\example.jpg。
```
html"><img src="file:///C:/images/example.jpg" alt="示例图片">
```

html" title=网络>网络URL：以http://或https://开头的完整URL地址。

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

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