html/css相对路径引用/、../、../../、/..、/../..、同级、下级、标准写法

最新推荐文章于 2021-06-03 19:12:48 发布
最新推荐文章于 2021-06-03 19:12:48 发布
阅读量3w 收藏 44
点赞数 19
分类专栏： HTML5 文章标签： html css 相对路径引用 同级 下级
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/NEET007/article/details/51986587
版权

/ 代表根目录，慎用
../ 代表上一级目录
../../ 代表上两级目录
/.. 代表下级目录
/../.. 代表下两级目录

标准写法：
同级 直接引用文件名
<link rel="stylesheet" type="text/css" href="theme0.css" />

下级 同级目录/下级目录/文件名
<link rel="stylesheet" type="text/css" href="css/theme0.css" />

相对路径和绝对路径在HTML/CSS中的详解
CbrFullstack的博客
10-02 620
相对路径基于当前文件的位置，而绝对路径是完整的URL或磁盘路径。相对路径基于当前文件的位置，而绝对路径是完整的URL或磁盘路径。绝对路径是完整的URL或磁盘路径，用于直接指定文件或资源的准确位置。绝对路径是完整的URL或磁盘路径，用于直接指定文件或资源的准确位置。相对路径是相对于当前文件所在位置的路径。它不包含完整的URL或磁盘路径，而是基于当前文件的位置来定位其他文件或资源。相对路径和绝对路径是在HTML和CSS中常用的概念，用于指定文件或资源的位置。文件位置：确保文件或资源的位置与路径指定的位置一致。
HTML 路径详解：相对路径与绝对路径
m0_62599305的博客
02-18 1375
在 HTML 开发中，路径用于指定文件的位置，如 图片、CSS 文件、JavaScript 文件、超链接等。路径主要分为 相对路径 和 绝对路径，理解它们的区别可以帮助我们正确地引用资源，避免文件无法加载的问题。本文将详细介绍 相对路径 和 绝对路径 的概念、使用方法及常见的应用场景。在 HTML 中，路径用于指定资源文件的位置，比如：路径的核心作用是告诉浏览器如何找到目标文件。路径主要分为两种：绝对路径是从根目录（Root Directory）开始的完整路径。它不依赖于当前文件的位置，始终指向同一个资源。
【CSS外部引入的路径】
魔术师
05-21 6061
【CSS外部引入的路径】 CSS外部引入的路径 CSS外部引入的路径 相对路径 以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。 绝对路径 以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用
HTML相对路径的写法
天天向上
12-16 2706
今天写ＨＴＭＬ的时候，发现自己写的ｓｒｃ路径并不能成功显示图片。 文件是这样放的： 　 代码是这样写的： <img alt = "1观察波形.png" src = "/实验一/1观察波形.png"</img> 得到的结果是这样子的： 　　后来尝试了好久，看了这个说明： 　　https://jingyan.baidu.com/article/2c8c281d805f800008252ad7.html 　　实例中有以下情况： 　　１．图片ｐｉｃ．ｐｎｇ和网页Ｈｉ．ｈｔｍｌ在同一文件夹里。　
js、css外部文件的相对路径问题
不积跬步，无以至千里
05-30 3021
如果js、css外部文件有使用到相对路径时，需要注意其相对路径的基准是不一样的。 比如说，在index.html中引用到了外部的js和css文件，这两个文件都通过相对路径引用了某一张图片；这些文件所在的目录如下： . ├── js | └── index.js ├── css | └── index.css ├── images | └── bg.jpg └── index.h...
HTML 相对路径和绝对路径
weixin_30260399的博客
03-23 202
相对于文件自身出发，就是相对路径。 跳出当前目录使用../ ◆文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。 ◆图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称 ◆图片（html）在文件的上一级目录里，..+/+图片（html）名称 ◆图片在文件的上一级的其他目录里，../文件夹名称/图片名称 ...
HTML相对路径写法
藓类少女的博客
04-06 2218
我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。 如果源文件和引用文件在同一个目录里，直接写引用文件名即可 假设info.html路径是：c:/Inetpub/wwwroot/sites/blabla/info.html 假设index.html路径是：c:/Inetpub/wwwroot/sites/blabla/index.htm...
相对路径的引用
power0405hf的专栏
05-27 636
由于不同浏览器对相对路径的解析不同，所以，最好统一从根目录开始 即： /x/y/z… /代表根目录
本地情况下 HTML文件中 五种相对路径（无点无斜杠、/、./、../和多个../） 的区别。
前端小白 阳阳 的博客
05-05 5960
背景介绍 Hi！我是前端小白 阳阳！为了记录学习心得并帮助有需要的你我他少走弯路节省时间，我写下这篇博客来简单粗暴的总结下 本地情况下 HTML文件中 五种相对路径（无点无斜杠、/、./、…/和多个…/） 的区别。 下面我们以 在index.html文件中引入style.css样式表 为例来进行讲解。 经验总结 一.无点无斜杠=一点一斜杠=当前文件所在目录： 背景： index.html文件在st...
关于vue.js发布后路径引用的问题解决
10-19
在Vue.js开发过程中，我们经常会遇到在项目打包发布后，静态资源（如CSS、JavaScript文件）的路径引用出现问题。这主要是因为Vue CLI在构建（build）项目时，根据配置生成的路径是相对基础URL的，当项目部署在非根...
相对路径转绝对路径共1页.pdf.zip
10-31
5. **Web开发**：在HTML、CSS或JavaScript中，链接和引用资源时，开发者会选择使用绝对路径或相对路径，取决于资源的共享性和项目结构。 了解并熟练掌握绝对路径和相对路径的使用及转换，对于日常的计算机操作和...
前端面试题CSS、HTML、JavaScript、HTTP、Vue....zip
10-10
在前端开发领域，掌握CSS、HTML、JavaScript、HTTP协议以及框架如Vue.js是至关重要的。以下是对这些关键知识点的详细阐述： **CSS（层叠样式表）** CSS是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
10-16
如果当前的路径是相对CSS文件的，可能需要向上移动两个层级（`../../`）到达`dist`根目录，然后找到`static/img`。 解决这个问题，我们需要修改`build/utils.js`文件。在合适的`if`语句下，添加代码来处理CSS中的...
HTML相对路径(Relative Path)和绝对路径(Absolute Path)
freshman_2007的专栏 已搬家至hi.baidu.com/oritenson
09-10 832
html中相对路径怎么写,什么是相对路径？相对路径的具体写法和用法
热门推荐
weixin_31925685的博客
05-30 2万+
之前，我们已经介绍了什么是绝对路径？绝对路径的具体写法和用法，今天，我们就一起来看看，有关相对路径的知识以及相对路径的具体写法和用法吧！什么是相对路径？相对路径是指以当前文件资源所在的目录为参照基础，链接到目标文件资源(或文件夹)的路径。假设，我们在一个A文件(比如a.html)中，链接另一个B文件(比如b.html)，也可以说是，当前文件A引用目标文件B，那么，相对路径就是以当前文件A所在的目录...
html5相对路径写法,相对路径写法
weixin_32557949的博客
06-03 1052
相对路径几种查找方式(1)同级直接编写, 例如:girl.png加上./ 编写, 例如./girl.png./代表当前目录,./girl.png代表在当前目录下查找(2)下级直接编写, 例如abc/girl.png加上./ 编写, 例如./abc/girl.png相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如abc/bbb/ccc/ddd/girl.png或./abc/bbb...
详解HTML的相对路径写法
绝圣弃智-零的博客
03-28 7800
如何表示上级目录 ../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。 假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html 假设index.html路径是：c:\Inetpub\wwwroot\sites\index.html 在info.html加入index.html超链接的代码应该...
相对路径的写法
zsq306650083的专栏
11-18 8697
以下为建立路径所使用的几个特殊符号，及其所代表的意义。 “./”：代表目前所在的目录。 “../”：代表上一层目录。 以”/”开头：代表根目录。
HTML引用外部css的路径
Ada_lake的博客
05-08 1万+
HTML引用外部css，其实说简单点就是 href 内填入路径即可 然而今天感觉自己之前都有点。。没引入进来就试出来的赶脚。。。 索性就把情况都归纳一下 1. html,css 在同一文件夹下 直接引用css的名字即可，因为在当前路径之下 2. html,css 在同一文件夹下 ，但！css在该文件夹的子！文件夹下 在引用css的名字前加上子文件夹名字即可，相当于顺着找就能找出这个css ...
./和../
最新发布
03-29
### 相对路径中 `./` 和 `../` 的含义 在计算机文件系统的路径表示中，`./` 和 `../` 是用于描述文件或目录位置的关键符号。 #### 1. `./` 表示当前目录 `./` 指代的是当前所在的目录。如果两个文件位于同一级目录下，则可以通过直接指定文件名或者加上前缀 `./` 来访问目标文件[^3]。例如，在HTML中可以这样定义链接： ```html <a href="./index2.html">跳转到index2.html页面</a> ``` 上述代码表明 `index2.html` 文件与该 HTML 文件处于相同级别的目录结构中。 #### 2. `../` 表示上一级目录 `../` 则用来指向上一层级的目录，也被称为父级目录。当需要引用上级目录下的资源时，就可以使用此标记。比如在一个多层嵌套的项目里，假设某个 CSS 或 JavaScript 文件要调用其祖父辈层级里的图像素材，那么可能就会写出像这样的语句： ```css background-image: url('../../images/example.png'); ``` 这里的 `'../../images/example.png'` 就是在告诉解析器先回到两级以上的祖先节点再进入 images 子文件夹寻找 example.png 这张图档[^2]。 综上所述，理解并正确运用这些简单的符号能够帮助开发者更高效地管理复杂的网站架构以及减少不必要的冗余操作。 ### 使用场景举例 对于前端开发而言，尤其是在 Vue.js 类型的应用程序构建过程中，除了常规的相对路径外还引入了一个特殊语法——`@/`, 它通常被配置成指向源码根目录 (如 src)[^4], 方便快速定位公共资源的位置而无需关心具体层次关系: ```javascript import Logo from '@/assets/logo.png'; ``` 这使得无论组件实际存储在哪一子模块内部都能一致地获取所需静态资产而不必担心因迁移而导致断链问题发生.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值