相对路径和绝对路径在HTML/CSS中的详解

最新推荐文章于 2024-02-01 19:49:43 发布
最新推荐文章于 2024-02-01 19:49:43 发布
阅读量528 收藏
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CbrFullstack/article/details/133478640
版权
html 专栏收录该内容
57 篇文章 3 订阅 ¥59.90 ¥99.00
订阅专栏
本文详细介绍了HTML和CSS中相对路径与绝对路径的概念，提供了各种路径类型的代码示例，并强调了在使用路径时应注意的文件位置、文件类型和目录结构等问题。通过理解这些路径机制，开发者能够更准确地引用和加载所需的文件和资源。
摘要由CSDN通过智能技术生成

相对路径和绝对路径是在HTML和CSS中常用的概念，用于指定文件或资源的位置。本文将详细解释相对路径和绝对路径的含义，并提供相应的源代码示例。

相对路径（Relative Path）

相对路径是相对于当前文件所在位置的路径。它不包含完整的URL或磁盘路径，而是基于当前文件的位置来定位其他文件或资源。相对路径可以使用以下几种方式来表示：

  1. 相对于当前文件所在目录：如果要引用与当前文件位于同一目录下的文件，只需提供文件名即可。例如，如果当前文件为index.html，而要引用同一目录下的style.css文件，则可以使用以下代码：
<link rel="stylesheet" hr
了解本专栏 订阅专栏 解锁全文
CbrFullstack
关注
专栏目录
订阅专栏
详解在vue-cli3.0中自定css、js和图片的打包路径
10-16
在Vue CLI 3.0中定制css、js和图片的打包路径涉及到对Webpack配置的修改和定制。Vue CLI 3.0默认使用Webpack作为其项目打包工具，提供了较为详细的配置选项以适应不同的构建需求。 ### 前言 在开发Vue应用程序时，...
CSS绝对路径与相对路径
qq_53959286的博客
01-21 2031
统一资源定位符（URL） URL (Uniform Resource Locator）的中文全称是“统一资源定位符”。 URL是文档在web或者internet上的地址，一般用在超链接当中。尽管URL看起来很长很复杂，但它总是由4个部分构成， 即协议名、主机名、文件夹名（路径）和文件名。 例如： http：//www.tsinghua.edu.cn/publish/th/index.html http是协议名，www.tsinghua.edu.cn是主机名，publish/th是文件夹名（th文件夹在pu
struts2下，jsp视图页面中CSS和javascript引用相对路径和绝对路径问题。
hyshucom
02-27 268
在Struts2的实际使用中，经常会在jsp视图页面中引入CSS和javascript，这就涉及到引用路径问题。路径有两种，一种是相对路径，另一种是绝对路径。我们分别来说说在Struts2的页面视图中他们的影响。 1、相对路径 相对路径的引用格式如下： &lt;script src="resources/scripts/jquery-ui-1.8.custom.min.js" type=...
CSS相对路径和绝对路径
u013114440的专栏
12-16 820
html布局机制是文档流模型，即块元素独占一行，内联元素不会独占一行。 相对定位 position：relative 相对定位即相对元素本身原来的位置设置偏移，用left、right、top、bottom进行定位后，元素会根据原来的位置进行移动，但是该元素不会脱离文档流，元素移动前所占的位置会保留。 绝对定位 position：absolute 绝对定位找的相对对象时该元素
CSS中的相对路径与绝对路径
欢乐的马的博客
03-09 4295
css中的相对路径与绝对路径
HTML 相对路径和绝对路径
weixin_30260399的博客
03-23 181
相对于文件自身出发，就是相对路径。 跳出当前目录使用../ ◆文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。 ◆图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称 ◆图片（html）在文件的上一级目录里，..+/+图片（html）名称 ◆图片在文件的上一级的其他目录里，../文件夹名称/图片名称 ...
Java Web路径解析：相对路径与绝对路径详解
在Java Web开发中，理解相对路径和绝对路径的概念至关重要，它们关系到资源的定位和访问。本文将深入探讨这两种路径的区别和应用。 首先，我们来解释一下什么是相对路径和绝对路径。相对路径是相对于当前工作目录的...
绝对路径与相对路径
记录和分享属于我的“IT”时光
04-21 867
【绝对路径】 绝对路径，指完整地描述文件的位置的路径。 【相对路径（推荐）】 相对路径，就是指相对于当前文件的位置。 ../表示上一级目录 下面将以html引用css文件的方式重点表演一下相对路径的写法： （一）当html文件和css文件在同一文件夹内时： 【示例①】 href中直接输入css文件名及后缀即可，如href=“xy.css” （二）当html文件和css文件在不同文件夹内时： 【示例①】 当css文件位于html文件下一级时，直接输入下一级文件夹名+css文件名及后缀即可，如href=“下
css 相对路径与绝对路径
junboyboy的专栏
03-19 1525
HTML有2种路径的写法：相对路径和绝对路径。   HTML相对路径(Relative Path)   同一个目录的文件引用   如果源文件和引用文件在同一个目录里，直接写引用文件名即可。   我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。   html路径是：c:\Inetp
绝对路径和相对路径
2301_76270413的博客
05-31 426
CSS03.HTML通过两次 ../../ 返回到javawebcode,再根据javaweb下路径依次编写到CSS01.css,即可从CSS03.HTML访问到CSS01.CSS里面对html的样式修改。绝对路径（Absolute path）是指具有完整路径信息的路径。绝对路径提供了从文件系统根目录开始的完整路径。绝对路径可以使用在任何计算机中，因为它们始终表示同一位置。即可从CSS03.HTML访问到CSS01.CSS里面对html的样式修改。./ 符号表示当前文件所在文件夹。
相对路径和绝对路径
最新发布
weixin_59272777的博客
02-01 1026
相对路径（Relative Path）和绝对路径（Absolute Path）是用于定位文件或目录在文件系统中位置的两种方式。相对路径是相对于当前工作目录或当前文件所在目录的路径。它指定了如何从当前位置到达目标文件或目录的位置关系。相对路径不包含完整的路径信息，而是基于当前位置来定位目标。相对路径和绝对路径是用于定位文件或资源在计算机系统中的位置的两种不同方式。它们在使用和表达上有一些优点和缺点，下面是对相对路径和绝对路径的优点、缺点以及举例进行说明。
html/css相对路径引用/、../、../../、/..、/../..、同级、下级、标准写法
热门推荐
NEET007的博客
07-21 2万+
/ 、../、../../ 、/.. 、/../.. 、标准写法、同级、下级
文件路径--绝对路径和相对路径
qq_59358228的博客
10-18 5241
绝对路径和相对路径
关于CSS中的相对路径和绝对路径
chenghuo9876的博客
07-15 348
"." 代表当前所在目录，相对路径。如:<a href="./abc">文本</a>或<img src="./abc" />； ".." 代表上一层目录，相对路径。如:<a href="../abc">文本</a>或<img ...
CSS样式表引用问题之绝对路径
Red_Liu
06-11 1475
例如iconfont 提供的 font-class引用 //at.alicdn.com/t/font_1876690_1hiszbbu61ch.css 正常是这酱紫： <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_180_1hish.css"> 但是在本地浏览，报错提示 没有找到。（没进行线上测试） 刚开始猜测是Google浏览器问题，换浏览器还是同样问题；至于原因没查到 但是解决方法如下，在双斜杠前面
html页面使用绝对路劲或相对路径加载js,css，img区别
lucky_ly的博客
02-11 2321
html加载js,css，img等资源既可以使用相对路径加载，也可以使用绝对路径。
css里面图片路径问题
Java in my life
08-16 5682
/**   在CSS文件里，有时要用到background，即加一个背景图片，一般在做按钮样式时会经常用到。   css中加背景图片根据图片及css文件的相对位置分一下几种类型：   1.同包下：background : url(aaa.gif);   2.不同包：       在这种情况下有2中方法可以设置，一种是使用绝对路径，即http://www.iteye.com/aaa.gif
html+css实战15-绝对路径
qq_41632427的博客
06-04 166
html
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值