`

HTML相对路径(Relative Path)和绝对路径(Absolute Path)

    博客分类:
  • html
阅读更多
HTML相对路径(Relative Path)和绝对路径(Absolute Path)
HTML初学者会经常遇到这样一个问题,如何正确引用一个文件。比如,怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)?怎样在一个网页中插入一张图片?......(相关教程:HTML超链接;HTML图片)
如果你在引用文件时(如加入超链接,或者插入图片等),使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。
为了避免这些错误,正确地引用文件,我们需要学习一下HTML路径。
HTML有2种路径的写法:相对路径和绝对路径。

HTML相对路径(Relative Path)
同一个目录的文件引用
如果源文件和引用文件在同一个目录里,直接写引用文件名即可。
我们现在建一个源文件info.html,在info.html里要引用index.html文件作为超链接。
假设info.html路径是:c:\Inetpub\wwwroot\sites\m663\info.html
假设index.html路径是:c:\Inetpub\wwwroot\sites\m663\index.html
在info.html加入index.html超链接的代码应该这样写:

<a href = "index.html">index.html</a>
 

如何表示上级目录
../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推。
假设info.html路径是:c:\Inetpub\wwwroot\sites\m663\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\m663\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\m663\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\m663\info.html
假设index.html路径是:c:\Inetpub\wwwroot\sites\m663\html\index.html
在info.html加入index.html超链接的代码应该这样写:

<a href = "html/index.html">index.html</a>

假设info.html路径是:c:\Inetpub\wwwroot\sites\m663\info.html
假设index.html路径是:c:\Inetpub\wwwroot\sites\m663\html\tutorials\index.html
在info.html加入index.html超链接的代码应该这样写:

<a href = "html/tutorials/index.html">index.html</a>
HTML绝对路径(Absolute Path)
HTML绝对路径(absolute path)指带域名的文件的完整路径。
假设你注册了域名www.m663.com,并申请了虚拟主机,你的虚拟主机提供商会给你一个目录,比如www,这个www就是你网站的根目录。
假设你在www根目录下放了一个文件index.html,这个文件的绝对路径就是: http://www.m663.com/index.html。
假设你在www根目录下建了一个目录叫html_tutorials,然后在该目录下放了一个文件index.html,这个文件的绝对路径就是http://www.m663.com/html_tutorials/index.html。
分享到:
评论

相关推荐

    相对路径转换工具.rar

    有两种主要类型的路径:绝对路径和相对路径。绝对路径是从根目录开始的完整路径,而相对路径是相对于当前工作目录的路径。本篇文章将深入探讨绝对路径与相对路径的概念、它们之间的转换以及如何在C++、Java和Python...

    WPF中Image控件Source属性的相对路径和绝对路径问题(经验总结)

    WPF 中 Image 控件 Source 属性的相对路径和绝对路径问题总结 在 WPF 中,Image 控件的 Source 属性可以指定为相对路径或绝对路径,但这两种路径有不同的使用场景和注意事项。本文将总结 WPF 中 Image 控件 Source ...

    matlab开发-absolutepath

    在这里,`relativePath`是你想要转换的相对路径,`absolutePath`则是返回的绝对路径。如果相对路径是相对于当前工作目录的,`absolutepath`会将其转换为完整的系统路径。 在实际应用中,我们可能需要处理各种情况,...

    HTML相对路径(Relative Path)和绝对路径(Absolute Path)深入理解

    …… 加上struts中相对路径也是大行其道,一不小心很容易搞混淆。 如果在引用文件时(如加入超链接,或者插入图片等),使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。 为了...

    获取相对路径

    绝对路径是从根目录开始到目标文件或目录的完整路径,而相对路径则相对于当前工作目录或者指定的基路径。在某些场景下,如软件部署、资源引用或者文件操作,使用相对路径可以更加灵活且节省存储空间。本篇将详细介绍...

    C#绝对路径拼接相对路径的实例代码

    尤其是在处理复杂的文件系统操作时,正确地管理绝对路径和相对路径尤为重要。本文将详细探讨如何在C#中有效地实现绝对路径与相对路径的拼接,并提供一个具体的示例来帮助理解这一过程。 #### 绝对路径与相对路径的...

    path-judge:判断路径是绝对路径还是相对路径

    判断路径是绝对路径还是相对路径以及一些额外的功能。 安装 npm install path-judge --save 开始 pathJudge = require 'path-judge' 接口演示 ### # @param path {string} the path string. # @return {boolean} ...

    Linux 相对路径和绝对路径的使用

    主要分为两种类型:绝对路径和相对路径,它们在shell环境中有着广泛的应用。 1. **绝对路径(Absolute Pathname)** 绝对路径是描述文件或目录精确位置的方式,它始终以一个斜杠`/`开头。这种路径提供了从根目录开始...

    php代码-相对路径转绝对

    首先,我们要理解什么是相对路径和绝对路径。**绝对路径**是从根目录开始的完整路径,它明确指定了文件或目录的确切位置。而**相对路径**则是相对于当前工作目录的路径,它的起点是执行PHP脚本时的当前工作目录。 ...

    Java中获得路径

    - `Path`类提供了丰富的操作方法,如`isAbsolute()`检查路径是否为绝对路径,`resolve()`和`resolveSibling()`用于合并路径,`getParent()`获取父路径,`getNameCount()`获取路径段的数量,`getName(int index)`获取...

    Java区分路径和相对路径

    - 自定义方法 `isAbsolutePath(String path)`: 示例代码中提供的这个方法结合了上述两种策略,如果路径以 `/` 开头或包含 `:`,则认为它是绝对路径。 ```java public boolean isAbsolutePath(String path) { if ...

    matlab开发-相对绝对卷文件名

    标题“matlab开发-相对绝对卷文件名”涉及的核心概念是理解和操作文件的相对路径与绝对路径。这两种路径类型在文件系统的导航中扮演着不同的角色。 **绝对路径名**是文件或目录在文件系统中的完整路径,包括所有父...

    关于html5三种链接路径问题

    #### 绝对路径(Absolute Path) 绝对路径是指从根目录开始完整地描述文件位置的路径。它通常包含协议(如`http://`或`https://`)、域名以及文件的具体路径。例如: - `http://www.example.com/images/logo.png` ...

    php代码-相对路径转绝对路径

    相对路径和绝对路径是两种不同的路径表示方式,它们在文件和目录的引用中起到关键作用。本篇文章将详细探讨如何在PHP中将相对路径转换为绝对路径,以及相关的重要知识点。 **一、路径类型** 1. **绝对路径**:它...

    跨平台路径无忧愁:CMake中的路径处理秘籍

    为了将相对路径转换为绝对路径,可以使用`CMAKE_CURRENT_SOURCE_DIR`和`CMAKE_CURRENT_BINARY_DIR`: ```cmake # 假设需要将相对路径转换为绝对路径 file(RELATIVE_PATH relative_path "some_directory") file...

    PHP利用正则表达式将相对路径转成绝对路径的方法示例

    在进行网站开发或网络爬虫开发时,常常需要处理链接,将相对路径转换为绝对路径是常见需求。相对路径是相对于当前页面的URL,而绝对路径是完整指向资源的URL。本文将展示如何使用PHP中的正则表达式功能,将相对路径...

Global site tag (gtag.js) - Google Analytics