网页设计与制作（活页式） 课件 情景3-3 绝对路径和相对路径

网页设计与制作绝对路径和相对路径授课教师：胡文利JavaScriptCSSHTMLHTML目录CONTENTS12学习目标知识讲解3练一练4小结学习目标01学习目标学习目标01认识绝对路径和相对路径学习目标02了解掌握绝对路径和相对路径02知识点讲解1、认识绝对路径和相对路径1.1绝对路径第一绝对路径：是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“D:\(反斜杠)qjs\img”目录下，那么“bg.jpg”这个图片的绝对路径就是“D:\qjs\img\bg.jpg"。如果要使用绝对路径指定图片的位置，可以使用如下语句：

<imgsrc=“D:\qjs\img\bg.jpg”/>知识点讲解当我们在实际网页编程时，不建议使用绝对路径如果使用“D:\qjs\img\bg.jpg”来指定背景图片的位置，在网页设计者的本地计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的D盘，有可能是E盘或H盘，因此在浏览网页时图片就会显示不出来。相对路径：即相对于本文本的目标文件位置。例如上面的练一练，“3-2.html”文件里引用了“img01.jpg”和“img02.jpg”两张图片，由于这两张图片所在的文件夹“img”相对于“3-2.html”来说，是在同一个目录里（都在文件夹“情景三”里面），那么要在“3-2.html”文件只需要在当前的目录里找到“img”文件夹，然后就可以通过“img”文件，找到里面的图片。1.2相对路径1.2相对路径使用相对路径的好处在于，只要“3-2.html”和文件夹“img”的位置没有变（也就是说还是在同一个目录“情景三”内），那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。显示效果如练一练。需要注意的是：相对路径使用两个标记“.”和“..”分表代表当前目录和上一层目录。当前目录“.”可以省略，例如img所在的当前位置为./img可以写成img；上级目录则是：../img，即“情景三”所在的位置。<imgsrc="img/img01.jpg"width="300px"height="300px"hspace="35px"/>03练一练练一练相对路径实例img01.jpg

这张图片所在的文件夹“img”相对于“3-2.html”来说，是在同一个目录里（都在文件夹“情景三”里面）img01.jpg的相对路径为：img\img01.jpg练一练相对路径实例运行效果如图所示：练一练绝对路径实例因情景三文件夹在硬盘上真正路径是在桌面即：C:\Users\Administrator\Desktop所以img01.jpg的绝对路径为：C:\Users\Administrator\Desktop\情景三\img\img01.jpg绝对路径和相对路径两者的区别绝对路径是指可以从这个路径上查找文件夹，不管是从外部或内部存取。而相对路径则是与它本身相关的，其它地方的档案和路径，则只能在内部存取。3相对路径，指的是与自身的目标档案相关的位置。2绝对路径是一个文件实际存在于硬盘中的路径。104小结小结本节内容讲解了文件的绝对路径和相对路径，以上节课抗疫宣传海报的路径作为案例分析。请大家在课后对本节知识点进行复习，通过搜索学习强国官网的青春中国、教育、科技、大自然等栏目图像资料，自己动手制作红色教育、绿水青山、科技强国、防疫抗疫等类似于抗疫宣传海报的