src 与 href 属性的区别以及 url 的概念

转载自：https://blog.csdn.net/cc18868876837/article/details/53914234

1. src和href的区别

    src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

    src是source的缩写，表示来源地址，指向外部资源的位置，src的内容是页面必不可少的一部分，是引入。指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和iframe等元素。

<script src ="script.js"></script>

    当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

    href是Hypertext Reference的缩写，表示超文本引用，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

<link href="style.css" rel="stylesheet"/>

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

 

 

2. URL(Uniform Resource Locator)

 

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

结构

     基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名，如“协议://授权/路径?查询”。完整的、带有授权部分的普通统一资源标志符语法看上去如下：协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志

第一部分：

     模式/协议（scheme）：它告诉浏览器如何处理将要打开的文件。最常用的模式是超文本传输协议（HypertextTransfer Protocol，缩写为HTTP），这个协议可以用来访问网络。1其他协议如下：

·       http——超文本传输协议资源

·       https——用安全套接字层传送的超文本传输协议

·       ftp——文件传输协议

·       mailto——电子邮件地址

·       ldap——轻型目录访问协议搜索

·       file——当地电脑或网上分享的文件

·       news——Usenet新闻组

·       gopher——Gopher协议

·       telnet——Telnet协议

第二部分：

     文件所在的服务器的名称或IP地址，后面是到达这个文件的路径和文件本身的名称。服务器的名称或IP地址后面有时还跟一个冒号和一个端口号。它也可以包含接触服务器必须的用户名称和密码。路径部分包含等级结构的路径定义，一般来说不同部分之间以斜线（/）分隔。询问部分一般用来传送对服务器上的数据库进行动态询问时所需要的参数。

分类

1、绝对URL

    绝对URL（absolute URL）显示文件的完整路径，这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关。

2、相对URL

    相对URL（relative URL）以包含URL本身的文件夹的位置为参考点，描述目标文件夹的位置。如果目标文件与当前页面（也就是包含URL的页面）在同一个目录，那么这个文件的相对URL仅仅是文件名和扩展名，如果目标文件在当前目录的子目录中，那么它的相对URL是子目录名，后面是斜杠，然后是目标文件的文件名和扩展名。

    如果要引用文件层次结构中更高层目录中的文件，那么使用两个句点和一条斜杠。可以组合和重复使用两个句点和一条斜杠，从而引用当前文件所在的硬盘上的任何文件，一般来说，对于同一服务器上的文件，应该总是使用相对URL，它们更容易输入，而且在将页面从本地系统转移到服务器上时更方便，只要每个文件的相对位置保持不变，链接就仍然是有效地。

    以下为建立路径所使用的几个特殊符号，及其所代表的意义。

·       .：代表目前所在的目录，相对路径。如：<a href="./abc">文本</a>或<img src="./abc" />

·       ..：代表上一层目录，相对路径。如：<a href="../abc">文本</a>或<img src="../abc" />

·       ../../：代表的是上一层目录的上一层目录，相对路径。如：<imgsrc="../../abc" />

·      /：代表根目录，绝对路径。如：<a href="/abc">文本</a>或<img src="/abc" />

·       D:/abc/：代表根目录，绝对路径。

在使用相对路径时，我们用符号“.”来表示当前目录，用符号“..”来表示当前目录的父目录。