HTML 相对路径和绝对路径

叁歲伎倆 2024-05-31 05:51 92阅读 0赞

绝对路径和相对路径的理解一直是很多同学的难点，

绝对路径是和当前html文件无关的一个路径，例如，D:/myvscode/project002/images/1.jpg

相对路径，是说从当前的html文件出发，从什么路径能够到达img或者html等等资源文件的路径。

例如，images/1.jpg ，表示从当前html的目录先进入到子目录images，然后就能找到1.jpg文件

下图为一个简单网站的目录结构，project目录下有about、htmls、images 3个子目录，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70][]

*  ### **index.html****中**： ###

1.  如果要访问4.jpg，index.html文件和要访问的4.jpg是同目录的，可以直接访问。

所以路径为： 4.jpg

2. 如果要访问1.jpg，则先要从index.html文件所在的目录进入images子目录，然后就可以访问1.jpg了。

所以路径为： images/1.jpg

![20200928225006690.png][]

###  ###

### **About.html中：** ###

1.  如果about.html要访问4.jpg，那么需要先进入到父目录“project”，然后就可以访问4.jpg, “..”表示父目录。

所以路径为：../4.jpg

2. 如果要访问1.jpg，则先要从about.html文件所在的目录先进入父目录，然后进入images子目录，然后就可以访问1.jpg了。

所以路径为： ../images/1.jpg

![2020092822505583.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2hvbmd4aW5n_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/19959bb5251749acb194a8158b1867c6.png
[20200928225006690.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/88919d6494a54aec942a7f832d5c544f.png
[2020092822505583.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/31/5394b103f45f469c973de6ecb7e08540.png

发表评论取消回复

表情：

评论列表（有 0 条评论，92人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML 相对路径和绝对路径

绝对路径和相对路径的理解一直是很多农学的难点，绝对路径是和当前html文件无关的一个路径，例如，D:/myvscode/project002/images/1.jpg相对...

叁歲伎倆/ 2024年05月31日 05:51/ 0 赞/ 93 阅读

相关相对路径和绝对路径HTML目录问题

基础 HTML之目录问题(相对路径和绝对路径区别) 相对路径-以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用

Dear 丶/ 2022年07月24日 05:18/ 0 赞/ 183 阅读

相关绝对路径，相对路径，和根路径

关于链接的路径，网页中的超链接按照链接的路径可以分为绝对路径，相对路径，和根路径。 1.绝对路径绝对路径为文件提供完全的路径，包括使用的协议（如HTTP,FTP,R

梦里梦外;/ 2022年07月12日 09:21/ 0 赞/ 316 阅读

相关相对路径和绝对路径

一.相对路径 1. 加 ./ 指向当前目录(比直接写好一些) <===> 当前目录如： ./project/image/demo.jpg <===> pr

柔情只为你懂/ 2022年05月27日 03:23/ 0 赞/ 298 阅读

相关绝对路径和相对路径

[绝对路径][Link 1]：是从盘符开始的路径，形如 C:\\windows\\[system32][]\\cmd.exe [相对路径][Link 2]：是从当前路径

╰半夏微凉°/ 2022年05月18日 04:55/ 0 赞/ 311 阅读

相关相对路径、绝对路径

欢迎大家访问我的个人博客：[http://rushskh.club/][http_rushskh.club] 路径分为两种：相对路径和绝对路径相对路径：相对于项目而言的路

本是古典何须时尚/ 2022年02月26日 19:26/ 0 赞/ 417 阅读

相关 HTML相对路径与绝对路径

HTML初学者会经常遇到这样一个问题，如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片

矫情吗；*/ 2022年01月16日 10:15/ 0 赞/ 329 阅读

相关绝对路径和相对路径

[System.IO][] 命名空间中很多类型的成员都包括 `path` 参数，让你可以指定指向某个文件系统资源的绝对路径或相对路径。此路径随后会传递至 [Windows 文

偏执的太偏执、/ 2021年09月30日 16:22/ 0 赞/ 453 阅读

相关绝对路径，相对路径

绝对路径 Web文件访问的基本格式如下：协议://主机:端口/应用名/文件夹名/文件协议：这里应该是http协议；主机：是运行Web应用的服务器的地址，可以使

亦凉/ 2021年09月18日 08:26/ 0 赞/ 549 阅读

相关相对路径和绝对路径

去一个地方，首先要明确到达此地的路径。编程也是如此，要加载图片或者引入其他代码文件，也需要设置正确的路径。路径分为绝对路径与相对路径：

小灰灰/ 2020年05月16日 16:14/ 0 赞/ 972 阅读