HTML相对路径与绝对路径
在网页制作的过程中,少不了跟路径打交道,比如,包含一个文件,插入一个图片等,与路径都有关系,如果使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。初学者可能会感到困惑,下面我就详细的介绍一下相对路径与绝对路径。
HTML有2种路径的写法:相对路径和绝对路径。
1.HTML相对路径(Relative Path)
同一个目录的文件引用
如果源文件和引用文件在同一个目录里,直接写引用文件名即可,这时引用文件的方式就是使用相对路径。
我们现在建一个源文件info.html,在info.html里要引用index.html文件作为超链接。
假设info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是:c:/Inetpub/wwwroot/sites/blabla/index.html
在info.html加入index.html超链接的代码应该这样写:
这是超连接
如何表示上级目录
../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推。
假设info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是:c:/Inetpub/wwwroot/sites/index.html
在info.html加入index.html超链接的代码应该这样写:
假设info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是:c:/Inetpub/wwwroot/index.html
在info.html加入index.html超链接的代码应该这样写:
index.html
假设info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是:c:/Inetpub/wwwroot/sites/wowstory/index.html
在info.html加入index.html超链接的代码应该这样写:
index.html
如何表示下级目录
引用下级目录的文件,直接写下级目录文件的路径即可。
假设info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是:c:/Inetpub/wwwroot/sites/blabla/html/index.html
在info.html加入index.html超链接的代码应该这样写:
这是超连接
假设info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html
假设index.html路径是:c:/Inetpub/wwwroot/sites/blabla/html/tutorials/index.html
在info.html加入index.html超链接的代码应该这样写:
这是超连接
2.HTML绝对路径(Absolute Path)
大 家都知道,在我们平时使用计算机时要找到需要的文件就必须知道文件的位置,而表示文件的位置的方式就是路径,例如只要看到这个路径:c:/website /img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。类似于这样完整的描述文件位置的路径就 是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似以http://www.ajaxstu.com/img/photo.jpg来确定文件位置的方式也是绝对路径。
HTML绝对路径(absolute path)在网页制作中指带域名的文件的完整路径。
假设你注册了域名http://www.ajaxstu.com,并申请了虚拟主机,你的虚拟主机提供商会给你一个目录,比如www,这个www就是你网站的根目录。
假设你在www根目录下放了一个文件default.asp,这个文件的绝对路径就是: font color="#0058db">http://www.ajaxstu.com/default.asp。
假设你在www根目录下建了一个目录叫archives,然后在该目录下放了一个文件2886.html,这个文件的绝对路径就是http://www.ajaxstu.com/archives/2886.html。
最新文章
- lucene join解决父子关系索引
- ASP.NET Web API中的参数绑定总结
- magento
- flexbox in IE (10+ and 9 and 8)
- jq事件冒泡问题
- JsonPath详解
- 【07】为多态基类声明virtual析构方法
- js 获取月份 格式yy-mm-dd
- eclipse的SVN插件的配置
- python--DenyHttp项目(1)--socket编程:客户端与服务器端
- c语言-自己写的库
- C#通过序列化实现深表复制
- 【ASP.NET Core快速入门】(十一)应用Jwtbearer Authentication、生成jwt token
- c/c++ 图的最短路径 Dijkstra(迪杰斯特拉)算法
- 为了好好看球,学霸们用深度学习重建整个比赛3D全息图
- jsplumb流程器使用3--connector
- BZOJ 3245: 最快路线 spfa
- Eclipse中java文件和jsp字体大小设置
- [leetcode]416. Partition Equal Subset Sum分割数组的和相同子集
- 一个考验c语言和数据结构功底的小项目
热门文章
- mysql临时表空间暴涨
- atititi.soa  微服务 区别 联系 优缺点.doc
- centos 7 安装 mail
- 【ubantu】Ubuntu的一些常用快捷键
- 搜索maven的库中某个支持库的的最新版本
- python学习 03 函数 (只会执行一次return就不会往下执行)
- 常见UI组件的一个模板
- PHP-Manual的学习----【语言参考】----【类型】-----【Interger类型】
- 一个Lumen多层拆分手记
- LR测试HTTPS