通过昨天的学习内容,我们引入一个新的词语,那就是相对路径,什么是相对路径呢?路径又分为那些种类呢?小陈老师带你解读。
在学习HTML的img标签时,需要将图片的地址引入到文件中,这个时候好多同学,都会感觉有些犯难。
因为引入了总是不对,页面中显示了图片,但是并不是我想要展示的图片。
同学们看到的会是上边的一种展现方式,感觉有一个图片,但是又不是自己的,上边的展示代表的含义是“图片引入未成功”
如何可以正确引入图片呢?下面来看小陈老师的路径解读。
0 1相对路径什么是相对路径?
单说这个名词,同学们可以会有些疑惑,如果小陈老师提出:参照物这个概念,好多同学就会恍然大悟,这是物理上的一个名词。和这个相对路径很相似。
相对路径:就是参照某一个文件,对图片进行引入。
小陈老师做了一个大致的目录结构,我们可以看一下:
在这个目录结构中,有两个文件,一个是gif的图片,一个是html的网页文件。
我们如何把这个图片引入到html文件中呢?谁又是那个参照物呢?
这个非常好获取参照物,要把图片引入到img.html文件中,那么img.html就是那个参照物,要参照他来写路径。
现在图片和img.html在同一个目录下,在写的时候,只需要写同级就可以,如图:
图片引入
小陈老师用了两种写法,最后的结构都是将图片进行了引入到了html中。展示的效果如图:
这两种有什么区别么?其实没有区别。
在相对路径中,有三个特殊含义的字符,分别是“./”、"../"和”/“。
./:代表的当前目录../:代表的是上一级目录/:代表跟目录,在win下指的是c盘,在linux下是跟目录,基本不用
这个知识很重要,同学们要记住奥!
上边小陈老师已经展示了“./”的使用案例,下边小陈老师展示一个“../的使用案例”。
我们先把基础的目录结构稍微改变一下。
在html下面,包含的是img.html,在img下面包含gif图片,这时候我们相对,img.html如何引入图片呢?
首页找好参照物,然后找好两个文件,在哪一级是同一个父级。
参照物还是img.html文件,相同的父级是”图片引入“这级目录。
第一步:如何从img.html所在的文件下,走到”图片引入“这一级。
通过目录结构我们可以发现,我们只要后退一级就可以了,那如何在代码中体现后退呢?用”../“就可以了,一个”../“代表后退一级。
走到了共同的父级下,如何找到图片呢,需要进入img目录下,进入某一个文件夹下,直接写文件夹的名字就可以了。
所以最后引入的写法是这样的:
图片引入
这样图片就引入成功了。
相对路径的使用你学会了吗?没有的话,欢迎前来咨询小陈老师奥!
0 2绝对路径什么是绝对路径呢?
绝对路径就是固定的一个目录,说白了就是一个死目录。
我们引入gif图片的绝对路径如何写呢?
非常简单,直接拷贝目录结构即可。
直接复制圈红的内容,加上文件的字写入文本框下就可以了。
图片引入
0 3 网络路径
什么是网络路径呢?
指的是通过http协议进行访问的路径。
例如我们通过百度图片复制的图片地址:
https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595415566824&di=4f03c7d35b7d35c3572f9eee7b86898e&imgtype=0&src=http%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D3616242789%2C1098670747%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D900%26h%3D1350
这就是网络路径,网络路径可以直接放在src文件夹下,然后图片即可正常显示。
图片引入
0 4 三者之间的区别
绝对路径和相对路径有什么区别呢,一个是固定地址一个是相对地址。
可能同学们心中会想,绝对路径多么简单,不用去找关系。
但是绝对路径是有弊端的,当我们复制自己的项目给其他人的时候,不是只给一个html文件,是把html包含的其他内容也提供的。
这时候我们需要压缩的文件是图片引入这个文件夹。
针对相对路径,图片还能正常显示,但是绝对路径就不会正常显示了,因为图片虽然还是在图片引入的img文件夹下,但是别人不一定是放在D盘下的个人资料文件夹下奥!
所以在写路径的时候,一定要使用相对路径奥!
那网络路径和相对路径应该使用那个呢?
两个都可以使用。
网络路径的优点是不占用本地资源,缺点是当路径不能访问了,页面中的图片也就丢失了。
相对路径的优点就是图片永远都能访问,缺点是占用本地硬盘和带宽。
所以这三者的使用,要根据具体场景奥!
这个小的知识点,同学们学会了吗?没有懂的环境来咨询小陈老师奥!
在学习过程中,遇到问题欢迎咨询小陈老师
想要跟小陈老师学编程很简单,只要关注公众号就能跟小陈老师一起学习编程,赶紧关注吧!