【HTML】HTML 标签 ④ ( 文件路径 | 相对路径 | 绝对路径 | 同级目录 | 下一级目录 | 上一级目录 )
2023-09-27 14:26:54 时间
一、文件路径
一个前端项目 , 可能有几百上千个 html , css , javascript 文件 , 这些文件都需要通过不同的目录层级进行整理存放 ;
访问文件时 , 需要使用 文件路径 进行访问 , 文件路径 分为 相对路径 和 绝对路径 ;
文件准备 : 以 D 盘下的 HTML 目录作为项目的根目录 , 执行
tree /F
命令 , 查看当前项目的目录结构 :
D:\HTML>tree /F
卷 DATA 的文件夹 PATH 列表
卷序列号为 D0D4-2A8C
D:.
│ hello.html
│ hello2.html
│
└─index
│ index.html
│
└─image
image.jpg
1、绝对路径
绝对路径很容易理解 , 就是以当前网站部署的服务器为参考基础 ;
如果要访问 hello2.html 目录 , 直接使用其在 文件系统 中的 路径 D:\HTML\hello2.html
访问即可 ;
绝对路径访问代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
</head>
<body>
<a href="D:\HTML\hello2.html">跳转到同级目录</a>
<br />
<a href="D:\HTML\index\index.html">跳转到下级目录</a>
</body>
</html>
效果展示 :
2、相对路径 ( 同级目录访问 | 下级目录访问 | 上级目录访问 )
相对路径 是以 当前 的 网页为基准 , 分为 三种情况 :
- 访问同级目录 : 直接使用 文件名称 进行访问 ;
- 访问下级目录 : 直接使用 目录 + 文件名称 进行访问 ;
- 访问上级目录 : 使用
../上级文件
进行访问 ; 如果使用上两级路径使用../../
访问即可 ;
以下面的文件结构为例 :
D:\HTML>tree /F
卷 DATA 的文件夹 PATH 列表
卷序列号为 D0D4-2A8C
D:.
│ hello.html
│ hello2.html
│
└─index
│ index.html
│
└─image
image.jpg
在 hello.html 中访问 hello2.html 文件 , 属于同级目录访问 , 直接使用 hello2.html 文件名访问 ;
<a href="D:\HTML\hello2.html">跳转到同级目录</a>
在 hello.html 中访问下级目录 index 目录中的 index.html 文件 , 属于下级目录访问 , 使用 目录名 + 文件名访问 ;
<a href="D:\HTML\index\index.html">跳转到下级目录</a>
在 index.html 中访问上级目录中的 hello.html 文件 , 属于上级目录访问 , 使用 ../上级文件
进行访问 ;
<a href="../hello.html">跳转到上一级目录</a>
完整代码示例 :
- hello.html 代码示例 : 其中涉及 同级目录访问 , 下级目录访问 ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
</head>
<body>
<a href="D:\HTML\hello2.html">跳转到同级目录</a>
<br />
<a href="D:\HTML\index\index.html">跳转到下级目录</a>
</body>
</html>
- index.html 代码示例 : 涉及上级目录访问 ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>首页</title>
</head>
<body>
<a href="../hello.html">跳转到上一级目录</a>
</body>
</html>
相关文章
- idea:运行时不自动编译发布文件,修改一个html都要重启
- springboot处理单个文件上传
- vscode 关联 vue文件为html
- selector是在文件夹drawable中进行定义的xml文件转载 https://www.cnblogs.com/fx2008/p/3157040.html
- 可以把一些常用的方法,写入js文件,引入html界面
- 编译Ngnix遇到的问题,查看程序依赖的库文件
- C实现改动可运行文件里的字符串,生成新的可运行文件
- java强行删除文件(针对进程正在使用的文件的删除)
- 删除个别主机的Know_hosts文件信息
- PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解【转】
- [C/C++]_[Unicode转Utf8,Ansi转Unicode,Ansi文件转Utf8文件]
- 【甄选靶场】 Vulnhub百个项目渗透——项目三十五:vulnerable_docker_containement-1(文件上传,docker提权)
- python:将一个文件转换为二进制文件(binary)
- 用php生成HTML文件的类
- 构建工具是如何用 node 操作 html/js/css/md 文件的
- ubuntu命令行打开html文件的方法
- .NET Core(C#)使用AngleSharp下载网页源码及资源文件(html,css,js,jpg等图片)
- Java 使用MD5、SHA1、SHA-256和SHA-512计算文件和字符串哈希值(hash checksum)
- Java Aspose.cells Excel(.xls,.xlsx)文件转成csv文件和html文件
- Html读取本地文件夹下文件
- Windows、Linux下文件操作(写、删除)错误的产生原因、及解决方法
- html文件里面怎么使用elementui的Message以及MessageBox
- [ Python入门教程 ] Python文件基本操作_os模块
- C语言 HTTP上传文件-利用libcurl库上传文件