src和href的区别
href标识超文本引用,用在link和a等元素上,href是引用资源和页面的关联,是在当前元素和引用资源之间建立联系
src表示引用资源,表示替换当前元素,用在img,script,iframe上,src是页面内容不可缺少的一部分。
src是source的缩写,是指向外部资源的位置,指向的内部会迁入到文档中当前标签所在的位置;在请求src资源时会将其指向的资源下载并应用到当前文档中,例如js脚本,img图片和iframe等元素。
<script src="js.js"></script>
当浏览器解析到这一句的时候会暂停其他资源的下载和处理,直至将该资源加载,编译,执行完毕,图片和框架等元素也是如此,类似于该元素所指向的资源嵌套如当前标签内,这也是为什么要把js饭再底部而不是头部。
<link href="common.css" rel="stylesheet"/>
当浏览器解析到这一句的时候会识别该文档为css文件,会下载并且不会停止对当前文档的处理,这也是为什么⭐建议使用link方式来加载css而不是使用@import。
⭐@import可用在css文件内引用其他css文件,把多个样式表导入到一个样式表中,在页面里面只需要导入一个样式表即可。 便于修改和扩展。(JavaScript DOM编程艺术 第12章 12.3小结采用这种方式)
herf | src | |
---|---|---|
内容 | 超文本 | 资源 |
内容与当前页面 | 建立联系 | 替换一部分页面内容 |
用于 | link、a等 | img,script,iframe等 |
浏览器解析此元素时 | 不会停止对当前文档的处理 | 暂停其他资源的下载和处理 |
示例 | <link href="common.css" rel="stylesheet"/> | <script src="js.js"></script> |
link和@import的区别
两者都是外部引用CSS的方式,但是存在一定的区别:
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS、rel连接属性、引入网站图标。@import属于CSS范畴,只能加载CSS。
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
区别4:可以通过JS操作DOM,来插入link标签改变样式;由于DOM方法是基于文档的,无法使用@import方式插入样式。
link | @import | |
---|---|---|
属于 | html标签 | css |
用于 | 定义文档与外部资源 | 只能加载CSS |
加载顺序 | 页面被加载的时候同时加载 | 页面全部被下载完再被加载 |
示例 | <head><link rel="stylesheet" type="text/css" href="style.css"></head> | <style>@import url(style.css);@import 'custom.css';</style> (导入语句应写在样式表的开头) |
兼容性 | 所有主流浏览器都支持 <link> 标签 | CSS2.1出现,低版本浏览器不兼容(ie5.5以上) |
使用Javascript改变DOM | 支持 | 不支持 |