html路径详解,详解HTML相对路径和绝对路径

相对路径:以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对。

绝对路径:以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。

其实绝对路径与相对路径的不同处,只在于描述目录路径时,所采用的参考点不同。由于对网站上所有文件而言,根目录这个参考点对所有文件都是一样的,因此,运用以根目录为参考点的路径描述方式才会被称之为绝对路径。

以下为建立路径所使用的几个特殊符号,表达的意义如下

.代表目前所在的目录

..代码上一级目录

/代码根目录

相对路径和决定路径的区别:相对路径不带有盘符,通常是以html网页文件为起点,通过层级关系描述目标图像的位置,相对于文件自身出发,就是相对路径

主要有以下几种情况:

①文件和图片(html文档)在同一个目录(文件夹) ,直接写文件名。

②图片(html文档)在文件在下一级目录里。文件夹名称+/+图片(html)名称

③图片(html)在文件的上一级目录里,..+/+图片(html)名称

④图片在文件的上一级的其他目录里,../文件夹名称/图片名称

⑤总结:找到下一级目录(文件夹)的图片(文件)用 /    跳出当前目录使用../

⑥注意:一个点代表当前路径,两个点代表上级路径。一个点可以连同它后面的/不用写。两个点必须写/

436fee0116360e22eecb3f3b2efea5ef.png

绝对文件路径是指向一个因特网文件的完整 URL:

例如:64a82a59816be43d09e3b4c40e34ed6b.png

好习惯

使用相对路径是个好习惯,如果使用了相对路径,那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/572913.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

#65279导致页面顶部空白一行解决方法

今天做了两个静态html页面,在浏览器中测试的时候,发现其中一个html页面的顶部多出了些许空白,而另一个页面显示正常。在浏览器中进行了审查对比,发现有空白的那个页面的head标签里面的元素全部跑到了body里面,而且body…

计算机应用技术自我分析,计算机应用*个人自我鉴定

第1篇:计算机应用*个人自我鉴定时光匆匆溜走,短短三年的大学生活即将过去。在菁菁校园中,老师的教诲,同学的友爱以及各方面,使我获得了许多知识,懂得了许多道理。为了更好地适应社会的需要,我在…

怎么把桌面计算机放到快速启动栏,怎么把桌面图标放到快速启动栏

1. 如何把桌面图标放于快速启动栏拖动图标到任务栏,之后删除桌面图标不行的话点击“开始”菜单→“运行”命令,在弹出的“运行”对话框中输入 regsvr32 /n /i:u shell32 后回车,丢失的图标便又重新回到快速启动栏了再不行的话在Windows操作系…

html5 自适应手机布局,科技常识:html5移动端自适应布局的实现

今天小编跟大家讲解下有关html5移动端自适应布局的实现 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html5移动端自适应布局的实现 的相关资料,希望小伙伴们看了有所帮助。场景:为适应各种大小的屏幕自适应布局我知…

js 两个map合并为一个map_ArcGIS API for JS3.x教程二:构建第一个简单的程序

本文衔接上文&#xff1a;不睡觉的怪叔叔&#xff1a;ArcGIS API for JS3.x教程一&#xff1a;本地开发环境配置​zhuanlan.zhihu.com一、创建简单的HTML文档创建一个简单的HTML文档&#xff1a;<!DOCTYPE html> <html lang"en"> <head><meta c…

hibernate、easyui、struts2整合

<!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>学生表</title> <!-- 1jQuery的js包 --> <script type"text/javascript" src"jquery-easyui-1.4.4/jquery.min.js"></script&…

selinux= 为 disabled_CentOS7关闭防火墙和SELinux

关闭防火墙查看防火墙状态[rootlocalhost ~]# systemctl status firewalld临时关闭&#xff08;下次开机启动&#xff0c;自动启动防火墙&#xff09;[rootlocalhost ~]# systemctl stop firewalld永久关闭防火墙&#xff08;开机启动时不在启动&#xff09;[rootlocalhost ~]#…

selenium 基本的键盘方法

selenium 基本的键盘方法 今晚不想加班&#xff0c;于是赶紧回来看看书&#xff1a; 1.下了selenium的小工具&#xff1a;FireBug/FirePath。 2.确定了看书顺序&#xff0c;我觉得难度低点开始比较好&#xff0c;所以我还是先看基于Python的selenium&#xff0c;另一本书再看把…

计算机主机组成部分和功能,电脑的组成部分及作用

对于很多人来讲&#xff0c;电脑的使用似乎是一件很稀松平常的事情了。但是对于一些新手或者是一些初学者来说&#xff0c;电脑的相关组成部件还有相应的作用都不是很熟悉&#xff0c;那么电脑的组成部分及作用是什么呢?下面是学习啦小编收集的关于电脑的组成部分及作用&#…

android8 通知呼吸灯_正在消失的功能,为什么越来越多的手机没有呼吸灯?你知道原因吗...

正在消失的功能&#xff0c;为什么越来越多的手机没有呼吸灯&#xff1f;你知道原因吗其实说到手机呼吸灯&#xff0c;大家应该都不陌生&#xff0c;毕竟如果你有心心念念的人儿&#xff0c;每次呼吸灯闪烁&#xff0c;都会迫不及待的打开手机查看消息&#xff0c;想看看是不是…

asp 使用TreeView控件

这段代码为了使用 TreeNodeCheckChanged 事件&#xff0c;会有回刷新的效果&#xff1b; 不喜欢的可查看改进版&#xff0c;利用js控制选择操作&#xff0c;无界面刷新&#xff0c; “http://www.cnblogs.com/GoCircle/p/6231985.html”&#xff1b; 前台代码 <style>.tn…

巴川数据科学炼成记_【脑王直通车】小小记忆高手炼成记

“ 记住150个随机数字&#xff0c;你需要多久&#xff1f;【脑王直通车】第8站到来&#xff0c;杨老师将他在《最强大脑》比赛中运用的记忆方法倾囊相授&#xff0c;孩子们变身小小记忆高手&#xff01;”记忆探秘你们知道记忆是什么吗&#xff1f;我们从小到大&#xff0c;无论…

2013年4月管理计算机应用,全国2013年4月高等教育自学考试管理系统中计算机应用试题及答案...

我自己整合过的,相当的详细,几乎设计了出现的所有的知识的哦!!全国2013年4月高等教育自学考试管理系统中计算机应用试题课程代码&#xff1a;00051请考生按规定用笔将所有试题的答案涂、写在答题纸上。选择题部分注意事项&#xff1a;1. 答题前&#xff0c;考生务必将自己的考试…

[BZOJ3173][Tjoi2013]最长上升子序列

[BZOJ3173][Tjoi2013]最长上升子序列 试题描述 给定一个序列&#xff0c;初始为空。现在我们将1到N的数字插入到序列中&#xff0c;每次将一个数字插入到一个特定的位置。每插入一个数字&#xff0c;我们都想知道此时最长上升子序列长度是多少&#xff1f;输入 第一行一个整数N…

lrange是取出所有值并移除么_图解双指针 | LeetCode 27. 移除元素

题目描述 原题链接&#xff1a;LeetCode 27. 移除元素给定一个数组 nums 和一个值 val&#xff0c;你需要原地移除所有数值等于 val 的元素&#xff0c;返回移除后数组的新长度。不要使用额外的数组空间&#xff0c;你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成…

计算机辅助工程分析及应用论文,计算机辅助工程计量的论文

【摘要】随着科学技术的不断进步&#xff0c;计算机辅助工程计量的技术也日趋成熟并得到广泛应用。下面就广联达图形算量作以简要概述。【关键词】计算机、辅助、工程计量一、gcl7.0图形算量软件应用综述广联达图形算量软件gcl7.0是专为在目前传统定额模式向清单模式过渡时期量…

Effective前端5:减少前端代码耦合

什么是代码耦合&#xff1f;代码耦合的表现是改了一点毛发而牵动了全身&#xff0c;或者是想要改点东西&#xff0c;需要在一堆代码里面找半天。由于前端需要组织js/css/html&#xff0c;耦合的问题可能会更加明显&#xff0c;下面按照耦合的情况分别说明&#xff1a; 1. 避免全…

戴尔笔记本电脑的计算机配置在哪,戴尔电脑的便签在哪里?笔记本电脑怎么设置便签?...

戴尔电脑是国内一些用户所使用的电脑品牌。如果戴尔电脑安装的是Windows系统&#xff0c;是可以在电脑附件中找到系统自带的便笺或者Sticky Notes工具的&#xff0c;可以粘贴在电脑桌面上记录简单的文字内容&#xff0c;但并不支持设置待办提醒事项。除了系统自带便笺之外&…

12帧跑步动画分解图_画出人物跑步的动画运动规律,并上传动画效果视频和逐帧图片。...

【判断题】在竞争激烈的市场环境中,职业生的就业优势是证书【简答题】请把今天的语文作业拍照、语音上传,谢谢!【简答题】请把今天的语文作业拍照上传,今日古诗语音上传,谢谢!【简答题】请把今天的作业拍照、语音上传,谢谢!【判断题】职业纵向发展只体现在技术和职务提升。【判…

VMWare MAC系统调整磁盘

VMware&#xff0c;打开虚拟文件&#xff0c;调整磁盘大小。 从40G调整到80G 进入虚拟机&#xff0c;打开终端 diskutil list;diskutil resizeVolume disk0s2 80GB http://blog.csdn.net/binyao02123202/article/details/51629288转载于:https://www.cnblogs.com/cb168/p/62096…