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

相关推荐
shandianchengzi4 小时前
【开源工具】我做了一个周深歌曲淘汰赛生成器:挑选 128 首歌 PK,选出你的年度 TOP1
html·音乐·网页·世界杯
触底反弹13 小时前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战
前端·css·html
两点王爷1 天前
一个快速加载面和多面数据的html测试页面(可以导出geojson数据文件)
前端·html·gis
杨超越luckly1 天前
Agent应用指南:长三角41城跨城人口流动OD数据分析
python·数据挖掘·数据分析·html·可视化
不好听6132 天前
HTML 事件监听机制:从 DOM Level 0 到 React 合成事件
前端·react.js·html
xcLeigh2 天前
Doubao-Seed-Evolving大模型接入教程|搭建全品类提示词+AI工具导航网页
前端·人工智能·python·ai·html·ai开发·豆包
2301_794461572 天前
JavaScript 基础知识点详解
前端·javascript·html
门前大桥下.2 天前
HTML-01我的第一个网页
前端·html
datagear2 天前
DataGear 6.0.0 新特性之本地图表
数据分析·html·数据可视化