loading
HTML 相对路径和绝对路径区别分析

HTML 相对路径和绝对路径区别分析

正确引用本地 HTML 文件

Web Notes

2015.09.26

0 #html

HTML 初学者会经常遇到这样一个问题,如何正确引用一个文件(路径)。比如,怎样在一个 HTML 网页中引用另外一个本地 HTML 网页作为超链接(hyperlink),怎样在一个网页中插入一张图片。如果你在引用文件时(如加入超链接,或者插入图片等),使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。

为了避免这些错误,正确地引用文件,我们需要学习一下 HTML 路径。

HTML 有 2 种路径的写法:相对路径和绝对路径。

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)指带域名的文件的完整路径。

例如我有一个域名 frankindev.com,那么这个域名就是网站的根目录。

假设在根目录下放了一个文件 index.html ,这个文件的绝对路径就是: https://frankindev.com/index.html

假设在根目录下建了一个目录叫 html_tutorials,然后在该目录下放了一个文件 index.html,这个文件的绝对路径就是 https://frankindev.com/html_tutorials/index.html

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.4 billion 🇨🇳. This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

Using Liquid in Jekyll - Live with Demos

Web Notes

2016.08.20

Using Liquid in Jekyll - Live with Demos

Liquid is a simple templating language that Jekyll uses to process pages on your site. With Liquid you can output an modify variables, have logic statements inside your pages and loop over content.

CSS 选择器笔记

Web Notes

2016.12.01

CSS 选择器笔记

CSS 选择器用于选择需要添加样式的元素,其重要性不言而喻。最近更新博客模板就不断调整 CSS 样式,好多时候就因为选择器不熟悉而不能应用样式,所以干脆好好学习总结一下常用的 CSS 选择器,也为下一步学习 jQuery 做好准备。

Self-host comments in Jekyll, powered by Firebase real-time database

Tutorials

2017.03.25

Self-host comments in Jekyll, powered by Firebase real-time database

It's convenient to set up a comment system in Jekyll site with external social comment systems like Disqus or Duoshuo (多说). However, as you all know, Disqus was blocked in China and Duoshuo is going to shutdown. It's the time to rethink about the comment system (although I didn't get too many comments →_→), simple and controllable. And it becomes true with Firebase database.