牛腩新闻发布系统总结(二)--相对路径与绝对路径

简介:

           这个问题是在加载的过程中遇到的,明明已经写好了路径,可是总是加载不了图片,究其原因,还是路径的问题,下面就来区别一下相对路径和绝对路径:

       关键区别:在于描述目录路径时,所采用的参考点不同

       特殊符号:

       "." -- 代表目前所在的目录,相对路径。
      <img src=”./Page2Image.jpg”>或者<img src=”Page2Image. jpg”>
       ".." -- 代表上一层目录,相对路径。 
      <img src=”../Image/Image.jpg”>
       "../../" -- 代表的是上一层目录的上一层目录,相对路径。 
       <img src=”../../Image/Image.jpg”>
       "/" -- 代表根目录,绝对路径。
       "D:/abc/" -- 代表根目录,绝对路径。

       相对路径:以引用文件之网页所在位置为参考基础,而建立出的目录路径。

          举例:
.searchbtn{
    background-image:url("../Images/搜索.jpg") ;
    width:99px;
    height:35px;
    border-style:none;
    background-color :#fff;
}<span style="font-family: tahoma, 'microsoft yahei', 微软雅黑;"> </span>

         相对路径的优点:

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

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

        相对路径的缺点:

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

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

       绝对路径:以Web 站点根目录为参考基础的目录路径。

           举例:
           <a href="/abc">文本</a> 或 <img src="/abc" />

       绝对路径的优点

            A、如果有人抄袭你的网站内容,里面的链接还会指向你的网站,有些抄袭的人比较懒,根本不会去改内容。其实也不局限于被抄袭,如果有人将你的网页保存到本地电脑中,里面的链接、图片、css、以及js仍然会连接到你的网站。

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

       绝对路径的缺点:

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


相关文章
|
3月前
|
前端开发 搜索推荐 开发者
前端基础(三)_路径(绝对路径、相对路径)、语义化、特殊字符
本文介绍了前端开发中的路径概念(包括绝对路径和相对路径)、HTML的语义化以及特殊字符的使用。文章解释了绝对路径和相对路径的区别和应用场景,阐述了HTML语义化的意义和好处,并通过示例代码展示了如何在HTML中使用特殊字符。
121 0
|
7月前
|
存储 数据挖掘 Python
Python技术分享:实现选择文件或目录路径的方法
Python技术分享:实现选择文件或目录路径的方法
390 2
|
7月前
|
JavaScript 前端开发 Java
今年十八,喜欢文件上传
今年十八,喜欢文件上传
55 1
|
前端开发 JavaScript
零基础10天学会网页制作第二天(上)之文件路径
对于这门编程语言,应该来说是标签语言,它是所有的编程语言里最最简单的,一定要放宽心,只要亦步亦趋,跟上课程,就一定能够学有所成。
零基础10天学会网页制作第二天(上)之文件路径
|
前端开发
前端学习笔记202305学习笔记第二十五天-path路径总讲4
前端学习笔记202305学习笔记第二十五天-path路径总讲4
47 0
|
前端开发
前端学习笔记202305学习笔记第二十五天-path路径总讲3
前端学习笔记202305学习笔记第二十五天-path路径总讲3
60 0
|
前端开发
前端学习笔记202305学习笔记第二十五天-path路径总讲2
前端学习笔记202305学习笔记第二十五天-path路径总讲2
46 0
|
前端开发
前端学习笔记202305学习笔记第二十四天-创建文件目录
前端学习笔记202305学习笔记第二十四天-创建文件目录
73 0
|
运维 JavaScript Java
【软考学习14】绝对路径和相对路径的区别和联系
【软考学习14】绝对路径和相对路径的区别和联系
172 0
html+css实战17-相对路径-上级
html+css实战17-相对路径-上级
90 0
html+css实战17-相对路径-上级