7、绝对路径和相对路径

article/2025/11/8 23:01:16

我们在使用 HTML 中的 <a> 标签、<img> 标签、<link> 标签以及 <script> 标签时往往会涉及到路径。例如 <a> 标签,如果我们在写路径时,使用了错误的路径,就会导致跳转失败,为了避免这种情况,我们需要学习一下 HTML 的路径。在 HTML 中,路径具体分为绝对路径相对路径

1. 绝对路径

绝对路径分为本地绝对路径网络绝对路径两种。

本地绝对路径一般指从盘符开始,到文件名称结束;

网络绝对路径指从网站的域名开始,到文件名结束,在使用时需要加上协议。绝对路径之所以称为绝对,是指当所有页面引用同一个文件时,使用的路径都是一样的。

示例如下:

①D:/Hbulider/HBuilder/tools/nview/index.js
②C:/Users/admin/Desktop/C语言中文网/url/url.html
③http://c.biancheng.net/view/7410.html
④http://c.biancheng.net:80/view/7410.html
⑤http://c.biancheng.net

我们来具体分析一下:
① 和 ② 表示本地绝对路径,因为它们是从盘符开始的;
③ ④ ⑤表示网络绝对路径,其中,③ 和 ④ 表示的地址是相同的(因为 http 默认端口号是 80,而且可以省略),类似于 ⑤ 这种省略路径和文件名的 url 属于特例,浏览器在解析时会自动解析项目里的 index.html 文件。

2. 相对路径

相对路径与绝对路径类似,不同的是在描述目录或文件路径时,所采用的参考点不同。绝对路径以域名或盘符为参考点,到文件名称结束;相对路径以当前文件位置为参考点,到文件名称结束。

接下来,我们看一个示例。假设读者现有的项目目录如下图所示:
在这里插入图片描述
目前有一个需求,在 index.html 页面中有一个 <a> 标签,点击它要跳转到 login.html,那么我们可以怎么实现呢?

毫无疑问,可以使用上面讲过的绝对路径 <a href=”http://c.biancheng.net/html/login.html”></a> 来跳转到 login.html;此处我们还可以使用相对路径实现。具体有以下几种方式:

<a href=./html/login.html”>跳转到login.html</a>
<a href=”html/login.html”>跳转到login.html</a>
<a href=../html/login.html”>跳转到login.html</a>

在上述3种方式中,我们使用了 ./ 以及 ../,接下来看一下他们分别代表什么呢?
./ 表示同级目录;
../ 表示上一级目录, ../../ 表示上两级目录,以此类推。

其中,./可以省略不写,也就是说./html/login.htmlhtml/login.html被浏览器解析为同一个路径。

相对路径的写法可以有多种,我们只需要把./以及…/代表的含义搞清楚,就可以应对所有的相对路径。


http://chatgpt.dhexx.cn/article/WGRDHPlN.shtml

相关文章

Java中的绝对路径和相对路径

绝对路径和相对路径&#xff1a; 绝对路径&#xff1a; 绝对路径名是完整的路径名&#xff0c;不需要任何其他信息就可以定位它所表示的文件。&#xff08;注意&#xff1a;文件路径不能出现中文字符&#xff0c;否则可能会报错&#xff09; 相对路径&#xff1a; 在IDEA环境中…

Linux中的绝对路径和相对路径

回到顶部 一、介绍 1&#xff0c;文件路径 什么是文件的路径&#xff1f; 答&#xff1a;这个文件存放的地方&#xff0c;可以联想为 文件的“家”。 在Linux中&#xff0c;存在着绝对路径和相对路径 绝对路径&#xff1a;路径的写法一定是由根目录 / 写起的&#xff0c;例…

最最基础的干货:Linux中的绝对路径和相对路径

路径是Linux中最基本的概念之一&#xff0c;这是每个Linux用户都必须知道的。 路径是Linux中最基本的概念之一&#xff0c;这是每个Linux用户都必须知道的。 路径是指文件和目录的引用方式。它给出了文件或目录在 Linux 目录结构中的位置&#xff0c;由名称和斜杠组成。 /ho…

文件名 绝对路径与相对路径

EGE专栏&#xff1a;EGE专栏 目录 1. 文件路径1.1 DOS路径的构成1.1.1 卷号或驱动器1.1.2 目录名称1.1.3 文件名 1.2 当前目录 (Current directory)程序中当前目录的获取 1.3 切换盘符&#xff08;驱动器跳转&#xff09;1.4 设置当前目录1.4.1 驱动器的当前目录如何查看各驱动…

【软考学习14】绝对路径和相对路径的区别和联系

本文讲解文件存储中绝对路径和相对路径的区别和联系。简单来讲&#xff0c;绝对路径是把文件所在的完整路径逐一标识出来&#xff0c;相对路径是对某个目录的参考路径&#xff0c;在实战项目的开发中&#xff0c;相对路径会使用的多一些&#xff0c;绝对地址可以用于开发调试环…

python绝对路径和相对路径

今天记录一下python绝对路径和相对路径的问题 提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、绝对路径二、相对路径三、如何查看当前所在目录 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可…

python的绝对路径和相对路径

一、绝对路径 一个文件的真实位置&#xff0c;根据这个路径层级可以找到这个文件即绝对路径。在wins上可以通过shift 鼠标右键调出来该文件的绝对路径&#xff0c;shift建按住不要松。 二、相对路径 相对路径即相对于当前的工作文件夹&#xff0c;你的路径是什么。 【绝对路径…

关于绝对路径与相对路径(详细)

绝对路径与相对路径总结&#xff08;详细&#xff09; 绝对路径与相对路径1 绝对路径1.1绝对路径&#xff08;盘符&#xff09;1.2绝对路径&#xff08;网址&#xff09; 2 相对路径2.1 相对路径(平级)2.2 相对路径(上一级)2.3 相对路径(下一级) 绝对路径与相对路径 在页面布局…

【计算机基础】绝对路径和相对路径

目录 一.绝对路径 二.相对路径 例如 三.举例 一.绝对路径 绝对路径是指从根目录开始的完整路径&#xff0c;包括所有父目录的路径&#xff0c;直到目标文件或者目录 所在的位置。 全文件名全路径文件名绝对路经完整的路径 例如&#xff0c;在windows系统中&#xff0c;绝…

Navicat premium 12 破解版下载及安装过程

在网上找了很多Navicat的破解版及下载补丁&#xff0c;都失效了&#xff0c;发现自己保留了一份&#xff0c;分享给大家。 链接&#xff1a;https://pan.baidu.com/s/1wK0j9SCm3LQLQmArjzwIyw 提取码&#xff1a;2333 1、首先安装navicat120_premium_cs_x64.exe&#xff0c;安…

LinuxCentOS安装破解版Navicat

首先在官网下载好对应位数版本的Navicat https://www.navicat.com.cn/download/navicat-premium 然后上传到linux上解压好 双击进来后点开这个文件 把编码改为中文 进入Navicat文件夹里,把该文件夹下所有东西都删除掉,留一个空文件夹 https://download.csdn.net/download/kxj1…

Mac OS下破解Navicat Premium

1、下载Navicat Premium 英文64位 http://download.navicat.com/download/navicat120_premium_en.dmg 中文简体64位 http://download.navicat.com/download/navicat120_premium_cs.dmg 2、生成自己的RSA公钥私钥对 注意&#xff1a;密钥是2048位的&#xff0c;PKCS#8格式 生…

navicat 历史版本下载

这里以 navicat premium 举例 进入官网 http://www.navicat.com.cn/选择 navicat permium 16点击免费试用点击直接下载&#xff0c;进入下载页面右键点击下载处【下图所示】修改链接&#xff0c;即可直接下载指定版本 点击免费试用 点击直接下载 进入下载页面会自动下载一次&a…

deepin安装navicat12 premium (破解版)替换商店的11版

参考&#xff1a;http://www.pianshen.com/article/8781183806/ 一、首先下载破解版的navicat 链接&#xff1a;https://pan.baidu.com/s/1ulptSderoG0EbEQpO3Adww 提取码&#xff1a;8oc3 二、解压 下载压缩文件&#xff0c;双击压缩文件&#xff0c;拖出文件即可 三、运…

mac 破解安装 navicat

Navicat Premium For Mac 12.0.2x 破解教程 安装步骤 第一步&#xff1a;下载Navicat Premium For Mac 12.0.22版本&#xff0c;正常安装。 navicat 下载地址&#xff1a;Navicat Premium for Mac v12.0.22下载 第二步&#xff1a;Finder中&#xff0c;选择应用程序 -》选择…

安装并破解Navicat的步骤

首先&#xff0c;准备一个Navicat的应用程序&#xff0c;以及的破解文件的压缩包(这个压缩包我会上传)。如下图&#xff1a; 本次采用的破解方式是文件覆盖破解。 首先&#xff0c;先点击Navicat的应用程序来安装它&#xff0c;如下图&#xff1a; 点击上图中的“下一步”&…

Navicat中文版破解安装

1.下载Navicat_20238.zip文件&#xff0c;解压到制定文件夹 2.下载安装navicat110_mysql_cs_x86.exe&#xff0c;完成后&#xff0c;将PathNavicat.exe放入Navicat for MySQL文件中&#xff0c;并运行。破解完毕

Navicat Premium MAC版本破解

前言 Navicat主要用户数据库建模设计&#xff0c;看了一下Navicat Premium MAC版本的价格&#xff08;9999/年&#xff09;&#xff0c;只是个人临时使用&#xff0c;因此决定还是找个破解之道。 建议&#xff1a;详细破解步骤&#xff0c;先看下文链接&#xff0c;再看本文&…

Navicat-mysql 中文破解版下载及基础使用教程

Navicat 10.0.11 中文破解版&#xff0c;资源下载地址&#xff1a;https://download.csdn.net/download/csdn_aiyang/10542781 介绍 Navicat是一套快速、可靠并价格相宜的数据库管理工具&#xff0c;专为简化数据库的管理及降低系统管理成本而设。它的设计符合数据库管理员、开…

Navicat Premium 12 免安装版

Navicat Premium 12 #注:该版本为免安装&#xff0c;可以直接运行navicat.exe无需安装1## 标题软件解压出来点击运行该exe程序2.点击连接选择对应的数据库 3.连接数据库如数据库在本机中 主机填写localhost 或者 内网IP地址127.0.0.1 4.连接成功显示数据库的表 5.数据库中显…