相对路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>相对路径</title>
</head>
<body>
<img src="2.gif" alt="这是一个大松鼠" />
</body>
</html>
相对路径值相对于当前资源所在目录的位置
1. src属性
- src属性配置的是图片的路径,目前我们所要使用的路径全都是相对路径
<img src="abc/bcd/2.gif" alt="这是一个大松鼠" />
- 可以使用…/来返回一级目录,返回几级目录就写几个…/
<img src="../../img/2.gif" alt="这是一个大松鼠" />
2. 相对路径的图片
-
图片的格式
- JPEG(JPG)
- JPEG图片支持的颜色比较多,图片可以压缩,但是它不支持透明
- 一般使用JPEG来保存照片等颜色丰富的颜色
- GIF
- GIF支持的颜色少,只支持简单的透明,支持动态图
- 图片颜色单一或者是动态图时可以使用gif
- PNG
- PNG支持的颜色多,并且支持复杂的透明
- 可以用来显示颜色复杂的透明图片
- JPEG(JPG)
-
图片的使用原则
- 效果不一致,使用效果好的
- 效果一致,使用小的