HTML 引用资源路径整理

Myth丶恋晨 2022-09-23 15:49 126阅读 0赞

HTML 引用资源路径整理

EVERYTHING BEFORE:

今天有人问了我一个问题，问我是不是只是做前台页面呢。当然不是啦，前台和后台都有在做的。只不过后台代码相对于前台来说有太多的特性了，各个业务系统不一样业务逻辑不一样，使用框架不一样，所以单独的把项目中的一些心得体会拿出来也不会有太多的作用。而前台的话却有很多共性 HTML JAVASCRIPT JQUERY 等。 PHP很好用不过因为项目的原因我们没有采用 PHP 来写而是使用的 SSM 框架 。也许以后可能会有 PHP 的项目。到时候再会和大家分享 PHP 项目的经验啦。

1、 绝对路径和相对路径是什么?  
DIVCSS5为大家介绍html常常说到相对路径和绝对路径基本知识、作用、用法等知识。  
  
相对路径：以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。  
  
绝对路径：以Web 站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

所谓 WEB 站点根目录是指 如 localhost:8080/ 这样的路径，不包括站点上下文根…其实也就是域名啦 … 但是不管在什么样子的情况下其余的相对路径方法都是可以的哦。  
  
其实绝对路径与相对路径的不同处，只在于描述目录路径时，所采用的参考点不同。由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。  
  
2、路径特殊符号  
以下为建立路径所使用的几个特殊符号，及其所代表的意义。  
  
"." -- 代表目前所在的目录，相对路径。 如：<a href="./abc">文本</a> 或 <img src="./abc" />  
".." -- 代表上一层目录，相对路径。 如：<a href="../abc">文本</a> 或 <img src="../abc" />  
"../../" -- 代表的是上一层目录的上一层目录，相对路径。 如：<img src="../../abc" />  
"/" -- 代表根目录,绝对路径。 如：<a href="/abc">文本</a> 或 <img src="/abc" />  
"D:/abc/" -- 代表根目录,绝对路径。  
  
在使用相对路径时，我们用符号“.”来表示当前目录，用符号“..”来表示当前目录的父目录。  
  
3、通俗讲解路径 -  
绝对路径顾名思义，填写绝对目录路径地址那就叫绝对路径，通常我们直接使用"/"代表从根目录开始的目录路径，这个叫绝对路径。  
相对路径顾名思义，填写目录时候以填写目录文件为参考，使用“../”或"./"指向上一级 或 使用"../../"指向上上一级叫相对路径。  
  
引用者 被引用者 相对路径 绝对路径  
  
url1.htm divcss5.gif ../SubDir2/BeRef1.gif /Dir1/SubDir2/BeRef1.gif  
  
url2.htm divcss5.gif ../../Dir1/SubDir2/ BeRef1.gif /Dir1/SubDir2/ BeRef1.gif  
  
url3.htm abc1.htm ../../Dir2/ abc1.htm /Dir2/abc1.htm  
  
url4.htm abc2.htm ../abc2.htm /Dir2/abc2.htm  
  
说明：  
我们使用“/”、“../”、“../../”分别样式和介绍图片路径和网址路径之间 相对于绝对路径关系。  
  
4、绝对路径和相对路径的作用是什么？  
相对路径和绝对路径都可相互转换，转换时候注意正确路径即可，作用在于有效链接路径。

TIPS：路径问题是很重要的，所以这里一定要认真的进行理解才行，因为所有的资源都是通过路径来进行引入的，所以理解路径是一个非常关键的地方。不过同时也提醒我们在进行 HTML 调试的时候不能单独进行 HTML 调试，因为假如 HTML 有引入外部的 JS 比如通过

这样的方式来引入 JAVASCIPT ，假如单独进行调试(直接拖到浏览器中)，就会引发 JS 因为 SRC 找不到 (因为没有在工程中打开该页面) 而引起不知名错误。直接拖入 HTML 的话是不行的，一定要通过工程来进行访问 "/xxx" 这种路径才会起作用。

另外单独的 HTML 文件的路径问题是这样 ….

“/”单独调试 HTML 文件的话 (那就是直接拖入到 CHROME 浏览器中)。 “/路径” 代表的是文件系统的根目录。相对于 WINDOWS 系统就是 ABCDE:/ 这样的跟路径。而相对于 LINUX 系统的话，就是相对于所有的文件系统的路径，因为在 UNIX，LINUX中 / 就是文件系统的路径。

打个比方吧，

这样就是相对于盘符的路径咯 …