记录经常要用到的相对路径与绝对路径详解

2017年10月14日 评论 1,154 742字阅读2分28秒

表示文件路径的方式有两种,相对路径绝对路径。在网页设计中通过路径可以表示链接,插入图像、Flash、CSS文件的位置。

相对路径:以当前文件所在位置为参考点,而建立出的目录路径。

绝对路径:以Web 站点根目录为参考点的目录路径。不管怎么引用,都只有一个url,如https://www.daniao.org。

先来看 相对路径:

表示同级目录文件的引用

2.html和3.html在同一个文件夹下, 如果2.html链接到3.html,可以在2.html中这样写:

<a href="3.html">同目录下文件间的引用/a>

表示上级目录的引用

1.html是2.html和3.html的上级目录中的文件,如果2.html或3.html链接到1.html,可以在2.html或3.html中这样写

<a href="../1.html">链接到上级目录中的文件</a>

../ 代表一级上级目录(间隔一个目录) ../../代表二级上级目录(间隔两个目录),比如4.html链接到1.html,可以在4.html中这样写

<a href="../../1.html">链接到上级目录的上级目录中的文件</a>

表示下级目录的文件

2.html和3.html是1.html的下级目录中的文件,如果在1.html中链接到2.html, 可以在1.html中这样写

<a href="first/2.html">链接到下级目录(first)中的文件</a>

如果在1.html中链接到4.html,可以在1.html中这样写

<a href="first/second/4.html">链接到下级目录(first/second/)中的文件</a>

绝对路径就很简单,只要引用url就可以了,就不再多说。

大鸟经常要用到,有个参考会好很多!

  • 我的微信
  • 分享宝塔面板建站技术交流等!
  • weinxin
  • 微信公众号
  • 关注本博公众号
  • weinxin
大鸟
chrome插件:bilibli图床、微博图床 WEB前端

chrome插件:bilibli图床、微博图床

图床很多是网站版本,如果有chrome插件版本的会更方便,群里大神推荐说有bilibli图床和微博图床的chrome插件版本。赶紧去试用一番,效果很不错。 这篇文章就来分享下这两个插件,如果在和以前大...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: