zoukankan      html  css  js  c++  java
  • 关于url路径的定义方式

    一、概述  

      无论是做网页,还是WEB系统,我们都会用到链接,图片,文件的地方,这些地方都涉及到路径的问题,例如:background-image:url();这一CSS样式,而url()的定义方式有两种,一种是绝对路径,一种是相对路径,我们平时在写网页用到最多的是相对路径,这篇文章主要介绍的是绝对路径和相对路径在项目中的应用,这里有人会说相对路径更利于项目的移植和部署,那么我们为什么还要用到绝对路径呢?以下做简要介绍与分析:

    二、什么是绝对路径

       绝对路径是指文件在硬盘上真正存储的路径。比如我们在D盘里的images文件夹下存了一张图片logo.png,那么这个图片的绝对路径就是D:imageslogo.png。所以我们在使用绝对路径指向该图片的时候的语句应该为:

      background-image:url("D:imageslogo.png");

      在我们实际编程中我们很少会用到绝对路径,因为本地电脑上的图片的当前位置,很可能在传输到WEB服务器上发生改变,举个简单的例子,假如你得项目文件夹在本地C盘,此时你定义了一个背景图的路径,C:demoimageslogo.png,此时你把项目整体移动到D盘此时该图片的真正路径为D:demoimageslogo.png,而根据原路径是找不到的。

      

    三、什么是相对路径:

      相对路径是指,相对于本文件的目标文件的位置。相对路径可以避免在项目整体目录改变时,绝对路径找不到的问题。相对路径有以下几种情况:

      (1)本文件与目标文件在同一根目录下,例如:demo.html与logo.png在同一目录下:

        

        这时指向logo的相对路径为:background-image:url(logo.png);

        

      (2)本文件与目标文件的上级目录在同一根目录下,例如demo与image在同一目录下,logo在image文件夹内:

          

        这时指向logo的相对路径为:background-image:url(image/logo.png);

      (3)本文件的上级目录与目标文件的上级目录在同一根目录下,例如:demo.html在html文件夹下,logo在image下:

        

        这时指向logo的相对路径为:background-image:url(../image/logo.png); 这里的../是指向上一级目录,如果你的本文件在第2层目录下用../../去找,依次类推在n层就用n个../。  

    四、绝对路径与相对路径的优缺点及使用的地方

      1、绝对路径的优点:

        如果网页位置改变,里面的链接还是指向正确的URL。

      2、绝对路径的缺点:

          在编码编写时不方便使用绝对路径,因为链接应该指向真正的域名而不是开发站点。

      3、相对路径的优点:

          A、容易移动内容,可以整个目录移动。

          B、测试方法比较灵活,本机测试时比较方便。

      4、相对路径的缺点:

          A、部分内容页面换了位置时,链接容易失效。

          B、容易被人大面积采集抄袭。

      结合实际情况,我在项目进行的过程中,分别编写了两个提示页面,一个是无权限访问页,一个是未登录或登录超时页面,这两个页面的跳转地址不固定,尤其是无权限访问页,跳转地址变化非常大,网页内图片不能显示,这时就需要用到绝对路径了,但是为了项目的正常运行绝对路径不能写死(这里有的人叫做相对虚拟目录,其实就是绝对路径的原理),我用JS取值

    //获取项目路径
    var contextPath = "${pageContext.request.contextPath}";
    
    //  将   项目路径   与   相对虚拟目录   拼接成绝对路径
    var url = contextPath + "/images/logo.jpg";
    
    //给元素URL赋值
    $("元素").css("background-image","url(" + url + ")");

      这样无论我们项目部署在哪或者是访问地址如何改变,访问路径都能正确的指向我们想要的url,解决了我们所说的项目移植等问题。

  • 相关阅读:
    L9,a cold welcome
    别说你不知道java中的包装类,wrapper type,以及容易在自动拆箱中出现的问题
    java导出和读取excel数据
    简单实用句型更新
    PAT1027
    生成英语单词
    c# 操作Word总结【转】
    压缩分卷
    VS2010中,无法嵌入互操作类型“……”,请改用适用的接口的解决方法
    HOW TO:使用 Visual C# .NET 打印 RichTextBox 控件的内容
  • 原文地址:https://www.cnblogs.com/shazhou-blog/p/5182895.html
Copyright © 2011-2022 走看看