url、 src 和href 标签的区别

摘要:
相对URL相对URL将包含URL本身的文件夹的位置作为描述目标文件夹位置的参考点。href的目的不是引用资源,而是建立连接,以便当前标记可以链接到目标地址srcsource(缩写),指向外部资源的位置,指向的内容将应用于文档中当前标记的位置。Href和src的请求资源类型不同。href指向网络资源的位置,并与当前元素(锚点)或当前文档(链接)建立连接。

url

统一资源定位符 

标准格式

  协议类型:[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名?查询

url语法规则

  scheme://host.domain:port/path/filename

  https://www.baidu.com/daily/view?id=163664

scheme  定义因特网服务的类型,常见的类型是http/https

host        定义域主机 (http的默认是www)

domain   定义因特网域名 例如baidu.com

port        定于主机上的端口(http的默认端口是80)

path       定义服务器上的路径

filename 定义文档/资源的名称

绝对URL

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

相对URL

相对URL(relative URL)以包含URL本身的文件夹的位置为参考点,描述目标文件夹的位置。

href

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

href 目的不是为了引用资源,而是为了建立联系,让当前标签能够链接到目标地址

src

source(缩写),指向外部资源的位置,指向的内容将会应用到文档中当前标签所在位置。

href和src区别

请求资源类型不同

(1)href 指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的联系。

(2)在请求 src 资源时会将其指向的资源下载并应用到文档中,比如 JavaScript 脚本,img 图片;

 作用结果不同

(1)href 用于在当前文档和引用资源之间确立联系;

(2)src 用于替换当前内容;

浏览器解析方式不同

(1)若在文档中添加 ,浏览器会识别该文档为 CSS 文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS,而不是使用 @import 方式。

(2)当浏览器解析到 ,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等也如此,类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

link和@import的区别

两者都是外部引用 CSS 的方式,但是存在一定的区别:

(1)link是XHTML标签,除了能够加载CSS,还可以定义RSS等其他事务;而@import属于CSS范畴,只可以加载CSS。

(2)link引用CSS时,在页面载入时同时加载;@import需要页面完全载入以后再加载。

(3)link是XHTML标签,无兼容问题;@import则是在CSS2.1提出的,低版本的浏览器不支持。

(4)link支持使用Javascript控制DOM改变样式;而@import不支持。
---------------------
作者:rocling
来源:CSDN
原文:https://blog.csdn.net/rocling/article/details/82954538
版权声明:本文为博主原创文章,转载请附上博文链接!

免责声明:文章转载自《url、 src 和href 标签的区别》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇带你一行一行分析SpringBoot原码解析vs.net 2010 扩展插件小结下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

bootstrap-table 基础用法

1.需要添加的引用。 <script src="http://t.zoukankan.com/@Url.Content("~/js/jquery-2.1.1.js")"></script>    <script src="http://t.zoukankan.com/@Url.Content("~/js/bo...

彻底搞懂golang的GOROOT和GOPATH

目录 1、GOPATH 和 GOROOT 2、修改 GOPATH 和 GOROOT 3、HelloWord——GOPATH版 4、一些踩坑经验 1、GOPATH 和 GOROOT不同于其他语言,go中没有项目的说法,只有包, 其中有两个重要的路径,GOROOT 和 GOPATH Go开发相关的环境变量如下: GOROOT:GOROOT就是Go的安装目录,(...

【转】越狱的 iPhone、iPad 通过网站实现一键安装 ipa 格式的 APP 应用

1、已经越狱的 iPhone、iPad 设备,当通过其自带的 safari 浏览器访问 ipa 应用下载网站时,利用 itms-services 协议,可以一键安装 ipa 文件的 iOS 应用,例如: <a href="http://t.zoukankan.com/itms-services://?action=download-manifest&...

11.6 Appium+mitmdump 爬取京东商品

11.6 Appium+mitmdump 爬取京东商品 在前文中,我们曾经用 Charles 分析过京东商品的评论数据,但是可以发现其参数相当复杂,Form 表单有很多加密参数。如果我们只用 Charles 探测到这个接口链接和参数,还是无法直接构造请求的参数,构造的过程涉及一些加密算法,也就无法直接还原抓取过程。 我们了解了 mitmproxy 的用法,...

Axja(2) post()和get()方法

  load()方法是局部方法,因为他需要一个包含元素的jQuery 对象作为前缀。而$.get()和$.post()是全局方法,无须指定某个元素。对于用途而言,.load()适合做静态文件的异步获取,而对于需要传递参数到服务器页面的,$.get()和$.post()更加合适。 jQuery.post(url, [data], [callback], [t...

img图片不存在显示默认图

在项目中,我们使用img标签加载图片,有时候图片地址有可能失效,获取路径问题,导致图片加载失败,img标签就会显示alt内容。这时候用户体验不是很好,所以就需要显示一张默认图片。 第一种方式:使用jquery_lazyload插件实现图片懒加载。只需要在src中写上默认图片地址即可。 <img src="/static/images/dlb.jpg"...