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

相关推荐
神之王楠3 小时前
如何通过js加载css和html
javascript·css·html
茶卡盐佑星_4 小时前
meta标签作用/SEO优化
前端·javascript·html
金灰4 小时前
HTML5--裸体回顾
java·开发语言·前端·javascript·html·html5
Zheng1136 小时前
【可视化大屏】将柱状图引入到html页面中
javascript·ajax·html
酷酷-19 小时前
彩虹易支付最新版源码及安装教程(修复BUG+新增加订单投诉功能)
html·php·bug
gopher951120 小时前
HTML详解
前端·html
等什么君!1 天前
复习HTML(进阶)
前端·html
谢尔登1 天前
【移动端】事件基础
前端·javascript·html
谢尔登1 天前
【移动端】Viewport 视口
前端·javascript·html
洛文泽1 天前
application.yml和bootstrap.yml
java·spring boot·bootstrap·html