Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >./与../区别

./与../区别

作者头像
用户1088318
发布于 2025-05-21 02:00:03
发布于 2025-05-21 02:00:03
710
举报

“./”:代表目前所在的目录。

“../”:代表上一层目录。

”/”开头:代表根目录。

根目录下有Site1和Image/Image.jpg,Site1下有Page1.html文件和Site2文件夹。Site2下有Page2.html和Page2Image.jpg图片文件。

 1、文件在当前目录

Page2.html访问Page2Image.jpg <img src=”./Page2Image.jpg”>或者<img src=”Page2Image. jpg”>

2、文件在上一层目录

Page1.html访问Image下的Image.jpg <img src=”../Image/Image.jpg”> Page2.html访问Image下的Image.jpg <img src=”../../Image/Image.jpg”> 3、文件在下一层目录

Page1.html访问Site2文件夹下的Page2Image.jpg <img src=” ./Site2/Image.jpg”><img src=” Site2/Image.jpg”> 4、根目录表示法,任何页面访问Image下的Image.jpg图片

<img src=”/Image/Image.jpg”> 三、常使用且要注意的地方

A、Css中的图片路径。写css里的图片路径,url是图片针对样式文件的位置

 – index.html

– css /main.css

– images/1.jpg

如果: index.html引用main.css,且在main.css 引用images目录里的1.jpg :

background: url(../images/1.jpg) *** 正确 background: url(images/1.jpg) *** 错误 B、Js中图片地址均相对于调用JS的页面的相对位置。

document.getElementById("IMG1").style.backgroundImage = "url(../Images/login.jpg)"; ———————————————— 版权声明:本文为CSDN博主「隐行舟」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/qq_40967319/article/details/107671625

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-05-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
一个拼写错误让整个互联网一起犯错
在 Web 开发的世界里,有这样一个字段——它每天默默地工作着,记录着用户的来源,保护着网站的安全,却因为一个历史性的拼写错误而成为了程序员们茶余饭后的谈资。它就是 HTTP 头部中的 Referer 字段。
wayn
2025/06/19
740
一个拼写错误让整个互联网一起犯错
绝对路径和相对路径(转)
1、相对路径-顾名思义,相对路径就是相对于当前文件的路径。网页中一般表示路径使用这个方法。
山河木马
2019/03/05
2.6K0
简单系统后台页面开发分享【2020网页综合笔记01】
简介 INTRODUCTION必须要掌握的内容:1.建立本地站点和站点管理 2.标签html head title body p table tr td h a font hr img 3.元素添加与修饰:文本、水平线、特殊字符、图像、flash动画 4.表格布局、合并、拆分 5.框架布局 6.层与时间轴的应用 7.表单的制作 8.css样式的使用
刘金玉编程
2020/12/02
5910
简单系统后台页面开发分享【2020网页综合笔记01】
webpack学习(二):先写几个webpack基础demo
一、先写一个简单demo1 1-1安装好webpack后创建这样一个目录: 1-2:向src各文件和dist/index.html文件写入内容: <!DOCTYPE html> <html lang=
柴小智
2018/04/10
6420
webpack学习(二):先写几个webpack基础demo
相对路径和绝对路径
根目录下有demo1和images/1.jpg,demo1下有index1.html文件和demo1.1文件夹。demo1.1下有index2.html和2.jpg图片文件。
狼啸风云
2019/10/26
5.4K0
Nginx 动静分离与负载均衡的实现
      企业中,随着用户的增长,数据量也几乎成几何增长,数据越来越大,随之也就出现了各种应用的瓶颈问题。
星哥玩云
2022/07/25
5230
Nginx 动静分离与负载均衡的实现
webpack4实用配置指南-上手篇
算起来已经有3到4个项目的webpack构建打包经历。然而每次搭建起来还是有新手既视感,比较捉急。工具用法的东西,好记性不如烂笔头,有必要系统梳理下webpack的配置常用配置以及构建优化。
elson
2018/06/19
4.9K0
关于环境保护html网页设计完整版,5个以环境为主题的网页设计与实现
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发工程师,技术
IT司马青衫
2022/08/15
9430
关于环境保护html网页设计完整版,5个以环境为主题的网页设计与实现
Vue2 后台管理系统解决方案
之前在公司用了Vue + Element组件库做了个后台管理系统,基本很多组件可以直接引用组件库的,但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能,就需要引用其他的组件才能完成。从寻找组件,到使用组件的过程中,遇到了很多问题,也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验,总结成这个后台管理系统解决方案。
全栈程序员站长
2022/07/07
1.3K0
Vue2 后台管理系统解决方案
用织梦实现一个从零到可以正常访问的网站--第二章
首先我需要写一个例子,之前的例子被我玩坏了,再写一个完整的模板出来太耗费时间了,我直接写一个比较简单的页面,但是基本上网站都是这几块,我们先看一下运行的效果:
何处锦绣不灰堆
2020/05/29
9650
用织梦实现一个从零到可以正常访问的网站--第二章
抗疫逆行者HTML网页作业 感动人物网页代码成品 最美逆行者网页模板 致敬疫情感动人物网页设计制作
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发工程师,
IT司马青衫
2022/08/19
9280
抗疫逆行者HTML网页作业 感动人物网页代码成品 最美逆行者网页模板 致敬疫情感动人物网页设计制作
使用 Python Eel 构建多页面应用并指定端口号
Python Eel 是一个强大的工具,可以帮助开发者使用 Python 构建基于 Web 技术的桌面应用程序。本教程将详细介绍如何使用 Python Eel 创建一个多页面的桌面应用,并且重点讲解如何指定应用程序使用的端口号。
IT蜗壳-Tango
2024/08/05
3000
如何使用html、css制作一个期末作业网站【羽毛球体育运动主题html网页设计】
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 🥇 关于作者: 💬历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来! 一、👨‍🎓网站题目 🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。 二、✍️网站描述 🏷️ 大学生校园运动静态HTML网页设计作品,采用DIV CSS
IT司马青衫
2022/08/21
1.2K0
如何使用html、css制作一个期末作业网站【羽毛球体育运动主题html网页设计】
论网速快慢的区别
随着网络的普及,用户对响应速度快慢越来越重视了,网站越快,用户的黏性和转化率也会越高。 简单来说,就是要提高速度!影响网站速度的因素有很多,比如………………….
阿珏
2024/10/16
1330
论网速快慢的区别
Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章
本博客使用的是Hugo的LoveIt主题,本文也是基于该主题而写的,不过Hugo的美化步骤应该大同小异,版本如下:
雨临Lewis
2022/01/12
2.6K0
Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)
Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外的好处。例如手Q的多webview架构,新开页面有利于ios右划返回,也避免了返回时页面的刷新。 所以,这里我们探讨一下如何配置实现多页面的项目框架。这里是开篇,先以最简单的纯前端多页面为例入手,最终目标是完成Node.js多页面直出+前后端同构的架构。 本文源代码:https://github.com/ke
用户1258909
2018/07/03
1.4K0
CentOS 7.3配置Nginx虚拟主机
http://192.168.204.135:8081/ http://192.168.204.135:8082/
星哥玩云
2022/07/25
5330
CentOS 7.3配置Nginx虚拟主机
【目录】Hexo+NexT+Gemini 搭建博客拥抱舒爽
首先在配置Hexo+NexT之前,最好阅读一下 Hexo官方文档 和 NexT使用文档
零式的天空
2022/03/27
2.2K0
【目录】Hexo+NexT+Gemini 搭建博客拥抱舒爽
Hugo系列(4) - 从Hexo迁移至Hugo以及使用LoveIt主题的踩坑记录
本文主要记录从Hexo迁移至Hugo所遇到的一些坑,以及Hugo的LoveIt主题的一些bug之类的应对方案。下面是涉及到的Hexo、Hugo以及LoveIt各自的版本:
雨临Lewis
2022/01/12
1.7K0
仅需 5 分钟,快速优化 Web 性能的10 个手段
作者:Marc 译者:前端小智 来源:dev 本人已经过原作者制授权翻译。 在这篇文章中,主要介绍10种快速提高网站性能的方法,你只需5分钟内就可以将它应用到你的网站上,废话不多说,让我们进入正题吧
前端小智@大迁世界
2020/10/28
8320
仅需 5 分钟,快速优化 Web 性能的10 个手段
推荐阅读
相关推荐
一个拼写错误让整个互联网一起犯错
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档