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

相关推荐
IOT.FIVE.NO.111 小时前
Codex Skill 内部结构解析:从 SKILL.md 到 scripts、references、assets
前端·javascript·人工智能·笔记·html
我命由我1234513 小时前
前端开发概念 - 无障碍树
javascript·css·笔记·学习·html·html5·js
ZC跨境爬虫13 小时前
跟着 MDN 学 HTML day_29:(动态构建与更新 DOM 树)
前端·javascript·ui·html·html5·媒体
编程技术手记13 小时前
html table布局平衡
前端·html
ZC跨境爬虫15 小时前
跟着 MDN 学 HTML day_27:(深入理解 HTML 属性反射机制)
前端·javascript·ui·html·音视频·媒体
z194089206617 小时前
在线生成背景:字号层级怎么做才像「正式物料」
前端·javascript·html
ZC跨境爬虫18 小时前
跟着 MDN 学 HTML day_26:(DOM 的树形结构与节点导航)
前端·ui·html·音视频·视频编解码
华科大胡子18 小时前
HTML头部元信息避坑指南
html
ZC跨境爬虫19 小时前
跟着 MDN 学 HTML day_28:(使用选择器 API 在 DOM 树中进行选择与遍历)
前端·ui·html·音视频·webrtc
阿豪只会阿巴1 天前
【没事学点啥】TurboBlog轻量级个人博客项目——项目介绍
javascript·python·django·html