`
qxmcool
  • 浏览: 90840 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

相对路径※绝对路径

阅读更多
如果您刚刚开始接触网页设计,是不是经常发生这样的问题呢?做好的网页在自己机器上可以正常浏览,而把页面传到服务器上就总是出现看不到图片,css样式表失效等错误。这种情况下多半是由于你使用了错误的路径,在应该使用相对路径的地方使用了绝对路径,导致浏览器无法在指定的位置打开指定的文件。

  下面我们就来谈一下最让初学者头疼的相对路径与绝对路径的区别问题。

  什么是绝对路径:

  大家都知道,在我们平时使用计算机时要找到需要的文件就必须知道文件的位置,而表示文件的位置的方式就是路径,例如只要看到这个路径:c:/website/img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似以http://www.pckings.net/img/photo.jpg来确定文件位置的方式也是绝对路径。

  另外,在网站的应用中,通常我们使用"/"来表示根目录,/img/photo.jpg就表示photo.jpg文件在这个网站的根目录上的img目录里。但是这样使用对于初学者来说是具有风险性的,因为要知道这里所指的根目录并不是你的网站的根目录,而是你的网站所在的服务器的根目录,因此当网站的根目录与服务器根目录不同时,就会发生错误。
  什么是相对路径:

  让我们先来分析一下为什么会发生图片不能正常显示的情况。举一个例子,现在有一个页面index.htm,在这个页面中联接有一张图片photo.jpg。他们的绝对路径如下:
  c:/website/index.htm
  c:/website/img/photo.jpg

  如果你使用绝对路径c:/website/img/photo.jpg,那么在自己的计算机上将一切正常,因为确实可以在指定的位置即c:/website/img/photo.jpg上找到photo.jpg文件,但是当你将页面上传到网站的时候就很可能会出错了,因为你的网站可能在服务器的c盘,可能在d盘,也可能在aa目录下,更可能在bb目录下,总之没有理由会有c:/website/img/photo.jpg这样一个路径。那么,在index.htm文件中要使用什么样的路径来定位photo.jpg文件呢?对,应该是用相对路径,所谓相对路径,顾名思义就是自己相对与目标位置。在上例中index.htm中联接的photo.jpg可以使用img/photo.jpg来定位文件,那么不论将这些文件放到哪里,只要他们的相对关系没有变,就不会出错。

  另外我们使用“../”来表示上一级目录,“../../”表示上上级的目录,以此类推。(学习过dos的朋友可能更容易理解)

  再看几个例子,注意所有例子中都是index.htm文件中联接有一张图片photo.jpg。

  例:
  c:/website/web/index.htm
  c:/website/img/photo.jpg
  在此例中index.htm中联接的photo.jpg应该怎样表示呢?
  错误写法:img/photo.jpg
  这种写法是不正确的,在此例中,对于index.htm文件来说img/photo.jpg所代表的绝对路径是:c:/website/web/img/photo.jpg,显然不符合要求。
  正确写法:使用../img/photo.jpg的相对路径来定位文件


  例:
  c:/website/web/xz/index.htm
  c:/website/img/images/photo.jpg
  在此例中index.htm中联接的photo.jpg应该怎样表示呢?
  错误写法:../img/images/photo.jpg
  这种写法是不正确的,在此例中对于index.htm文件来说../img/images/photo.jpg所代表的绝对路径是:c:/website/web/img/images/photo.jpg。 
  正确写法:可以使用../../img/images/photo.jpg的相对路径来定位文件


  例:
  c:/website/web/xz/index.htm
  c:/website/web/img/photo.jpg
  在此例中index.htm中联接的photo.jpg应该怎样表示呢?
  错误写法:../../img/photo.jpg
  这种写法是不正确的,在此例中对于index.htm文件来说../../img/photo.jpg所代表的绝对路径是:c:/website/img/photo.jpg。
  正确写法:可以使用../img/photo.jpg的相对路径来定位文件


  总结:通过以上的例子可以发现,在把绝对路径转化为相对路径的时候,两个文件绝对路径中相同的部分都可以忽略,不做考虑。只要考虑他们不同之处就可以了。

  如何修改样式表的路径:

  使用文本编辑器打开htm文件,查看源代码,在源代码的开头部分<head>......</head>标记中间找到<link rel="stylesheet" href="../../test.css" type="text/css">。“Href=../../”后面的内容就是css的路径,我们可以根据以上的知识进行相对路径的转换。

  例:
  c:/website/web/xz/index.htm
  c:/website/css/test.css
  在此例中index.htm中联接test.css文件,可以使用../../css/test.css的相对路径来定位文件,完整的代码标记是:<link rel="stylesheet" href="../../../../css/test.css " type="text/css">
  错误写法举例:../../../css/test.css
  这种写法是不正确的,在此例中对于index.htm文件来说../../../css/test.css所代表的绝对路径是:c:/css/test.css

  最后,为了避免在制作网页时出现路径错误,我们可以使用dreamweaver的站点管理功能来管理站点。只要使用菜单命令site-new site新建站点并定义站点目录之后,它将自动的把绝对路径转化为相对路径,并且当你在站点中移动文件的时候,与这些文件关联的连接路径都会自动更改,实在是非常的方便。

分享到:
评论

相关推荐

    网络编程网络编程网络编程

    网络编程网络编程网络编程网络编程

    setuptools-5.4.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    基于树莓派智能小车(H5页面操作移动+实时显示摄像头内容+各类传感器)源码+详细文档+全部资料齐全 高分项目.zip

    【资源说明】 基于树莓派智能小车(H5页面操作移动+实时显示摄像头内容+各类传感器)源码+详细文档+全部资料齐全 高分项目.zip基于树莓派智能小车(H5页面操作移动+实时显示摄像头内容+各类传感器)源码+详细文档+全部资料齐全 高分项目.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    2024-01-03-【办公自动化】Python执行Windows命令.md

    2024-01-03-【办公自动化】Python执行Windows命令

    基于FPGA的FS-FBMC调制器的设计源码+全部资料齐全.zip

    【资源说明】 基于FPGA的FS-FBMC调制器的设计源码+全部资料齐全.zip基于FPGA的FS-FBMC调制器的设计源码+全部资料齐全.zip 【备注】 1、该项目是高分课程设计项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过mac/window10/11/linux测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也可作为课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    MySQL进阶篇学习笔记

    黑马MySQL课程总结的学习笔记

    setuptools-41.1.0.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    张祖豪-软件工程师-职业规划.pdf

    张祖豪-软件工程师-职业规划.pdf

    智慧工地整体解决方案qy.pptx

    智慧工地整体解决方案qy.pptx

    setuptools-49.1.1-py3-none-any.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    setuptools-40.1.1.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    基于FPGA设计的电梯控制电路系统源码+全部资料齐全.zip

    【资源说明】 基于FPGA设计的电梯控制电路系统源码+全部资料齐全.zip基于FPGA设计的电梯控制电路系统源码+全部资料齐全.zip 【备注】 1、该项目是高分课程设计项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过mac/window10/11/linux测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也可作为课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    全系统实战营销课,从小白到营销高手

    课程内容: 将成功建立在问题基层上 不做第- 就做唯一 新切割营销 品牌4s战略-构建高效强势品牌 智慧底牌-成功背后的10大思维方式 切割营销将对手通向一侧的营销策略 营销绝对竞争力 品牌突破 切割营销 企业家修炼-第九届学习型中国世纪成功论坛 如何创造七种动力进行整合营销 营销品牌教材 林伟贤董进宇姜岚昕演讲-第八届学习型中国世纪成功论坛 内部报告:处理人生10种关系智慧 高效构建强势品牌 营销纲领(首部谋定未来的营销大典)1~4

    基于SpringBoot+Vue的酒店(预约)客房管理系统的设计与实现+毕业论文(包运行成功)

    酒店客房管理系统为酒店管理者和用户、清洁人员提供一个在线管理酒店客房的系统。在网站的设计中,一共分为了两个模块设计,一个是前台模块,一个是后台模块,前台主要用于提供查看客房信息,酒店资讯,留言反馈,个人中心,在线客服等一系列的功能,后台会根据等于角色的不同分配不同的权限,如果登录的是管理员角色的话,则有管理员个人信息管理,用户管理,客房管理,清洁管理,系统管理等,如果登录的是用户角色的话,则有用户个人信息管理,预约管理,入住管理,收藏管理等,如果登录的是清洁人员角色的话,,则有清洁人员个人信息管理,退房管理,清洁管理等。 整个后台系统的大致功能如图1所示,整个后台系统分为两个部分,一部分为用户端,一部分为管理端,用户端的功能主要是用户来进行房屋预约,房屋入住,房屋收藏,浏览反馈,在线咨询。管理端也分三类角色的管理,管理员角色,用户角色,清洁人员角色,对应的角色不同,相应的对应的管理端也不同。

    IDC智能机房整体解决方案.ppt

    IDC智能机房整体解决方案.ppt

    setuptools-25.4.0.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    setuptools-0.8.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    电子行业周报:华为召开鸿蒙生态春季沟通会,智界S7与MateBook X Pro焕新亮相.pdf

    电子元件 电子行业 行业分析 数据分析 数据报告 行业报告

    PasteSpider的管理端静态页面V24.5.12.1(主服务端和文件同步器版本至少要24.5.12.1及以上版本)

    当前文件需要和PasteSpider配套使用, 配套的还有PasteSpiderFile(文件同步管理器), 和PasteSpider的主端(一款类似K8S的容器管理工具)。 当前版本为大版本升级,需要和配套的其他端的版本使用,否则出现访问错误等! 把当前文件解压后,放于服务器上,或者是方入PasteSpider的解压缩里面的wwwroot文件夹下。 个人建议独立存放,因为PasteSpider是需要打包到docker的镜像里面的,存放于宿主服务器上便于修改! 当前版本修改内容主要如下: 1.数据的获取修改为get模式,后续会基于http的method做一些特定的日志记录,大致的思路是get只做简单的校验,post做强校验并记录日志等。 2.定时任务添加任务串的支持,比如需要发布一个项目中的几个服务,他们有执行顺序,只需要把上一个任务的ID作为当前任务的父级ID即可, 3.静态服务(一般是web静态端不需要构建的),支持暂存模式,配合定时发布使用! 更多PasteSpider资料访问 https://blog.csdn.net/apeart/category_12291787.html

    setuptools-25.1.3.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

Global site tag (gtag.js) - Google Analytics