【web前端】相对路径和绝对路径详解
一、绝对路径
绝对路径：
绝对：真真地存在你电脑上的实际路径。比如你的window系统的C盘下有个ABC文件夹，ABC文件夹下有个file文件。那么绝对路径：C:\ABC\file
二、使用绝对路径的缺点
事实上，在编程时，很少会使用绝对路径，比如你在Window系统上写了个XX系统，需要使用“E:\book\网页布局\1.jpg”来指定背景图片的位置，在自己的计算机上使用绝对路径浏览可能会一切正常，但是将系统代码文件和背景图文件上传到Web服务器(常常是Linux系统，可能不存在C,D,E盘)上部署系统时浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个系统并没有放在Web服务器的E盘，有可能是D盘或H盘。甚至可能web服务器根本就没有E盘，即使放在Web服务器的E盘里，Web服务器的E盘里也不一定会存在“E:\book\网页布局\1.jpg”这个目录，因此在浏览网页时会找不到该背景图，然后不会显示图片。
三、相对路径
为了避免这种情况的发生，通常在网页系统上指定文件时，都会选择使用相对路径。所谓相对路径，就是相对于自己的目标文件位置。例如上面的例子，XX系统里引用了“1.jpg”图片，我们上传系统代码时，将XX系统代码和1.jpg放在同一个文件夹上传到web服务器，由于“1.jpg”图片相对于XX系统代码文件来说，是在同一个目录的，那么要在XX系统的代码文件里使用该1.jpg图后，只要这两个文件的相对位置没有变(也就是说还是在同一个目录内)，那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。这里XX系统需要使用1.jpg时用的相对路径就为： background = " 1.jpg " 即可
再举一个例子，假设某个系统的“index..html”文件所在目录为“E:\book\网页布局\”，而“bg.jpg”图片所在目录为“E:\book\网页布局\img下”，那么“bg.jpg”图片相对于“index.html”文件来说，是在其所在目录的“img”子目录里，则引用图片的语句应该为：
<body background="img/bg.jpg">
注意：相对路径使用“/”字符作为目录的分隔字符，而绝对路径可以使用“\”或“/”字符作为目录的分隔字符。由于“img”目录是“第2章”目录下的子目录，因此在“img”前不用再加上“/”字符。
四、相对虚拟目录
有关相对路径还有一个比较特殊的表示：“相对虚拟目录”。请看下面的例子：
<body background="/img/bg.jpg">
在这个例子里，background属性的值为“/img/bg.jpg”，注意在“img”前有一个“/”字符。这个“/”代表的是虚拟目录的根目录. 假设把“E:\book\网页布局\”设为虚拟目录，那么“/img/bg.jpg”的真实路径为“E:\book\网页布局\img \bg.jpg”；
如果把“E:\book\网页布局\代码\”设为虚拟目录，那么“/img/bg.jpg”的真实路径为“E:\book\网页布局\代码\\img\bg.jpg”
【web前端】相对路径和绝对路径详解相关推荐
- 《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节
本节书摘来自异步社区<Web前端开发精品课--HTML5 Canvas开发详解>一书中的第1部分,第2章,作者:莫振杰 著,更多章节内容可以访问云栖社区"异步社区"公众 ...
- web前端vertical-align的作用及对象详解
很多程序员知道web前端技术里的vertical-align是什么意思,但是对于vertical-align到底以什么为对齐标准却一知半解,今天我们就来说说web前端vertical-align. 1 ...
- 局部路径规划器teb_local_planner详解3：跟随全局planner
局部路径规划器teb_local_planner详解3:跟随全局planner 前言 一.相关优化项 二.与topologies相关的参数 前言 在局部路径规划器teb_local_planner详解 ...
- 局部路径规划器teb_local_planner详解6：关于动态障碍物与常见问题
前言 在局部路径规划器teb_local_planner详解5:关于car-like robots中,我们介绍了与car-like机器人模型相关的参数,说明了在对接底盘的时候需要注意底盘接收的控制指令 ...
- 局部路径规划器teb_local_planner详解5：关于 robots models
前言 局部路径规划器teb_local_planner详解4:关于代价地图中,我们介绍了如何使用costmap_converter 本章,我们来详细看下,对于不同的robot model ,teb是如 ...
- 前端基础-HTML的的标签详解
阅读目录 一.head内常用标签 二. HTML语义化 三. 字符实体 四. h系列标签 五. p标签 六. img标签 七. a标签 八. 列表标签 九. table标签 十. form标签 一. ...
- 降低游戏陪玩平台系统前端开发复杂度的方式详解
优秀的程序员总是能优雅的组织自己的代码,编写思路清晰,组织结构划分合理,从小的功能组件,到大的模块结构,都能通过合理巧妙的搭配,化复杂为简单,并且提升游戏陪玩平台系统运行效率,提高游戏陪玩平台系统代码 ...
- [转帖]ASP.NET Core Web服务器 Kestrel和Http.sys 特性详解
ASP.NET Core Web服务器 Kestrel和Http.sys 特性详解 https://www.cnblogs.com/vipyoumay/p/7525478.html ASP.NET C ...
- 前端html小技巧—input标签详解
今天分享下前端html小技巧-input标签详解 ,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧. 定义和用法 inp ...
- python中filepath路径怎么写_详解Python中的路径问题
1. 绝对路径引入 Python 在搜索模块时,依次搜索sys.path里的位置,直到找到模块为止.下面命令可以查看当前的搜索路径: import sys print(sys.path) sys.pa ...
最新文章
- 外部NORFlash是第一个以硬件为基础的信任
- 025_Tree树形控件
- mybatis中常见的坑
- 解决zip包安装python pip的安装问题
- 127. Word Ladder 单词接龙
- JAVA学习：maven开发环境快速搭建How to download J2EE API (javaee.jar) from Maven
- SAP ABAP bcset激活时，关联的数据库表条目是如何插入的
- 配对交易方法_COVID下的自适应配对交易，一种强化学习方法
- 【计蒜客信息学模拟赛1月月赛 - D】Wish（dp计数，数位）
- 原根(详解+代码实现+例题+快速求解一个数的原根)
- 《SSM框架实战》 整合 Freemarker
- 韦东山freeRTOS系列教程之【第一章】FreeRTOS概述与体验
- 软件测试 PreDay 决策表
- 读懂以太坊的客户端多样性，为何如此重要？
- Python用requests库+BeautifulSoup库+re库获取微博热搜（有详解）
- 如何设置chrome google浏览器字体
- 单点登录、统一认证解决方案（一）
- IDEA新推出的优雅美观字体初体验（赏心悦目）——JetBrainsMono
- js字符串转驼峰命名
- AuToCAD启动自定义加载程序研究（转）