7.HTML基础——路径问题-优快云博客

本文详细解析了HTML中相对路径与绝对路径的区别，包括同级、下级、上级文件夹的引用，以及在企业开发中的注意事项，强调了使用反斜杠/的重要性及避免绝对路径的可移植性问题。

文章目录

路径问题

路径问题

给src属性赋值有两种方式

1.通过相对路径赋值

相对路径就是每次都从.html文件所在的文件夹开始查找，我们称之为相对路径。

同级

同级情况下，图片和.html文件存储在同一个文件夹中
格式：src=“2021.png”

下级

下级就是存储图片的文件夹和.html文件在同一个文件夹中
格式：src=“images/2021.png”
含义是在.html文件所在的文件夹中找到名称叫做images的文件夹，然后再在images文件夹中找到名称叫做2021.png的图片。

上级

上级就是存储图片的位置和存储代码的文件夹在同一个文件夹中
格式：src="…/2021.png"
含义是在.html文件所在的文件夹中找到这个文件夹的上一级文件夹，然后再在上一级文件夹中找到名称叫2021.png，其中**…/**代表从当前位置找到上一级文件夹

2.通过绝对路径赋值（了解）

绝对路径就是每次从指定的盘符开始查找
格式：src=“C:\Users\Ver\Desktop\HTML\demo\2021.png”
含义是在c盘下找到users文件夹，然后在ver文件夹中找到desktop文件夹，以此类推，最终在demo文件夹中找到名称为2021.png的图片

注意点

以后企业开发中需要编写路径，统一使用反斜杠/，不要使用正斜杠
因为将来我们开发的程序可能会部署到其他操作系统的服务器上，而在其他操作系统中路径都是/,所以如果写的不是/，可能会引发一些问题；
在企业开发中一般不会使用绝对路径，因为可移植性不好，也就是说将你写好的代码拷贝给别人，别人可能就不能运行了。

<body>
<!--
注意点：
-以后企业开发中需要编写路径，统一使用反斜杠/，不要使用正斜杠\
因为将来我们开发的程序可能会部署到其他操作系统的服务器上，而在其他操作系统中路径都是/,所以如果写的不是/，可能会引发一些问题
-在企业开发中一般不会使用绝对路径，因为可移植性不好，也就是说将你写好的代码拷贝给别人，别人可能就不能运行了。
-->

<!--相对路径 同级-->
<img src="0.jpg">
<!--相对路径 下级-->
<img src="images/1.jpeg">
<!--相对路径 下下级-->
<img src="images/a/2.jpg">
<!--相对路径 下下下级-->
<img src="images/a/b/3.jpg">
<!--相对路径 上级-->
<img src="../4.jpg">
<!--相对路径 从上上级找c文件夹再找图片-->
<img src="../../c/5.jpeg">

<hr>

<!--绝对路径-->
<!--同级-->
<img src="C:\Users\Ver\Desktop\HTML\作业\02-路径练习\test\demo/0.jpg">
<!--下级-->
<img src="C:\Users\Ver\Desktop\HTML\作业\02-路径练习\test\demo\images/1.jpeg">
<!--下下级-->
<img src="C:\Users\Ver\Desktop\HTML\作业\02-路径练习\test\demo\images/a/2.jpg">
<!--相对路径 下下下级-->
<img src="C:\Users\Ver\Desktop\HTML\作业\02-路径练习\test\demo\images/a/b/3.jpg">
<!--相对路径 上级-->
<img src="C:\Users\Ver\Desktop\HTML\作业\02-路径练习\test/4.jpg">
<!--相对路径 从上上级找c文件夹再找图片-->
<img src="C:\Users\Ver\Desktop\HTML\作业\02-路径练习\c/5.jpeg">
</body>