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

a448075703

a448075703

2016-02-19 22:20

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

HTML初学者会经常遇到这样一个问题,如何正确引用一个文件。比如,怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)?怎样在一个网页中插入一张图片?

如果你在引用文件时(如加入超链接,或者插入图片等),使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。

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

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

HTML相对路径(Relative Path)
同一个目录的文件引用
如果源文件和引用文件在同一个目录里,直接写引用文件名即可。

我们现在建一个源文件info.html,在info.html里要引用index.html文件作为超链接。

假设info.html路径是:c:Inetpubwwwrootsiteslablainfo.html
假设index.html路径是:c:Inetpubwwwrootsiteslablaindex.html
在info.html加入index.html超链接的代码应该这样写:

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

如何表示上级目录
../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推。

假设info.html路径是:c:Inetpubwwwrootsiteslablainfo.html
假设index.html路径是:c:Inetpubwwwrootsitesindex.html
在info.html加入index.html超链接的代码应该这样写:

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

假设info.html路径是:c:Inetpubwwwrootsiteslablainfo.html
假设index.html路径是:c:Inetpubwwwrootindex.html
在info.html加入index.html超链接的代码应该这样写:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

假设info.html路径是:c:Inetpubwwwrootsiteslablainfo.html
假设index.html路径是:c:Inetpubwwwrootsiteswowstoryindex.html
在info.html加入index.html超链接的代码应该这样写:

a href = "../wowstory/index.html"index.html/a
 
如何表示下级目录
引用下级目录的文件,直接写下级目录文件的路径即可。

假设info.html路径是:c:Inetpubwwwrootsiteslablainfo.html
假设index.html路径是:c:Inetpubwwwrootsiteslablahtmlindex.html
在info.html加入index.html超链接的代码应该这样写:

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

假设info.html路径是:c:Inetpubwwwrootsiteslablainfo.html
假设index.html路径是:c:Inetpubwwwrootsiteslablahtmlutorialsindex.html
在info.html加入index.html超链接的代码应该这样写:

a href = "html/tutorials/index.html"index.html/a
HTML绝对路径(Absolute Path)
HTML绝对路径(absolute path)指带域名的文件的完整路径。

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

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

展开更多 50%)
分享

猜你喜欢

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

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

如何把html中的相对路径变成绝对路径

Web开发
如何把html中的相对路径变成绝对路径

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

java(Web)中相对路径绝对路径问题

编程语言 网络编程
java(Web)中相对路径绝对路径问题

WinRAR如何设置相对路径压缩文件

电脑网络
WinRAR如何设置相对路径压缩文件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

将Web站点下的绝对路径转换为虚拟路径

Web开发
将Web站点下的绝对路径转换为虚拟路径

在VB中通过相对路径引用标准DLL

编程语言 网络编程
在VB中通过相对路径引用标准DLL

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Movie Maker图文教程

Movie Maker图文教程

HTML和XHTML的区别

HTML和XHTML的区别
下拉加载更多内容 ↓