url、href和src区别

url

（Uniform Resource Locator）统一资源定位符

href

(Hypertext Reference)超文本引用

src

(Source)资源，引用资源替代当前元素，在img、script、iframe中使用。

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

一、url介绍

1、绝对URL（absolute URL）

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

2、相对URL（relative URL）

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

初学者经常会看到使用两个句点和一条斜杠，不能理解，其表示的意思是引用文件层次结构中更高层目录中的文件，可以组合重复使用两个句点和一条斜杠，从而引用当前文件所在的硬盘上的任何文件，一般来说，对于同一服务器上的文件，应该总是使用相对URL，他们更容易输入，而且在将页面从本地系统转移到服务器上时更加方便，只要每个文件的相对位置保持不变，链接几句仍然是有效的。

3、举例说明

• “.”：代表目前所在的目录，相对路径。如：<a href="./aaa">内容</a>、<img src="./aaa" />
• “..”：代表上一层的目录，相对路径。如：<a href="../aaa">内容</a>、<img src="../aaa" />
• “../../”：代表的是上一层目录的上一层目录，相对路径。如：<img src="../../aaa" />
• “/”：代表根目录，绝对路径。如：<a href="/aaa">内容</a>或<img src="/aaa" />

“D:/aaa/”：代表根目录，绝对路径。

二、href与src区别

相信大家对href和src一定不会陌生，平时我们开发项目，只知道a和link标签习惯性的，行尸走肉式的使用href；而img和script也是习惯性的使用src链接资源。然而我们对于为什么使用href或者src并不是太深入的了解。

href和src是有区别的，而且是不能相互替换的。我们在可替换的元素上使用src，然而把href用于在涉及的文档和外部资源之间建立一个关系。

href (Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。当我们写下：

浏览器明白当前资源是一个样式表，页面解析不会暂停（由于浏览器需要样式规则去画或者渲染页面，渲染过程可能会被被暂停）。这与把css文件内容写在<style>标签里不相同，因此建议使用link标签而不是@import来吧样式表导入到html文档里。

src (Source)属性仅仅 嵌入当前资源到当前文档元素定义的位置。当浏览器找到：

在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到<script>标签里类似。这也是建议把JS文件放到底部加载的原因。当然，img标签页与此类似。浏览器暂停加载直到提取和加载图像。

三、总结

src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。

href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。

总结: src用于替换当前元素(比如：引入一张图片)；href用于在当前文档和引用资源之间建立联系。

四、相关资料

• URL 详解
• href和src sf.gg资料
• URL 进阶