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 条评论
登录 后参与评论

相关文章

  • Setting up your own Ghost theme

    pitaojin
  • 在HTML中使用JavaScript

    pitaojin
  • iframe+postMessage实现跨域通信

    pitaojin
  • Linux用户和权限管理看了你就会用啦

    没想到上一篇能在知乎获得千赞呀,Linux也快期末考试了,也有半个月没有写文章了。这篇主要将Linux下的用户和权限知识点再整理一下。

    Java3y
  • 又有一位自称中本聪的人出现,但他手中的“郁金香信托 III”似乎让人有些疑惑

    克雷格·赖特(Craig Wright)有一名已故合伙人,在这名已故合伙人的遗产诉讼案中,法官封存了一份文件,而赖特声称这份文件可以证明他拥有中本聪开采的110...

    区块链大本营
  • jQuery实现点击开关图片切换

    王小婷
  • 文件切片上传如何防止切片丢失

    上篇文章咱们介绍了大文件切片上传的原理,但是在传输过程中难免出现切片丢失的情况,传输过程中网速卡顿,服务器链接超时,等等都会造成切片信息的丢失,那如何避免文件切...

    挥刀北上
  • Python文件操作的几个要点与示例

    一般操作文件时,要么是读取其中的内容,要么是往里面写入新内容,但偶尔也会需要同时进行读写。

    Python小屋屋主
  • Python基础-文件

    可读写模式,r+,w+,x+,a+,这几种模式还遵循了 r,w,x,a的基本原则。

    小团子
  • 谈谈如何优雅的关闭正在运行中的Spark Streaming的流程序

    我是攻城师

扫码关注云+社区

领取腾讯云代金券