【小白专用】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>

相关推荐
我命由我123451 小时前
React - React 配置代理、搜索案例(Fetch + PubSub)、React 路由基本使用、NavLink
开发语言·前端·javascript·react.js·前端框架·html·ecmascript
reasonsummer2 小时前
【白板类-01-01】20260326水果连连看01(html+希沃白板)
前端·html
dear_bi_MyOnly2 小时前
【 HTML + CSS + JavaScript 学习速通 max】
javascript·css·学习·html·学习方法
星空3 小时前
css+html案例
css·html·css3
Dxy12393102163 小时前
html鼠标定位线
前端·html·计算机外设
Dxy12393102164 小时前
HTML 如何随时保存用户操作数据:防止刷新丢失的完整指南
前端·html
Dxy12393102164 小时前
前端函数设计指南:从 HTML 中的 JavaScript 函数到模块化实践
前端·javascript·html
Amctwd5 小时前
【Android】将 html 打包为 apk
android·html·harmonyos
xingyynt1 天前
【HTML+CSS】使用HTML与后端技术连接数据库
css·数据库·html
PieroPc1 天前
电脑DIY组装报价系统 用MiMo V2 Pro 写html ,再用opencode(选MiMo 作模型) 当录入口
前端·html