URL的中文意思是统一资源定位符。作用就是为了让我们定位互联网上的各种资源。例如我们经常浏览网站看到的每一个网页或图片---都具有唯一的URL,即通过URL地址可以成功的访问到。且这些URL地址都是唯一的。

如果想在网上想访问某个页面的时候,可以直接在浏览器中输入URL地址,例如你想中的什么是css,就可以在浏览器中直接输入:http://www.idivcss.com/xuexicss/28.html,这个地址就是一个绝对的URL地址,通过这个地址,你可以访问到这个网页上的所有资源,包括文字,和图片等。

因此,这个时候可能绝对的URL地址就会变得很长而且难以记住,并且每个网站都包含众多的url链接,所有,在站内的时候,就有必要了解Web网站站点中的文件的URL的简写形式:相对URL

相对URL用于指示资源相对于当前页面的位置,我们前面在CSS中什么是绝对定位和相对定位就讲过这个问题。例如我们一直某一个文件(dc)对应的url址为http://www.idivcss.com/xuexicss/,如果我们想访问
http://www.idivcss.com/xuexicss/70.html
http://www.idivcss.com/xuexicss/81.html
http://www.idivcss.com/xuexicss/88.html

利用相对定位和相对URL,我们就可以直接写:
dc/70.html
dc/81.html
dc/88.html

这个时候,在用浏览器运行的时候,它自动会将其转换为绝对的URL去访问,效果是跟绝对URL是一样的。在网站中使用相对URL的另一种优势就是:当我们改变了网站的域名的时候,用户还是可以成功的访问到我们的站点,而不需要改变访问URL链接,因为我们的所有链接都是相文件夹的。

下面再介绍几种不同目录该如何使用不同的相对URL:

1、相同目录

如果两个文件在同一个目录下的时候,我们直接写出文件名即可。无需指定其他路径。例如a.html和b.html在同一目录,当a页面要链接b页面时,直接写b.html即可。

2、子目录

如果与当前页面处于同一目录的是个文件夹,而你链接到的文件在该文件夹下面,则需要写出该文件夹名,在跟上要链接的文件名。当a.html与b文件夹在同一目录,在b目录下有个c.html文件,要访问到c.html:则需写:b/c.html

3、父目录

如果要访问的文件在父目录外面,则我们先必须按照路径先出去到父目录,在访问目标页面。例如a.html的父目录为b文件夹,与b文件夹同一级的有个c.html页面,那如果要访问到c.html,则需写../c.html;如果要访问到外面的2层,则需要写2个../

直接举例说明吧。

在 D:\例子\html下有这么几个文件和文件夹
  

1.若引用的资源和本身在同一路径下(既在同一目录下)
     
     在example.html中引用tupian.gif

相对路径:<img src="tupian.gif" border="0"/>
     绝对路径:<img src="d:/例子/html/tupian.gif" border="0"/>

绝对的都差不多,只说相对路径。

2 要引用的文件在下一级文件夹下,文件名前加子文件夹名称
   假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html
   假设index.html路径是:c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html
   在info.html加入index.html超链接的href应该这样写:html/tutorials/index.html

3 要引用的文件在上一级文件夹下,文件名前加../
    假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html
    假设index.html路径是:c:\Inetpub\wwwroot\sites\index.html
   在info.html加入index.html超链接的代码应该这样写:
    <a href="../index.html">index.html</a>

举一反三:  ../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推

4 更复杂的情况:
假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是:c:\Inetpub\wwwroot\sites\html\index.html
在info.html加入index.html超链接的代码应该这样写:<a href="../html/index.html">index.html</a>

5.最后一个例子
    假设路径:D:\例子\html\style\view\pop.css
              D:\例子\html\images\view\tupian.gif 
在css中引用这个图片:<img src="../../images/view/tupian.gif" border="0"/>

什么是绝对URL、相对URL相关推荐

  1. nodejs获取当前url和url参数值

    2019独角兽企业重金招聘Python工程师标准>>> php中可以通过post or get 获取到url中的参数值,最近接触了node那么在nodejs里是怎么做的呢,上代码了! ...

  2. java url 处理,URL处理-Java架构师必看

    完整URL地址:http://username:password@hostname/path?ar网络 协议:http:// 用户名和密码: username:password  以:将两者分隔 主机 ...

  3. java url getfile_java url构成及get属性方法解释

    java 的url类中有很多get方法 以下是获取值的意义 // 首先先看一下wikipedia上关于url的一个描述 //Every HTTP URL conforms to the syntax ...

  4. 使用jquery获取url及url参数的方法及定义JQuery扩展方法

    1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取 ...

  5. 正则表达式 去除连续空白 + 获取url +分割url + 获取图片

    关联: PHP正则表达式 PHP正则表达式提取超链接及其标题 <?php$code = ' <a href="http://www.ibtimes.com" targe ...

  6. url中传递url参数|url中特殊字符、?、=无法解析问题

    url中传递url参数|url中特殊字符&.?.=无法解析问题 1.微信小程序报错:SyntaxError: Unexpected end of JSON input 2.错误场景复现 3.错 ...

  7. 使用jquery获取url及url参数的方法

    [开发笔记]-使用jquery获取url及url参数的方法 使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下: windo ...

  8. asp.net mvc、asp.net url重写 Url Rewrite

    最近在做一个cms手机网站,由于内容不是很多,很快做完了.空闲的时间考虑seo,想把url全部写成静态的.在查资料的时候,发现 UrlRewrite.Net这个组件非常的不错,尝试了下结果达到了理想的 ...

  9. URL及URL encoding 简述

    介绍 当我们浏览网页的时候,其中涉及到不少技术.其中,有一项最基本的机制使得我们可以顺利的在浩瀚的互联网海洋中快速的定位到我们想要的资源并接收数据.这项技术是网页的根本,是形成互联网的基石.它就是UR ...

  10. url.parse() 的替换方法new URL(),URl.parse()的使用。

    URl.parse()的解析使用 对于这种表单提交的的请求路径,由于其中具有用户动态填写的内容 所以不能通过完整的URL路径来处理这个请求 对于我们来讲,只需要判定,请求路径是/--?之前就行 var ...

最新文章

  1. Java访问权限控制
  2. [转]linux文件同步工具Unison的使用
  3. Tesseract——OCR图像识别 入门篇
  4. CVPR 2015 papers
  5. Java接口long类型精度丢失,解决前后端交互Long类型精度丢失问题
  6. 学英语(4)---出门在外常用的英语句子
  7. oracle sequence使用多,Oracle中Sequence使用的限制
  8. linux系统更新失败处理功能,Proxmox VE升级apt-get update失败处理 | linux运维小站–linux系统架构_服务器运维_Linux运维工程师工作手札...
  9. Struts2环境搭建
  10. 批量图片处理,打包成zip
  11. paip.信用卡账单处理系统功能vO22
  12. 数据隐私与加密学技术 |链捕手
  13. 设计心理学1_日常的设计 读后感
  14. java实现开根号:牛顿迭代法
  15. 猫盘onespace x3p系统使用
  16. 【图像篡改 ECCV2018】Fighting Fake News: Image Splice Detection via Learned Self-Consistency
  17. centos添加桌面快捷方式
  18. RF-测试中常用函数
  19. 转载:老师也吐血的试卷
  20. 如何判断某个物体当前是顺时针还是逆时针旋转

热门文章

  1. FATAL: kernel too old
  2. 试位法的matlab程序步骤,MATLAB程序设计导论简介,目录书摘
  3. 双非计算机研究生要不要读,“双非”大学研究生,到底值不值得读?
  4. Caused by: java.util.concurrent.ExecutionException: java.util.concurrent.ExecutionException: com.and
  5. Android屏幕亮度调节
  6. 第3章 Hive数据类型
  7. 一些大任务SQL的优化方案
  8. 转专业的程序员,泪眼回首头三年
  9. php采集百度热搜,爬取百度热搜
  10. TensorFlow Serving Architecture