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

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

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

相对路径（Relative Path）

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

  1. 相对于当前文件所在目录：如果要引用与当前文件位于同一目录下的文件，只需提供文件名即可。例如，如果当前文件为index.html，而要引用同一目录下的style.css文件，则可以使用以下代码：
<link rel="stylesheet" href=<
了解本专栏 订阅专栏 解锁全文
CSS绝对路径的写法及编程示例
2301_79331421的博客
10-01 632
需要注意的是，绝对路径是相对于网站的根目录而言的，不受当前HTML文件的路径影响。绝对路径是指定CSS文件路径的一种可靠且灵活的方式。通过正确使用绝对路径，我们可以确保在不同的页面中引入CSS文件时，样式能够正确地加载。绝对路径是指从网站的根目录开始的完整路径，它可以确切地指定CSS文件所在的位置。接着是从根目录到CSS文件的完整路径，包括文件所在的文件夹和文件名。另外，如果CSS文件位于不同的域名下，那么可以直接使用完整的URL作为绝对路径。作为CSS文件的路径，这是一个完整的URL。
详解在vue-cli3.0中自定css、js和图片的打包路径
10-16
在Vue CLI 3.0中定制css、js和图片的打包路径涉及到对Webpack配置的修改和定制。Vue CLI 3.0默认使用Webpack作为其项目打包工具，提供了较为详细的配置选项以适应不同的构建需求。 ### 前言 在开发Vue应用程序时，...
struts2下，jsp视图页面中CSS和javascript引用相对路径和绝对路径问题。
hyshucom
02-27 314
在Struts2的实际使用中，经常会在jsp视图页面中引入CSS和javascript，这就涉及到引用路径问题。路径有两种，一种是相对路径，另一种是绝对路径。我们分别来说说在Struts2的页面视图中他们的影响。 1、相对路径 相对路径的引用格式如下： &lt;script src="resources/scripts/jquery-ui-1.8.custom.min.js" type=...
CSS绝对路径与相对路径
qq_53959286的博客
01-21 2168
统一资源定位符（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
HTML 相对路径和绝对路径
weixin_30260399的博客
03-23 279
相对于文件自身出发，就是相对路径。 跳出当前目录使用../ ◆文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。 ◆图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称 ◆图片（html）在文件的上一级目录里，..+/+图片（html）名称 ◆图片在文件的上一级的其他目录里，../文件夹名称/图片名称 ...
CSS相对路径和绝对路径
u013114440的专栏
12-16 884
html布局机制是文档流模型，即块元素独占一行，内联元素不会独占一行。 相对定位 position：relative 相对定位即相对元素本身原来的位置设置偏移，用left、right、top、bottom进行定位后，元素会根据原来的位置进行移动，但是该元素不会脱离文档流，元素移动前所占的位置会保留。 绝对定位 position：absolute 绝对定位找的相对对象时该元素
Java Web中路径问题详解：相对路径与绝对路径
- 当JSP/HTML页面引用CSS、JavaScript或图片时，若使用相对路径，路径将基于当前页面的位置。为了避免路径问题，可以使用`()%>`获取上下文路径，并作为静态资源的前缀。例如，CSS的引入可以写成`()%>/css/style.css...
Java Web路径解析：相对路径与绝对路径详解
在Java Web开发中，理解相对路径和绝对路径的概念至关重要，它们关系到资源的定位和访问。本文将深入探讨这两种路径的区别和应用。 首先，我们来解释一下什么是相对路径和绝对路径。相对路径是相对于当前工作目录的...
java中相对路径与绝对路径问题
02-19
为了确保引用文件位于Web应用目录下，建议在 JSP/HTML 页面中的 CSS、JavaScript 和 action 属性前加上 `() %>`, 避免使用类似 `"."`、`"./"` 或 `"../"` 的相对路径，因为这可能导致文件移动后出现问题。...
CSS中的相对路径与绝对路径
欢乐的马的博客
03-09 4610
css中的相对路径与绝对路径
绝对路径与相对路径
记录和分享属于我的“IT”时光。
04-21 977
【绝对路径】 绝对路径，指完整地描述文件的位置的路径。 【相对路径（推荐）】 相对路径，就是指相对于当前文件的位置。 ../表示上一级目录 下面将以html引用css文件的方式重点表演一下相对路径的写法： （一）当html文件和css文件在同一文件夹内时： 【示例①】 href中直接输入css文件名及后缀即可，如href=“xy.css” （二）当html文件和css文件在不同文件夹内时： 【示例①】 当css文件位于html文件下一级时，直接输入下一级文件夹名+css文件名及后缀即可，如href=“下
相对路径和绝对路径
weixin_59272777的博客
02-01 1248
相对路径（Relative Path）和绝对路径（Absolute Path）是用于定位文件或目录在文件系统中位置的两种方式。相对路径是相对于当前工作目录或当前文件所在目录的路径。它指定了如何从当前位置到达目标文件或目录的位置关系。相对路径不包含完整的路径信息，而是基于当前位置来定位目标。相对路径和绝对路径是用于定位文件或资源在计算机系统中的位置的两种不同方式。它们在使用和表达上有一些优点和缺点，下面是对相对路径和绝对路径的优点、缺点以及举例进行说明。
css 相对路径与绝对路径
junboyboy的专栏
03-19 1630
HTML有2种路径的写法：相对路径和绝对路径。   HTML相对路径(Relative Path)   同一个目录的文件引用   如果源文件和引用文件在同一个目录里，直接写引用文件名即可。   我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。   html路径是：c:\Inetp
绝对路径和相对路径
2301_76270413的博客
05-31 541
CSS03.HTML通过两次 ../../ 返回到javawebcode,再根据javaweb下路径依次编写到CSS01.css,即可从CSS03.HTML访问到CSS01.CSS里面对html的样式修改。绝对路径（Absolute path）是指具有完整路径信息的路径。绝对路径提供了从文件系统根目录开始的完整路径。绝对路径可以使用在任何计算机中，因为它们始终表示同一位置。即可从CSS03.HTML访问到CSS01.CSS里面对html的样式修改。./ 符号表示当前文件所在文件夹。
html/css相对路径引用/、../、../../、/..、/../..、同级、下级、标准写法
热门推荐
NEET007的博客
07-21 3万+
/ 、../、../../ 、/.. 、/../.. 、标准写法、同级、下级
文件路径--绝对路径和相对路径
qq_59358228的博客
10-18 5406
绝对路径和相对路径
关于CSS中的相对路径和绝对路径
chenghuo9876的博客
07-15 412
"." 代表当前所在目录，相对路径。如:<a href="./abc">文本</a>或<img src="./abc" />； ".." 代表上一层目录，相对路径。如:<a href="../abc">文本</a>或<img ...
CSS样式表引用问题之绝对路径
Red_Liu
06-11 1545
例如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浏览器问题，换浏览器还是同样问题；至于原因没查到 但是解决方法如下，在双斜杠前面
网页的URL绝对路径和相对路径，以及各自的使用场景
最新发布
涂涂
04-20 1031
在网页开发中，“路径”用来描述资源的位置，比如跳转页面、引用图片、CSS、JS 文件等。绝对路径相对路径绝对路径是指资源从“根位置”出发的完整路径。它可以从协议开始（如https://），也可以是从网站根目录开始。相对路径是基于当前页面的位置来查找目标资源。写法更加灵活、简洁，适合网站内部资源的引用。推荐根路径或 CDN 的绝对路径；使用相对路径更安全；必须使用完整绝对路径；配合构建工具（如 Vite、Webpack）可自动解析路径；路径结构统一、清晰，便于维护。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值