HTML中相对路径的用法

大体可分为三种情况:

1. 在相同的目录中时:

源文件地址: c:/website/web/index.html
被引用文件地址:c:/website/web/photo.jpg
写法:<a href = "photo.jpg">对应图片</a>
即:photo.jpg
直接输入文件名,表示被引用文件与源文件位于同一目录下

2. 被引用文件比源文件所在目录等级低时,找到被引用文件所在的子目录:

源文件地址: c:/website/index.html
被引用文件地址:c:/website/img/photo.jpg
写法:<a href = "img/photo.jpg">对应图片</a>
即:img/photo.jpg

3. 被引用文件比源文件所在目录高时:

3.1 被引用文件比源文件所在目录高一级时:
源文件地址: c:/website/web/ceshi/index.html
被引用文件地址:c:/website/web/photo.jpg
写法:<a href = "../photo.jpg">对应图片</a>
即:../photo.jpg
../ 表示源文件的上一级目录,即c:/website/web/

3.2 被引用文件比源文件所在目录高两级时:
源文件地址:c:/website/web/xz/index.html
被引用文件地址:c:/website/img/images/photo.jpg
写法:<a href = "../../img/images/photo.jpg">对应图片</a>
即:../../img/images/photo.jpg
../../ 表示源文件的上上一级目录,即c:/website/

猜你喜欢

转载自blog.csdn.net/fanyong245758753/article/details/105406942
今日推荐