网页中的相对路径和绝对路径

路径

在前端页面中,图片会非常的多,通常我们会新建一个文件夹来存放这些图像文件images,这时候在查找图像时就需要通过路径来描述图像文件的位置。

路径可以分成,相对路径和绝对路径

相对路径

概述:相对路径是只有这个文件所在位置为参考基础,而建立初的目录关系,常用的相对路径包括当前目录,上一级目录,下一级目录

  • 当前目录
    • 语法:一个点(.)后面跟一个斜杠表示当前目录也就是当前文件所在目录。    
<img src="pic.png" alt="">
<img src="./pic.png" alt="">     <!-- ./ 可以省略 -->
  • 上一级目录
    • 语法:两个点(.)后跟一个斜杠表示当前文件所在目录的上一级目录        
 <img src="../pic2.png" alt="">
  •  下一级目录
    • 语法:一个斜杠,表示图像文件位于HTML文件下一级
<img src="images/pic3.png" alt="">

 绝对路径

绝对路径文件在目录中的绝对位置完整描述,常见的绝对路径是一种尤其在网络上的绝对位置定义的位置,一种是本地从盘符出发的绝对位置

<img src="D:\webset\images\denglun.jpg" alt="">
  • 特点:绝对URL始终指向同一位置,无论在何处使用 

注意:在链接到同一网站被的其他位置时,应尽可能使用相对链接。链接到另一个网站时,需要使用绝对链接。 

### 网页相对路径绝对路径的区别及用法 #### 定义与概念 在Web开发环境中,文件路径用于指定资源的位置。两种主要类型的路径分别是绝对路径相对路径。 - **绝对路径**定义为带有域名的文件完整路径[^1]。这种路径提供了从任何位置访问特定文件的能力,因为它包含了完整的URL地址。例如,在HTML文档中通过`<img src="http://example.com/images/picture.jpg" alt="flower">`来引用片即使用了绝对路径。 - **相对路径**则表示基于当前页面或脚本所在位置与其他文件之间的关系。这种方式更加灵活,因为当整个项目移动时不需要更改链接,只要保持各部分间的结构不变即可正常工作。如`<a href="../about.html">关于</a>`展示了如何利用相对路径导航至不同层次下的其他网页。 #### 使用方法比较 对于**绝对路径**而言: - 总是以协议(通常是HTTP或HTTPS)开头; - 后面跟随主机名以及具体的文件路径; - 不依赖于源文件的具体存放地点; 而对于**相对路径**来说, - 如果目标在同一级目录下可以直接写文件名; - 若需向上一层或多层,则可借助两个点加斜杠(`..`)的形式返回父级直至找到所需层级再向下定位具体文件; - 当涉及到子文件夹内的资源调用只需按顺序添加各级名称直到最终目的物为止。 ```html <!-- 绝对路径示例 --> <img src="https://www.example.com/assets/logo.png"> <!-- 相对路径示例 --> <link rel="stylesheet" type="text/css" href="./styles/main.css"> <a href="../../index.html">首页</a> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值