`

HTML文件相对路径(Relative Path)

阅读更多

http://www.blabla.cn/html_tutorials/022_html_path.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>

 假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html

 

假设index.html路径是:c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html

在info.html加入index.html超链接的代码应该这样写:

 

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

 

 

 

HTML绝对路径(Absolute Path)

HTML绝对路径(absolute path)指带域名的文件的完整路径。

假设你注册了域名www.blabla.cn,并申请了虚拟主机,你的虚拟主机提供商会给你一个目录,比如www,这个www就是你网站的根目录。

假设你在www根目录下放了一个文件index.html,这个文件的绝对路径就是: http://www.blabla.cn/index.html。

假设你在www根目录下建了一个目录叫html_tutorials,然后在该目录下放了一个文件index.html,这个文件的绝对路径就是http://www.blabla.cn/html_tutorials/index.html。

分享到:
评论

相关推荐

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

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

    关于html5三种链接路径问题

    #### 相对路径(Relative Path) 相对路径是一种基于当前文档位置来确定目标文件位置的路径。使用相对路径可以使站点更加灵活,特别是在站点结构发生变化或者将整个站点移动到另一个服务器上的时候。 ##### 应用...

    PHP生成压缩文,不带要压缩文件的根目录

    如果文件分布在不同的目录下,可能需要更复杂的逻辑来处理相对路径。另外,如果文件路径中包含符号链接,还需要额外处理,确保ZIP文件包含的是实际的目标文件,而不是链接本身。 总结一下,通过使用PHP的ZipArchive...

    20-path (路径).pdf

    此方法计算从`from`路径到`to`路径的相对路径。例如: - `path.relative('/home/user', '/home/user/dir/file.txt')` 返回 `dir/file.txt` ### 13. `path.resolve([...paths])` 此方法用于解析出完整的绝对路径。...

    使用PHP计算两个路径的相对路径

    在示例中,调用`relativePath('/a/b/c/d/a.php', '/a/b/1/2/b.php')`会输出`../../../../b.php`,这是从`/a/b/c/d/a.php`到达`/a/b/1/2/b.php`所需的相对路径。 了解了这些基础知识,我们还可以讨论一下在实际开发...

    php代码-相对路径转绝对

    尤其在处理文件系统操作或URL时,经常需要将相对路径转换为绝对路径。相对路径是指相对于当前工作目录的路径,而绝对路径则是指从根目录开始的完整路径。下面我们将详细讨论如何在PHP中实现这个功能,并通过`main....

    jszip解压zip

    // content 是文件内容,relativePath 是文件的相对路径 console.log('文件:', relativePath, '内容:', content); }); } else if (file.isDirectory) { // 处理目录 } }); ``` 5. **保存解压后的文件**:如果...

    遍历文件夹自动生成目录树

    我们利用这些信息构建一个字典,键为相对路径,值为该路径下所有文件的列表。 在实际应用中,我们可能还需要处理一些特殊情况,比如排除特定类型的文件或目录,或者对结果进行排序。例如,可以添加过滤器只包含特定...

    超级POM_POM文件总体配置说明.pdf

    `&lt;parent&gt;`元素定义了父POM的坐标,包括`&lt;groupId&gt;`、`&lt;artifactId&gt;`、`&lt;version&gt;`,以及可选的`&lt;relativePath&gt;`,它指定了父POM在本地文件系统中的相对路径,方便Maven查找。通常情况下,`&lt;relativePath&gt;`的默认值...

    c++压缩、解压

    `recursiveCompress`函数会遍历指定路径下的每个文件和子目录,对文件进行压缩,并在压缩时保留文件的相对路径信息。 在C++中,通过结合使用像Zlib这样的压缩库和递归函数,我们可以构建一个完整的文件和文件夹压缩...

    PHP程序设计-3期(KC016) 2.9.4 dirname函数常见问题.docx

    确保在调用`dirname()`前先使用`realpath()`函数将相对路径转换为绝对路径: ```php $relativePath = './folder/file.txt'; $absolutePath = realpath($relativePath); $directory = dirname($absolutePath); ``` ...

    ssm+sqlserver

    7. **数据库设计**:为了存储图片信息,需要在数据库中创建对应的表结构,通常包含字段如`id`(唯一标识),`fileName`(文件名),`relativePath`(相对路径)等。 8. **安全考虑**:文件上传需要注意防止恶意文件(如...

    js代码-path的使用

    - 计算从源路径到目标路径的相对路径。 - 示例:`path.relative('/home/user', '/home/user/documents/file.txt')`返回`'documents/file.txt'`。 在实际开发中,`path`模块的这些功能有助于我们在处理文件和目录...

    web程序清单

    **1.1 HTML相对路径(Relative Path)** - **定义**: 相对路径是指相对于当前文档位置的路径。 - **应用场景**: 当需要链接到同一服务器上的其他文件时,经常使用相对路径。 - **同目录文件引用**: 如果源文件和...

    vue-cli中config目录下的index.js文件详解

    - **CSS Source Map**:默认关闭,因为相对路径可能会导致问题。 - **示例代码**: ```javascript // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to ...

    JS 实现完美include载入实现代码

    相对路径问题指的是include函数需要确定被引入文件(common.js)的绝对路径。由于a.js可能被不同的HTML页面以相对路径或绝对路径方式引入,include函数难以确定其正确的路径。过去的一些方法可能会添加额外的...

    Java Web程序设计入门课件-JSP指令.pptx

    3. `file`属性的路径可以是相对路径或绝对路径,前者以"/"开头表示相对于Web应用的根目录,后者则相对于当前文件。 理解并熟练运用这些JSP指令是Java Web开发的基础,它们可以帮助我们更有效地编写和组织代码,提高...

    Maven POM文件超详细超全的总体配置说明

    - **`&lt;relativePath&gt;`**:父项目的 `pom.xml` 文件的相对路径,默认值为 `../pom.xml`。Maven 会按照以下顺序查找父项目的 `pom.xml` 文件:当前项目的 `pom.xml` 所在目录、`relativePath` 指定的位置、本地仓库、...

    使用css外部样式表的方法

    1. **相对路径**(Relative Path):它是相对于当前HTML文件位置的路径。例如,如果`style.css`与HTML文件在同一目录下,只需写`href="style.css"`;如果CSS文件在HTML文件的同级目录的`css`子目录中,则应写为`href...

Global site tag (gtag.js) - Google Analytics