html站点相对路径,HTML的相对路径和绝对路径?

HTML有2种路径的写法:相对路径和绝对路径。

HTML相对路径(Relative Path)

同一个目录的文件引用

如果源文件和引用文件在同一个目录里,直接写引用文件名即可。

我们现在建一个源文件info.html,在info.html里要引用index.html文件作为超链接。

假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:c:\Inetpub\wwwroot\sites\blabla\index.html

在info.html加入index.html超链接的代码应该这样写:

index.html

如何表示上级目录

../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推。

假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:c:\Inetpub\wwwroot\sites\index.html

在info.html加入index.html超链接的代码应该这样写:

index.html

假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:c:\Inetpub\wwwroot\index.html

在info.html加入index.html超链接的代码应该这样写:

index.html

假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:c:\Inetpub\wwwroot\sites\wowstory\index.html

在info.html加入index.html超链接的代码应该这样写:

index.html

如何表示下级目录

引用下级目录的文件,直接写下级目录文件的路径即可。

假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:c:\Inetpub\wwwroot\sites\blabla\html\index.html

在info.html加入index.html超链接的代码应该这样写:

index.html

假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html

在info.html加入index.html超链接的代码应该这样写:

index.html

HTML绝对路径(Absolute Path)

HTML绝对路径(absolute path)指带域名的文件的完整路径。

假设你注册了域名www.blabla.cn,并申请了虚拟主机,你的虚拟主机提供商会给你一个目录,比如www,这个www就是你网站的根目录。

假设你在www根目录下放了一个文件index.html,这个文件的绝对路径就是: http://www.aaa.cn/index.html。

假设你在www根目录下建了一个目录叫html_tutorials,然后在该目录下放了一个文件index.html,这个文件的绝对路径就是http://www.aaacn/html_tutorials/index.html。

### 服务器中绝对路径相对路径的区别 在服务器环境中,理解绝对路径相对路径对于资源定位至关重要。 #### 绝对路径 绝对路径是从根目录开始指定文件或目录位置的方式。无论当前工作目录如何变化,该路径始终指向同一目标[^1]。 - **定义** - 对于Linux/Unix系统而言,绝对路径总是以斜杠`/`开头;而在Windows操作系统下,则通常由盘符(如C:\)起始。 - **使用场景** - 当需要精确无误地访问特定文件而不受当前位置影响时采用此方式。例如,在配置Web应用的全局静态资源加载地址时会优先考虑使用绝对路径,因为这可以确保不同请求都能正确获取所需数据。 - **代码示例** ```html <!-- 假设网站部署在 http://example.com --> <img src="/images/logo.png" alt="Logo"> ``` 这段HTML代码表示从站点根目录下的`images`文件夹读取名为`logo.png`的图像文件。 #### 相对路径 相对于当前文档所在的位置来描述其他文件或目录的方法称为相对路径。它依赖于上下文环境,并且随着起点的不同而有所改变。 - **定义** - 如果两个文件位于同一个文件夹内,则可以直接写出另一个文件的名字作为其相对路径;如果要向上返回一层或多层父级文件夹,则需利用双点加斜线(`../`)的形式表达。 - **使用方法** - 在构建项目结构复杂的应用程序时非常有用,尤其是在开发阶段频繁调整文件布局的情况下。通过保持各部分之间基于彼此位置的关系不变,即使整个工程被移动到新的地方也能正常运作。 - **代码示例** ```html <!-- 同样假设网站部署在 http://example.com 并且当前页面位于 /about/index.html 下 --> <link rel="stylesheet" href="../css/style.css"> <!-- 访问上级目录中的 CSS 文件 --> <script src="./js/app.js"></script> <!-- 加载同级目录里的 JavaScript 文件 --> <a href="../../index.html">回到首页</a> <!-- 跳转至更高级别的 index 页面 --> ``` 以上例子展示了如何在一个典型的多层级网页架构里运用相对路径去关联各类外部资源以及实现导航功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值