HTML 绝对路径与相对路径概念详细

路径指文件存放的位置，在网页中利用路径可以引用文件，插入图像、视频等。表示路径的方法有两种：相对路径，绝对路径。以下讨论均是在HTML环境下进行。

相对路径

相对路径是指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下：

./ ：代表文件所在的目录（可以省略不写）

../ ：代表文件所在的父级目录

../../ ：代表文件所在的父级目录的父级目录

/ ：代表文件所在的根目录

值得注意的是，（/ ：代表文件所在的根目录）其实可以理解成项目内部的绝对路径。


图1：项目目录结构

以图1所示项目目录结构为例，如果要在test.html中引入000.css，可以有以下写法：

  1. <linkhref="./css/css1/000.css" rel="external nofollow" /> (./可以省略)
  2. <link href="/html/css/css1/000.css" rel="external nofollow" />
  3. <link href="../html/css/css1/000.css" rel="external nofollow" />

绝对路径

绝对路径是指完整的网址，假设图一中项目的网站域名为www.test.com，那么000.css的绝对路径应该是

https://www.test.com/HelloHBuilder/html/css/css1/000.css。

相对路径与绝对路径的优缺点


表1：相对路径与绝对路径的优缺点

到此这篇关于HTML 绝对路径与相对路径概念详细的文章就介绍到这了,更多相关HTML 绝对路径与相对路径内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • html form表单基础入门案例讲解

    html form表单基础入门案例讲解

    目录 一,表格标签 –1,概述 –2,总结 二,表单标签 –1,测试 –2,总结 –3,form提交数据 三,form表单的练习 四,CSS -1,概述 -2,语法 -3,入门案例 五,选择器 总结 一,表格标签 向网页中加入表格 –1,概述 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 表格标签</title> </head&g

  • 教你如何从 html 实现一个 react

    教你如何从 html 实现一个 react

    什么是 React React是一个简单的javascript UI库,用于构建高效.快速的用户界面.它是一个轻量级库,因此很受欢迎.它遵循组件设计模式.声明式编程范式和函数式编程概念,以使前端应用程序更高效.它使用虚拟DOM来有效地操作DOM.它遵循从高阶组件到低阶组件的单向数据流. 前言

  • 一篇文章弄懂PHP和HTML的嵌套写法

    一篇文章弄懂PHP和HTML的嵌套写法

    目录 1.1全部php生成结构 1.2html中嵌套php 1.3博客项目 1.3.1前后台 1.3.2项目开发流程 1.3.3创建数据库和表 1.3.4添加博客类别 1.3.5显示所有的博客类别 1.3.6实现博客类别编辑功能 1.3.6.1a标签传值 1.3.6.2点击更新按钮实现更新功能 总结 1.1全部php生成结构 1.2html中嵌套php 总结如下: html和php混写规则: php代码必须包在<?php ?> html中写php也是同理,但是有值输出必须加上echo 1.3博

  • scrapy+flask+html打造搜索引擎的示例代码

    scrapy+flask+html打造搜索引擎的示例代码

    目录 1.预备知识 2.抓取CSDN数据接口 2.1 查看CSDN搜索引擎主页 2.2测试CSDN搜索引擎的功能 2.3查看更多相关文章的信息 2.4抓取ajax异步请求数据 2.5 分析url地址 3. 使用scrapy爬取CSDN数据接口 3.1 start_requests 3.2使用parse函数提取数据 3.3保存成CSV文件 3.4 运行结果 4. 效果展示 4.1 flask后端展示 4.2 效果展示 1.预备知识 python语言,scrapy爬虫基础,json模块,flask后

  • php将word转换为html格式代码分析

    PHP将上传word文件,转化为Html格式,(多种转换方式) 1.通过PHPOffice 1: composer require phpoffice/phpword /* 通过composer安装 PHPOffice 需要科学上网 或者用中国镜像:https://www.phpcomposer.com/ */ 2: 安装成功可看到 vendor文件夹 3: 使用方法 : require 'vendor/autoload.php'; $phpWord = \PhpOffice\PhpWord\I

  • Java SQL注入案例教程及html基础入门

    Java SQL注入案例教程及html基础入门

    目录 一,SQL注入 –1,需求 –2,测试 –3,总结 二,练习PreparedStatement –1,需求 –2,测试 –3,制作工具类 三,HTML –1,概述 –2,入门案例 –3,使用工具 –4,测试 四,测试常用标签 一,SQL注入 –1,需求 –1,利用jdbc查询user的信息,如果信息正确就登录,否则提示错误 –1,创建user表,指定字段id name password,并添加数据 –2,通过jdbc查询user表的数据,根据用户名和密码查 –2,测试 package cn

  • JavaScript中html画布的使用与页面存储技术详解

    JavaScript中html画布的使用与页面存储技术详解

    目录 一.JavaScript使用html中的画布 二.页面存储技术 一.JavaScript使用html中的画布 1.画布:页面中用于绘制图形的特殊区域 2.绘制图形的过程 (1)创建画布:使用html5中画布标签 <canvas id="id" width="宽度" height="高度"> </canvas> (2)JavaScript中获取画布 document.getElementById('id') (3)准备

  • HTML clearfix清除浮动讲解

    HTML clearfix清除浮动讲解

    一.浮动的概念 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 二.浮动的影响 1. 浮动会导致父元素高度坍塌 父元素中有子元素,并且父元素没有设置高度,子元素在父元素中浮动,结果必然是父元素的高度为0,这也就导致了父元素高度塌陷问题. 浮动脱离文档流,这个问题会对整个页面布局带来很大影响,如何解决高度坍塌问题,我们需要清除浮动. 三.浮动的清除 1. clear属性的空标签 在浮

  • HTML 绝对路径与相对路径概念详细

    HTML 绝对路径与相对路径概念详细

    路径指文件存放的位置,在网页中利用路径可以引用文件,插入图像.视频等.表示路径的方法有两种:相对路径,绝对路径.以下讨论均是在HTML环境下进行. 相对路径 相对路径是指目标相对于当前文件的路径,网页结构设计中多采用这种方法来表示目标的路径.相对路径有多种表示方法,其表示的意义不尽相同.表示方法如下: ./ :代表文件所在的目录(可以省略不写) ../ :代表文件所在的父级目录 ../../ :代表文件所在的父级目录的父级目录 / :代表文件所在的根目录 值得注意的是,(/ :代表文件所在的根目

  • JS 基本概念详细介绍

    目录 1.JS的特点 1.1 多范式 1.2 解释 1.3单线程 1.4 非阻塞 1.5 高级 1.6 动态类型 2.学习策略 3.基础知识 许多人在深入研究 Javascript 之前忽略了 Javascript 的理论方面.这些概念帮助我们了解构建 Javascript 应用程序时所采用的不同路径和模式.这些模式存在于 JS Land 的每个框架中,因此在学习语言本身之前了解这些概念很有意义. 1.JS的特点 1.1 多范式 Javascript 支持过程式.面向对象和事件驱动的函数式编程!

  • Java，JSP，Servlet获取当前工程路径（绝对路径）问题解析

    在jsp和class文件中调用的相对路径不同. 在jsp里,根目录是WebRoot 在class文件中,根目录是WebRoot/WEB-INF/classes 当然你也可以用System.getProperty("user.dir")获取你工程的绝对路径. 另:在Jsp,Servlet,Java中详细获得路径的方法! 1.jsp中取得路径: 以工程名为TEST为例: (1)得到包含工程名的当前页面全路径:request.getRequestURI() 结果:/TEST/test.jsp

  • 详解在Python中以绝对路径或者相对路径导入文件的方法

    1.在Python中以相对路径或者绝对路径来导入文件或者模块的方法 今天在调试代码的时候,程序一直提示没有该模块,一直很纳闷,因为我导入文件一直是用绝对路径进行导入的.按道理来讲是不会出现模块找不到的情况的. 最后仔细分析了整个代码的目录结构,才发现了问题. 下面依次来说明一下今天的情况 先看导入的代码: 在demo--mnist.py文件中执行以下两种导入操作 # 第一处 from gcforest.gcforest import GCForest from gcforest.utils.co

  • Java Web中解决路径（绝对路径与相对路径）问题

    Java Web中解决路径问题: Java中使用的路径,分为两种:绝对路径和相对路径.归根结底,Java本质上只能使用绝对路径来寻找资源.所有的相对路径寻找资源的方法,都不过是一些便利方法.不过是API在底层帮助我们构建了绝对路径,从而找到资源的! 在开发Web方面的应用时, 经常需要获取 服务器中当前WebRoot的物理路径. 如果是Servlet , Action , Controller, 或则Filter , Listener , 拦截器等相关类时, 我们只需要获得ServletCont

  • 相对路径与绝对路径的区别

    绝对路径: 在我们平时使用计算机时要找到需要的文件就必须知道文件的位置,而表示文件的位置的方式就是路径,例如只要看到这个路径:c:/website/img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中.类似于这样完整的描述文件位置的路径就是绝对路径.我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置.而在网站中类似以http://www.e3i5.net/img/photo.jpg来确定文件位置的方式也是绝对路径. 在网站的应用中,通

  • 浅谈网页中的相对路径和绝对路径

    经常听到网友苦述自己的网页中有许多图片不能正常显示,究竟为什么不能正常显示呢?总结其原因绝大部分都是因为使用了错误路径所致.网页中的图像.动画等素材都有自己固定的存放位置,网页只是通过路径使用HTML语言来调用它们,然后把它们显示在网页中.在网页中的路径大体可分为相对路径和绝对路径,大家(尤其是初学网页设计的朋友)往往对它们不够认识,在应该使用相对路径的地方使用了绝对路径,从而导致浏览器无法在指定的位置打开指定的文件,使素材不能正常显示. 那什么是相对路径?什么是绝对路径呢?为什么使用了绝对路径

  • java区分绝对路径和相对路径的方法

    本文实例讲述了java区分绝对路径和相对路径的方法.分享给大家供大家参考.具体分析如下: 这里要区分的是目录路径 如: /opt/deve/tomcat/bin c:\deve\tomcat\bin 都是绝对目录路径 bin bin/data bin\data 都是相对目录路径 通过观察,发现规律 以/开始 或者 包含\或//的都是绝对路径 或者 以/开始 或者 包含:的都是绝对路径 反之就是相对路径 介绍几个方法: startsWith public class Stringutil { pu

  • Global.asax取物理路径/取绝对路径具体方法

    虚拟路径 复制代码 代码如下: Server.MapPath("~/") 取得的就是虚拟路径 取绝对路径 复制代码 代码如下: string absolutelyPath =AppDomain.CurrentDomain.BaseDirectory; 取物理路径和应用程序路径 复制代码 代码如下: System.Web.HttpContext.Current.Request.ApplicationPath

  • ThinkPHP中公共函数路径和配置项路径的映射分析

    本文实例分析了ThinkPHP中公共函数路径和配置项路径的映射.分享给大家供大家参考.具体分析如下: ThinkPHP中在使用公共函数时(单一入口文件对应独立的项目),在Common文件夹中可以写公共的函数文件,写成文件名为common.php的文件会被系统自动加载,如果写成其他的函数名,则不会自动加载,但是有两种处理机制 1.在使用的时候手动加载 load('@.function');这样就会手动加载这个文件.@代表是在这个项目下的Common文件夹下的. 2.在配置文件中配置 复制代码 代码

随机推荐