1. 常用图像格式
| 格式 | 特点 | 适用场景 |
|---|---|---|
| JPEG | 有损压缩，文件小，不支持透明 | 适合照片、复杂图像 |
| PNG | 无损压缩，支持透明（Alpha通道） | 适合图标、需要透明背景的图片 |
| GIF | 支持动画，最多256色 | 简单动画、低色彩图标 |
| WebP | 谷歌开发，高压缩率，支持透明和动画 | 现代网页，替代JPEG/PNG |
| SVG | 矢量格式，无损缩放 | 图标、LOGO、响应式设计 |
2. 图像标签及其属性
标签：<img>
-
核心属性：
-
src：指定图片路径（必填）。 -
alt：替代文本，图片无法显示时展示（必填，SEO和可访问性关键）。
-
-
可选属性：
-
width/height：设置显示尺寸（单位像素或百分比）。 -
loading="lazy"：延迟加载（提升页面性能）。 -
title：鼠标悬停时的提示文本（非必填，与alt不同）。
-
示例代码：
<img src="logo.png" alt="网站LOGO" width="200" height="100" loading="lazy">3. 绝对路径 vs. 相对路径
| 类型 | 定义 | 示例 | 优缺点 |
|---|---|---|---|
| 绝对路径 | 完整URL或系统根目录开始的路径 | https://example.com/images/pic.jpg 或 /var/www/images/pic.jpg | 精准定位，依赖外部服务器稳定性 |
| 相对路径 | 相对于当前文件的路径 | images/pic.jpg（同级目录下images文件夹）或 ../assets/pic.jpg（上级目录） | 灵活，但需注意文件结构一致性 |
在HTML中，相对路径用于指定当前文件与其他文件或资源之间的相对位置。相对路径的设置方法如下：
1. 同一目录下的文件
如果目标文件与当前HTML文件位于同一目录下，可以直接使用文件名作为相对路径。
<!-- 引用同一目录下的图片 -->
<img src="image.jpg" alt="描述文本">
<!-- 链接到同一目录下的另一个HTML文件 -->
<a href="page.html">访问页面</a>2. 子目录中的文件
如果目标文件位于当前目录的子目录中，需要在文件名前加上子目录的名称和斜杠 /。
<!-- 引用子目录中的图片 -->
<img src="images/image.jpg" alt="描述文本">
<!-- 链接到子目录中的HTML文件 -->
<a href="subdirectory/page.html">访问子目录中的页面</a>3. 父目录中的文件
如果目标文件位于当前目录的父目录中，需要使用 .. 表示返回上一级目录，然后再加上目标文件的路径。
<!-- 引用父目录中的图片 -->
<img src="../image.jpg" alt="描述文本">
<!-- 链接到父目录中的HTML文件 -->
<a href="../page.html">访问父目录中的页面</a>4. 多级目录
如果需要访问更复杂的目录结构，可以结合以上方法。
<!-- 访问当前目录的父目录的子目录中的文件 -->
<img src="../images/logo.jpg" alt="描述文本">
<!-- 访问当前目录的子目录的子目录中的文件 -->
<a href="subdir/subsubdir/page.html">访问多级子目录中的页面</a>总结
同一目录：直接使用文件名。
子目录：使用
子目录名/文件名。父目录：使用
../文件名。多级目录：结合以上方法，如
../子目录名/文件名或子目录名/子子目录名/文件名。
通过正确设置相对路径，可以确保HTML文件正确引用所需的资源。
4. 使用图像标签的注意事项
必填
alt属性：提升无障碍访问和SEO，避免留空（除非纯装饰图片，可设为alt=""）。尺寸优化：优先用
width/height定义占位尺寸，避免布局偏移，但实际调整大小应通过图像编辑工具。路径正确性：相对路径需确保文件层级正确，绝对路径需确认URL有效。
图片压缩：大图需压缩（如TinyPNG工具），减少加载时间。
响应式设计：使用
srcset属性适配不同屏幕分辨率。版权问题：避免使用未授权图片。
总结表格
| 分类 | 要点 |
|---|---|
| 常用格式 | JPEG（照片）、PNG（透明）、GIF（动画）、WebP（高效）、SVG（矢量） |
| 标签与属性 | <img src="..." alt="..." width="..." height="..." loading="lazy"> |
| 路径类型 | 绝对路径（完整URL）、相对路径（images/pic.jpg或../assets/pic.jpg） |
| 注意事项 | 必填alt、压缩图片、路径验证、响应式适配、版权合规 |
