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

相关推荐
weixin_436804071 天前
图片在线预览工具 - 输入URL即刻查看远程图片
html·媒体
weixin_584121431 天前
HTML+layui表单校验范围值,根据条件显示隐藏某输入框
前端·html·layui
0思必得01 天前
[Web自动化] BeautifulSoup导航文档树
前端·python·自动化·html·beautifulsoup
松涛和鸣1 天前
DAY47 FrameBuffer
c语言·数据库·单片机·sqlite·html
西凉的悲伤1 天前
html制作太阳系行星运行轨道演示动画
前端·javascript·html·行星运行轨道演示动画
hxjhnct1 天前
响应式布局有哪些?
前端·html·css3
怎么就重名了1 天前
Kivy的KV语言总结
前端·javascript·html
永远的WEB小白1 天前
鼠标悬停显示提示文字 html+css
前端·javascript·html
winfredzhang1 天前
[全栈实战] 从零打造一个“沉浸式”私人云端阅读器 (Node.js + EPUB.js)
javascript·css·node.js·html·extjs·epub阅读器
研☆香1 天前
html界面的树形菜单介绍与制作
前端·microsoft·html