HTML篇四
目录
- 一、路径
- 1. 目录文件夹和根目录
- 2. 相对路径（重点）
- 3.绝对路径（了解即可）
一、路径
1. 目录文件夹和根目录
目录文件夹：即普通文件夹，里面存放的是制作页面所需要的相关素材，如：html文件、图片等。
根目录：打开目录文件的第一层就是根目录。
由于页面中的图片非常多，通常会新建一个文件夹来存放这些图像文件（images）,这时再查找图像就需要采用“路径”的方式来指定图像文件的位置。
路径可分为：相对路径和绝对路径。
2. 相对路径（重点）
相对路径：以引用文件所在位置为参考基础而建立出的目录路径。简单来说就是图片相对于HTML页面的位置。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级，如<img src="happyday.png" /> | |
| 下一级路径 | / | 图像文件位于HTML文件同一级，如<img src="images/happyday.png" /> |
| 上一级路径 | …/ | 图像文件位于HTML文件同一级，如<img src="../happyday.png" /> |
代码示例：
<!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>
<h4> 同一级路径： </h4>
<img src="happyday.png" width="200" />
<h4> 下一级路径： </h4>
<img src="images/studydog.png" height="200" />
<h4> 上一级路径： </h4>
<img src="../icecream.png" height="200" />
</body>
</html>
注意：
1.保证在相对路径正确的情况下，若浏览器未能显示图片，有可能为浏览器不兼容的原因，可以尝试换个浏览器试下~
3.绝对路径（了解即可）
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。由于每个人的电脑且文件夹都不同，所以不通用，故基本不使用绝对路径，但当使用的图片是网络中唯一存在的图片时，需要使用其在网络中的绝对地址进行引用。
代码示例：
<!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>
<h4> 同一级路径： </h4>
<img src="happyday.png" width="100" />
<h4> 下一级路径： </h4>
<img src="images/studydog.png" height="100" />
<h4> 上一级路径： </h4>
<img src="../icecream.png" height="100" />
<h4> 绝对路径： </h4>
<img src="file:///Users/regina/Code/Html/exemple/happyday.png" height="200" />
</body>
</html>
注意：
1.绝对路径和相对路径的“斜杠”不同，绝对路径是反斜杠“\”，相对路径是正斜杠“/”；