如何理解相对路径和绝对路径

最新推荐文章于 2022-12-13 14:27:55 发布

美女变成老太婆✿

最新推荐文章于 2022-12-13 14:27:55 发布

阅读量240

点赞数

分类专栏： HTML基础文章标签： html

本文链接：https://blog.csdn.net/weixin_47788265/article/details/106617714

版权

HTML基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

了解基础概念：

1.目录文件夹：此文件夹中包含我们所需要用到的所有元素、比如图片、视频等

2.根目录：目录文件夹的第一层，即为根目录

如图：

相对路径：

所谓相对，即指同一个网站下，不同文件之间的的位置定位

1.同一级路径：

代码：

同一级路径时，直接写图片的名字即可引用

<!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="t1.gif" />
</body>
</html>

2.下一级路径：

代码：

<!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="images/t1.gif" />
</body>
</html>

3.上一级路径：

在文件夹前加入“../” 上两级的话就加入“../../”，依此类推

代码：

<!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="../images/t1.gif" />
</body>
</html>

绝对路径：

语法格式：I:\Webdesign\Website_0604\today\images\t1.gif 或者完整的网络地址 https://www.baidu.com/

了解即可，实际使用中建议都用相对路径，若使用绝对路径，往往解析不出，无法显示图片