src & href

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

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


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

当浏览器解析到这一句的时候会暂停其他资源的下载和处理,直至将该资源加载,编译,执行完毕,图片和框架等元素也是如此,类似于该元素所指向的资源嵌入到当前标签内,这也是为什么把 js 放在底部而不是放在头部的原因

<link rel="stylesheet" href="common.css"/>

当浏览器解析到这一句的时候会识别文档为 css 文件,会下载并且不会停止对当前文档的处理,这也是为什么建议使用link方式来加载 css 而不是 @import


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不支持
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,092评论 0 0
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 基础问题 = 和 == 和 === 的区别?= : 用于赋值== : 用于判断=== : 用于判断,必须类型和值同...
    雪落丶阅读 982评论 0 1
  • 1.基础问题 1. = 和 == 和 === 的区别? = : 用于赋值== : 用于判断=== : 用于判断,必...
    月光在心中阅读 2,406评论 0 6
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,148评论 1 32