【小白专用】HTML相对路径表示方法

一. 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超链接的代码应该这样写:

<a href = "index.html">index.html</a>

如何表示上级目录

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

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

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

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

<a href = "../index.html">index.html</a>

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

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

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

<a href = "../../index.html">index.html</a>

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

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

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

<a href = "../wowstory/index.html">index.html</a>

如何表示下级目录

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

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

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

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

<a href = "html/index.html">index.html</a>

相关推荐
CodeCraft Studio9 小时前
借助Aspose.HTML控件,在 Python 中将 HTML 转换为 Markdown
开发语言·python·html·markdown·aspose·html转markdown·asposel.html
冰菓Neko11 小时前
HTML 常用标签速查表
前端·html
qq_三哥啊16 小时前
【HTML】<script>元素中的 defer 和 async 属性详解
html·js
Dxy123931021619 小时前
Python HTML模块详解:从基础到实战
开发语言·python·html
Amodoro1 天前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
飛_1 天前
【Word Press基础】创建一个动态的自定义区块
运维·nginx·html·word press
oioihoii1 天前
恋爱时间倒计时网页设计与实现方案
html
Hilaku1 天前
AVIF vs. JPEG XL:2025年,我们该为网站选择哪种下一代图片格式?
前端·javascript·html
LotteChar2 天前
HTML:从 “小白” 到 “标签侠” 的修炼手册
前端·html
寒..2 天前
网络安全第三次作业
前端·css·html