网上查到的几种不同但比较容易理解的解释

解释一:

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

<link href="reset.css" rel=”stylesheet“/>

浏览器会识别该文档为css文档,并行下载该文档,并且不会停止对当前文档的处理。这也是建议使用link,而不采用@import加载css的原因。

src是source的缩写,src的内容是页面必不可少的一部分,是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有:img、script、iframe。例如

<script src="script.js"></script>

当浏览器解析到该元素时,会暂停浏览器的渲染,直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。

解释二:

href标识超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系

src表示引用资源,表示替换当前元素,用在img,script,iframe上,src是页面内容不可缺少的一部分。src是source的缩写,是指向外部资源的位置,指向的内部会迁入到文档中当前标签所在的位置;在请求src资源时会将其指向的资源下载并应用到当前文档中,例如js脚本,img图片和frame等元素。

补充:link和@import的区别

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

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

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

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

区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。

解释三:

href 表示超文本引用(hypertext reference),在 link和a 等元素上使用。src 表示来源地址,在 img、script、iframe 等元素上。
src 的内容,是页面必不可少的一部分,是引入。href 的内容,是与该页面有关联,是引用。区别就是,引用和引入。

三种角度解释href/src/link/import区别的更多相关文章

  1. url,href,src之间的区别

    发现自己居然没把url.href.src关系及使用搞清楚,今天就理一下.主要包括:url.src.href定义以及使用区别. URL(Uniform Resource Locator) 统一资源定位符 ...

  2. Http中的三种请求处理模式(MPM)的区别

    MPM---包括基于事件/异步,线程化和预分叉 MPM(multi-processing module)多种请求处理模式,分为三种工作模式: prefork worker event prefork- ...

  3. link @import区别 src href的区别

    先说页面引入css的四种方式吧 1 在头部写在style里面 2 行内样式 tyle= 3 外部引入 link和@import的区别 link属于XHTML的标签,而@import只是css提供的一种 ...

  4. url,href,src 之间的区别

    url 统一资源定位符 <style> #bg{ background-image:url("img/bg.png"); } </style> 区别: sr ...

  5. 余弦相似度及基于python的三种代码实现、与欧氏距离的区别

    1.余弦相似度可用来计算两个向量的相似程度 对于如何计算两个向量的相似程度问题,可以把这它们想象成空间中的两条线段,都是从原点([0, 0, ...])出发,指向不同的方向.两条线段之间形成一个夹角, ...

  6. 前端面试题1:Object.prototype.toString.call() 、instanceof 以及 Array.isArray()三种方法判别数组的优劣和区别

    1. Object.prototype.toString.call() 每一个继承 Object 的对象都有 toString 方法,如果 toString 方法没有重写的话,会返回 [Object ...

  7. VMware中Bridged、NAT、host-only三种网络连接模式的原理及其区别

    VMnet0:这是VMware用于虚拟桥接网络下的虚拟交换机: VMnet1:这是VMware用于虚拟Host-Only网络下的虚拟交换机: VMnet8:这是VMware用于虚拟NAT网络下的虚拟交 ...

  8. spring注解之@Import注解的三种使用方式

    目录 1.@Import注解须知 2.@Import的三种用法 3.@Import注解的三种使用方式总结 @ 1.@Import注解须知 1.@Import只能用在类上 ,@Import通过快速导入的 ...

  9. OpenCV4Android释疑: 透析Android以JNI调OpenCV的三种方式(让OpenCVManager永不困扰)

    OpenCV4Android释疑: 透析Android以JNI调OpenCV的三种方式(让OpenCVManager永不困扰) 前文曾详细探讨了关于OpenCV的使用,原本以为天下已太平.但不断有人反 ...

随机推荐

  1. 浏览器性能接口performance.timing说明

    原文来自于 https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html 下图描述了该接口的各个时间 ...

  2. CH5102 Mobile Service

    CH5102 Mobile Service 描述 一个公司有三个移动服务员,最初分别在位置1,2,3处.如果某个位置(用一个整数表示)有一个请求,那么公司必须指派某名员工赶到那个地方去.某一时刻只有一 ...

  3. Jenkins Slave Nodes – using the Swarm Plugin

    link: http://www.donaldsimpson.co.uk/2013/03/18/jenkins-slave-nodes-using-the-swarm-plugin/ I’ve bee ...

  4. PostMan --API调试工具

    https://blog.csdn.net/fxbin123/article/details/80428216

  5. Android Fragment实现微信底部导航

    1.XML布局 (1)主界面 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...

  6. getLong not implemented for class oracle.jdbc.driver.T4CRowidAccessor

    症状: SpringMVC+MyBatis向数据库插入数据,主键应用ORACLE中自己设置的自增序列会发生如下错误: nested exception is Java.sql.SQLException ...

  7. 基础篇:6.9)GD&T较线性尺寸公差的优缺点

    本章目的:理解GD&T标注对比线性/传统/坐标尺寸公差的优势,但也不要忘记其使用限制. 1.线性尺寸公差   1.1 定义 线性尺寸公差=传统尺寸公差=坐标尺寸公差. 传统尺寸公差(Tradi ...

  8. ios真机测试问题

    前端页面在ios端真机测试出现的问题 由于苹果对于性能的要求是近乎苛刻,如果没有可点的特性的元素系统默认不会给它响应事件,因此真机测试时容易添加不上绑定事件 解决办法: 1.通过js判断当前是否为苹果 ...

  9. 2.5 Go 算术运算与变量使用技巧

    变量作用域 简单来说,GO的变量以块为范围:一个if-else的块,就可以包含一个变量的生命周期.变量的声明,要在使用之前. package main import ( "fmt" ...

  10. Ionic3,装饰器(@Input、@ViewChild)以及使用 Events 实现数据回调中的相关用法(五)

    标题栏的渐变效果 使用到的相关装饰器.Class以及相关方法:@Input.@ViewChild.Content.ionViewDidLoad ① @Input 装饰器:用来获取页面元素自定义属性值. ...