版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
网页设计与制作绝对路径和相对路径授课教师:胡文利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小结小结本节内容讲解了文件的绝对路径和相对路径,以上节课抗疫宣传海报的路径作为案例分析。请大家在课后对本节知识点进行复习,通过搜索学习强国官网的青春中国、教育、科技、大自然等栏目图像资料,自己动手制作红色教育、绿水青山、科技强国、防疫抗疫等类似于抗疫宣传海报的
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 农村合伙改造合同模板
- 房屋翻新售卖合同模板
- 织布外包合同模板
- 承包土地个人转让合同模板
- 稻草批发采购合同模板
- 小区门窗建材销售合同模板
- 施工施工合同模板
- 禽类购销合同模板
- 斗鸡出售养殖合同模板
- 大客车合同模板
- 计算机科学与技术生涯人物访谈报告
- 应急救援队伍的建设与管理
- 人教版小学英语五年级下册Unit5现在进行时
- 江苏徐州PPT介绍,徐州幻灯片模板
- 大棚钢管下沉施工方案
- 落实立德树人根本任务构建协同育人新格局建设方案
- 高中英语-Natural Disasters教学课件设计
- 郦道元《水经注·序》原文翻译注释与鉴赏
- 北师大版七年级上册生物教学课件 第4章 生物体的结构层次 第1节 细胞分化形成组织
- 电力机车制动系统第一章-制动系统概述课件
- 2023年4月自考00018计算机应用基础真题及答案含评分标准
评论
0/150
提交评论