页面中的图片会非常多,通常我们会新建一个文件夹来存放这些图像文件(images) ,这时再查找图像,就需要采用"路径"的方式来指定图像文件的位置。
路径可以分为:
1.相对路径 (重要)
2.绝对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。
这里简单来说,图片相对于HTML页面的位置
相对路径是从代码所在的这个文件出发,去寻找目标文件的,而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。
相对路径(三种很重要)
一.(同一级路径) 例如,案例文件夹是这样的,这里的img.jpg和11-同一级路径是在同一级下的两个文件,如果要在11中显示img.jpg
代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>同一级路径</title>
</head>
<body>
<img src="img.jpg"/>
</body>
</html>
运行结果:
二.(下一级路径) 如果我们要显示images文件夹下的图片img1.jpg,这时12-下一级路径和img1.jpg是属于上下级关系的,img1.jpg是12-下一级路径的下一级文件
代码为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下一级路径</title>
</head>
<body>
<img src="images/img1.jpg"/>
</body>
</html>
运行结果为:
三.(上一级路径) 这里我们想用html文件夹里边的文件test.html来显示图片img.jpg,此时图片img.jpg是test.html的上一级文件,所以路径如下
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上一级路径</title>
</head>
<body>
<img src="../img.jpg"/>
</body>
</html>
运行结果
绝对路径 (了解,不常用)
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例如:“D:\zuomian\前端基础\案例\img.jpg” 或完整的网络地址"https://i0.hdslb.com/bfs/feed-admin/9db2df494ff733d3f9c969eb47dd90bcb29564c8.png@880w_388h_1c_95q"
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对路径</title>
</head>
<body>
<img src="D:\zuomian\前端基础\案例\img.jpg">
<img src="https://i0.hdslb.com/bfs/feed-admin/9db2df494ff733d3f9c969eb47dd90bcb29564c8.png@880w_388h_1c_95q">
</body>
</html>