详解css中href和src、link和@import的区别

小云云 原创: 2017-12-19 09:58:24 1961浏览

本文主要介绍了href和src、link和@import的区别,解释了名词定义和应用场景,需要的朋友可以参考下，希望能帮助到大家。

href和src的区别：

href(Hypertext Reference)：超文本引用，常用的标签有link、a等，用来链接引用的外部资源。在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，如：
<link href="//m.sbmmt.com/m/style.css" rel="stylesheet" />

src(source)：引入资源，引入的src的内容是页面必不可少的一部分。引入的内容会嵌入当前资源到当前文档元素定义的位置，常用的有：img、script、iframe等。如：
<script src="//m.sbmmt.com/m/script.js"></script>

在浏览器下载、编译、执行这个文件之前页面的加载和处理会被暂停（当浏览器解析到该元素时，会暂停浏览器的渲染），这也是建议把js文件放到底部加载的原因。img标签页与此类似，浏览器暂停加载直到提取和加载图像。

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不支持。