url、href、src的路径解析

url、href、src的区别

  1. url(uniform resource locator) 统一资源定位符

  url是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

  > 是互联网上标准资源的地址,≈“地址”,不是属性。

    url语法规则:
    scheme://host.domain:port/path/filename

      - scheme - 定义因特网服务的类型,最常见的类型是 http
      - host - 定义域主机(http的默认主机是www)
      - domain - 定义因特网域名,比如 w3school.com.cn
      - port - 定义主机上的端口号(http的默认端口号是80)
      - path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)
      - filename - 定义文档/资源的名称 
  1. href(hypertext reference) 超文本引用
      
    href 指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的联系。href 属性的值可以是任何有效文档的相对或绝对URL,包括片段标识符和JavaScript代码段。若在文档中添加 ,浏览器会识别该文档为 CSS 文件,就会并行下载资源并且不会停止对当前文档的处理。

  > href用来建立与网络资源的联系,让当前标签能够链接到目标地址。

常见于:
  //相对地址
  <link rel="stylesheet" type="text/css" href="theme.css"/>
    * href 规定被链接文档的位置。 
    * rel 规定当前文档与被链接文档之间的关系。
  //绝对地址
  <a href="http://www.w3school.com.cn">W3School</a>
  //锚
  <a href="#" onclick="return false"></a>
    * href 规定链接指向的页面的 URL。 
  1. src(source) 嵌入当前资源到当前文档元素定义的位置  
    src指向外部资源的位置,在请求src 资源时会将其指向的资源下载并应用到当前文档元素定义的位置(替换当前内容)。在浏览器下载,编译,执行这个文件之前页面的加载和处理会被暂停。

  > src用来替换当前元素

常见于:
  <script type="text/javascript" src="js/tools.js"></script>
    * src 规定外部脚本文件的 URL。
  <img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
    * src 规定显示图像的 URL。

绝对路径和相对路径

这些路径可以是本地路径,也可以是网络路径。结合本地的绝对路径和相对路径理解网络路径。

相对路径-以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对。

绝对路径-以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。

    绝对路径
    <a href="http://www.w3school.com.cn">W3School</a>
    <a href="d:/www/html/1.htm">W3School</a>
    相对路径
    <link rel="stylesheet" type="text/css" href="theme.css"/>

以下为建立路径所使用的几个特殊符号,及其所代表的意义。
  “.”–代表目前所在的目录。
  “..”–代表上一层目录。
  “/”–代表根目录。


    <a href="index.html">链接index网页</a>//链接同一目录下的文件
    <a href="../ccc.html">链接ccc网页</a>//链接上一目录的文件
    <a href=”../../ccc.html”>链接ccc网页</a>//链接上2层目录的文件
    <a href="adminwang/bbb.html">链接bbb网页</a>

    绝对路径
    <a href="/adminwang/bbb.html">链接bbb网页</a>

相对路径,最终也会转换成绝对路径。这个相对基于该文档的当前路径。

    文档的绝对路径
    http://www.w3school.com.cn/aaa/bbbb/index.html
    上面路径最后会被解析成
    http://www.w3school.com.cn/aaa/bbbb/index.html
    http://www.w3school.com.cn/aaa/ccc.html
    http://www.w3school.com.cn/ccc.html
    http://www.w3school.com.cn/bbb.html
    

参考文献

原文地址:https://www.cnblogs.com/meiguhuaxian/p/14140849.html