10 路径
相对路径
从当前文件夹出发寻找文件
./ 当前文件夹
…/ 上级文件夹
…/…/ 上两级文件夹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 相对路径 上级文件夹图片 -->
<img src="../cat.jpg">
<!-- 相对路径 当前目录文件夹图片 -->
<img src="./cat.jpg" >
<!-- 相对路径 子文件夹图片 -->
<img src="./资料/cat.jpg" >
</body>
</html>
绝对路径
从电脑盘符出发寻找文件
src内写文件存储地址,包含本地或网站地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 相对路径 上级文件夹图片 -->
<img src="../cat.jpg">
<!-- 相对路径 当前目录文件夹图片 -->
<img src="./cat.jpg" >
<!-- 相对路径 子文件夹图片 -->
<img src="./资料/cat.jpg" >
<!-- 绝对路径 本地图片 \ -->
<img src="D:\02 个人相关\02 个人学习\htmlCode\cat.img" alt="">
<!-- 绝对路径 本地图片 / -->
<img src="D:/02 个人相关/02 个人学习/htmlCode/cat.img" alt="">
<!-- 绝对路径 网站图片地址 -->
<img src="https://i0.hdslb.com/bfs/archive/84705cdc024a6c7ba5fdc86977e2e27e49a5685a.jpg@160w_100h_1c.webp" alt="">
</body>
</html>