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用于在当前文档和引用资源之间建立联系。

四、相关资料

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏vue学习

4.vue-router之什么是嵌套路由

大家都知道选项卡,在选项卡中,顶部有数个导航栏,中间的主体显示的是内容;这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,这个时候就是...

11520
来自专栏云服务试衣间

简单几步,利用Serverless,让COS中文件变更自动刷新CDN

SCF能实现事件式的触发,让你的一段代码跑在云上,无需自己去搭建服务器。而这里我们要利用能力:COS文件上传/删除的触发器。

6.4K290
来自专栏前端安全

前端调试入门

这里的控制台特指PC端浏览器进入开发者模式之后新打开的操作界面。常见的控制台有Chrome的控制台,Firefox的firebug。这些都能帮助我们调试前端问题...

1K330
来自专栏進无尽的文章

干货-GitHub 使用中的一些细节

第一次使用 github 的朋友相信都会挺陌生的,因为是纯英文的页面加上不适太熟悉内部的操作,所以一些常规的操作却找不到操作的入口,甚是捉急,本文就几个操作细节...

20530
来自专栏十月梦想

nodejs的hello world的详解

前面几篇介绍过nodejs的第一个项目!这篇系统的介绍一下第一个nodejs项目

8840
来自专栏奇梦博客

发帖UMEditor编辑器增加表情,附加表情包下载 PHP 配置 XiunoBBS

18450
来自专栏V站

Speed丨如何快速给网站添加Pjax?

Pjax是一种很多网站( facebook,  twitter)都支持的浏览方式, 当你点击一个站内链接的时候, 不是做页面跳转, 而是只是站内页面刷新。设置后...

27340
来自专栏崔庆才的专栏

腾讯云主机Python3环境安装PySpider爬虫框架过程

PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速、原生支持各种Web标准:DOM...

1.4K10
来自专栏有趣的django

微信小程序入门(五)

热启动:假入用户已经打开某个小程序,然后在一定时间内再次打开小程序,这个时候,就不需要重新启动了,只需要把后台小程序切换到前台来使用,这个过程就叫做热启动。

65320
来自专栏星回的实验室

Angularjs的表单验证

在AngularJS中,有许多用于验证的指令。我们将先学习几个最流行的内置指令,然后再创建一个自定义验证规则的指令。

10010

扫码关注云+社区

领取腾讯云代金券