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

相关推荐
UpUpUp……5 小时前
HTML简单语法标签(后续实操:云备份项目)
笔记·html
crazyme_616 小时前
前端自学入门:HTML 基础详解与学习路线指引
前端·学习·html
海拥✘18 小时前
CodeBuddy终极测评:中国版Cursor的开发革命(含安装指南+HTML游戏实战)
前端·游戏·html
荔枝吖1 天前
项目中会出现的css样式
前端·css·html
蓝婷儿1 天前
第一章:HTML基石·现实的骨架
前端·html
积极向上的龙1 天前
首屏优化,webpack插件用于给html中js自动添加异步加载属性
javascript·webpack·html
小堃学编程2 天前
前端学习(1)—— 使用HTML编写一个简单的个人简历展示页面
前端·javascript·html
航Hang*2 天前
前端项目2-01:个人简介页面
前端·经验分享·html·css3·html5·webstorm
水银嘻嘻2 天前
Web 自动化之 HTML & JavaScript 详解
前端·自动化·html
良木林2 天前
HTML难点小记:一些简单标签的使用逻辑和实用化
前端·html