前言

我们在开发页面的时候,有时候需要需要引用一些外部的资源,经常分不清一些链接,下面我们就来谈谈它们之间到底分别是什么,这样使用的时候就做到心中有数。


一、link和@import的区别

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

区别1:llink属于html标签,除了加载CSS外,还可以定义RSS等其他事务。@import在css中使用  表示导入外部样式表,只能加载CSS;

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

区别3:import只在IE5以上才能识别,而link是HTML标签,无兼容问题;

区别4:ink支持使用Javascript控制DOM去改变样式;

而@import不支持。

区别5.link方式的样式的权重 高于@import的权重;

二、href和src的区别:

href(Hypertext Reference):超文本引用,常用的标签有link、a等,用来链接引用的外部资源。在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系,例如:

<a href="http://www.baidu.com"></a><link type="text/css" rel="stylesheet" href="common.css">

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

<img src="img/girl.jpg"><iframe src="top.html"><script src="show.js">

总结:href用于建立当前页面与引用资源之间的关系(链接),而src则会替换当前标签。遇到href,页面会并行加载后续内容;而src则不同,浏览器需要加载完毕src的内容才会继续往下走


herf、src和link与@import的区别相关推荐

  1. link和import的区别,src和href的区别,css hark 以及HTML5及css3的新增特性

    link和import的区别 link是标签浏览器会在一开始就渲染样式而import是引入会在最后引入 link是XHTML标签,无兼容问题:@import是在CSS2提出的,低版本的浏览器不支持 l ...

  2. link引入html5,CSS引入方式 | link和@import的区别 — 生僻的前端考点

    link和@import的区别 HTML5学堂:CSS的引入方式有外部引入.页面头部书写.标签内联书写,其实还有@import的引入方式,但是现在基本被淘汰掉了.为了让大家了解到更多的知识,今天给大家 ...

  3. link和@import的区别:

    link和@import的区别: 1.从属关系区别 @import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS.rel ...

  4. link和@import的区别?

    一.link和@import的区别? 1.1.link属于html标签,而@import是css提供的. 1.2.页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完再加 ...

  5. 网页编程html link,Web--CSS控制页面(link与import方式区别)详解

    先了解: [1]       "Table"和"DIV"这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面 ...

  6. 外部引用CSS中 link与@import的区别

    这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import. 本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 差别1:老祖宗的差别.link ...

  7. 第29题:link与@import的区别

    题目 下列关于使用link和@import,说法不正确的是(B) A: 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载 B: link.@import均支持 ...

  8. link 和@import 的区别?

    link <link rel='stylesheet' rev='stylesheet' href='CSS 文件 ' type='text/css' media='all' /> imp ...

  9. link 和 @import 的区别

    1.引入的内容不同: link 除了引用样式文件,还可以引用图片等资源文件,而 @import 只引用样式文件 2.加载顺序不同 link 引用 CSS 时,在页面载入时同时加载:@import 需要 ...

最新文章

  1. 还只看花书,西瓜书?一文告诉你如何正确学习深度学习,从理论到实战。
  2. diy nas配置推荐2020_2020适合大学生专业需求及玩游戏的电脑配置推荐
  3. jQuery插件 -- Cookie插件
  4. Autoformer: 基于深度分解架构和自相关机制的长期序列预测模型
  5. cocos label html文本,【cocos2dx】创建简单的文字Label——BMFont
  6. 【期望】选书问题(金牌导航 期望-7)
  7. 史上最强DIY,手工制作一只会说话的机器狗
  8. 搜索一个问题 C、C++判断操作系统 是 Linux还是windows 还是Unix【编译器内置宏 探索(不是特别满意)】...
  9. Mac源码安装使用OpenCV
  10. expdp的常用用法
  11. AVAudioPlayer 播放本地音乐
  12. 远程控制家里电脑的N种方案
  13. L版本修改默认静态壁纸wallpaper
  14. 如何用python进行数据处理?(二)
  15. ENSPLAB笔记:配置VXLAN(分布式网关,BGP EVPN方式)(Part1)
  16. CSDN如何快速提升等级
  17. Gta4 微软服务器,R星发布《GTA4》Win10补丁 业界良心从不令人失望
  18. JDBC以及数据库连接池
  19. 如何在Ubuntu安装EXE文件
  20. UTF8编码转换成Unicode

热门文章

  1. 悬空指针(Dangling pointer)避免方法
  2. 无法访问netflix服务_手把手教你申请Netflix退款
  3. java double 装箱_Java自动拆箱和装箱
  4. 搜狗手机输入法推出1.1版
  5. PYNQ-Z2启动/网络配置
  6. C++对JSON文件的读写
  7. vue中input如何实现防抖
  8. 双线性内插怎么缩小_鼻翼缩小该做内切还是外切?会留疤吗?恢复期是多久?...
  9. Tomcat 闪退解决方法
  10. 中富金石投资课程29800值吗?专业团队为投资者赋能蓄力