avatar

src和href的区别以及URL的概念

src和href的区别

  • src用于替换当前元素,href用于在当前文档和引用资源之间确立联系;
  • srcsource的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素;
  • <script src ="js.js"></script> 当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部
  • hrefHypertext Reference的缩写,表示超文本引用,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接;
  • 如果我们在文档中添加<link href="style.css" rel="stylesheet"/>那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。

URL(Uniform Resource Locator)

定义

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

结构

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

第一部分

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
http——超文本传输协议资源

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

ftp——文件传输协议

mailto——电子邮件地址

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

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

news——Usenet新闻组

gopher——Gopher协议

telnet——Telnet协议

第二部分:

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

分类

  • 绝对URL

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

  • 相对URL

    相对URL(relative 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/:代表根目录,绝对路径。

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

文章作者: Darkerbin
文章链接: https://darkerbin.github.io/2020/05/10/src和href的区别以及URL的概念/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 解忧杂货店小店员
打赏
  • 微信
    微信
  • 支付寶
    支付寶