href标识超文本引用，用在link和a等元素上，href是引用资源和页面的关联，是在当前元素和引用资源之间建立联系
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和iframe等元素。
<script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。
<link rel="external nofollow" rel="external nofollow" href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么⭐建议使用link方式来加载css而不是使用@import。
⭐@import可用在css文件内引用其他css文件，把多个样式表导入到一个样式表中，在页面里面只需要导入一个样式表即可。 便于修改和扩展。（JavaScript DOM编程艺术 第12章 12.3小结采用这种方式）
两者都是外部引用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" rel="external nofollow" href="style.css"></head><style>@import url(style.css);@import 'custom.css';</style>（导入语句应写在样式表的开头）兼容性所有主流浏览器都支持 <link> 标签CSS2.1出现，低版本浏览器不兼容（ie5.5以上）使用Javascript改变DOM支持不支持