1. 目录文件夹和根目录
实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。
目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关的素材,比如html文件、图片等。如web文件夹。
根目录:打开目录文件夹的第一层就是根目录。
2. 路径
页面中的图片会非常多,通常我们会新建一个文件夹来存放这些图像文件(images),这时在查找图像,就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为:
(1)相对路径:以引用文件所在位置为参考基础,而建立出得目录路径。
简单来说,为图片相对于HTML页面的位置。
相对路径分类 | 符号 | 说明 |
同一级路径 | 图像位于HTML文件同一级 如<img src="helloworld.png" /> | |
下一级路径 | / | 图像位于HTML文件下一级 如<img src="images/helloworld.png" /> |
上一级路径 | ../ | 图像位于HTML文件上一级 如<img src="../helloworld.png" /> |
相对路径是从代码所在的文件出发,去寻找目标文件的,而我们这里说的上一级、下一级和同一级就是图片相对于HTML页面的位置。
如图所示,分别是上一级路径,下一级路径,同一级路径的使用方法。
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图像标签的使用</title>
</head>
<body>
<h4>图像标签的使用:</h4>
<!--同一级路径-->
<img src="helloworld2.img" title="这是hello world图片鼠标移动上去后会显示的文字" width="300" />
<!--上一级路径-->
<img src="../helloworld.img" title="这是hello world图片鼠标移动上去后会显示的文字" width="300" />
<!--下一级路径-->
<img src="image/helloworld1.img" title="这是hello world图片鼠标移动上去后会显示的文字" width="300" />
</body>
</html>
执行效果如下(三张图片都能展示):
(2)绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例如,"D:\web\images\helloworld.png" 或者完整的网络地址"https://baidu.com/images/helloworld.png"
代码如下:
<!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="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3848402655,92542552&fm=26&gp=0.jpg">
<!--绝对路径填写本地磁盘下固定的图片路径,换到别的电脑上可能会失效-->
<img src="D:\webworkspace\html\image\helloworld1.img">
</body>
</html>
(3)相对路径和绝对路径:相对路径的符号一般是朝左侧倾斜如 / 和 ../,绝对路径的符号一般是朝右侧倾斜,如D:\