html link和src,html代码中href和src属性的区别

在html代码中，有些元素的标签中会使用到href或src属性，这两种属性都可以引用外部资源并建立连接关系，比如，图片、CSS文件，JS文件、html文件或其他内容等，但它们之间也有明显区别的。

首先，我们从下面图像标签中的src属性谈起

以上代码在浏览器中，会把src指向的图片内容加载显示到浏览器中，可以被用户看到图片，说明src属性定义的图片会在加载到当前元素定义的位置并显示出来！

接着，我们把这个图片的地址换成标签中href的属性值，如下所示刘代码博客 

以上超链接标签代码中href属性只是建立了一个指向链接关系，并不会加载图片到浏览器中显示。

通过上面的讲解，我们已经基本上了解href和src属性的区别如下：

src属性：会将指向引用文件加载到当前文档元素定义的位置，也就是会把链接指向的内容下载、编译、加载到当前页面中；

href属性：只是和外部资源建立了指向连接关系，但并不会把链接指向的内容下载、编译、加载到当前页面中；

下面，我们接着更深入的了解一下这两个属性的区别：

用link标签中的href属性引用CSS样式文件代码如下：

浏览器通过link标签中的href属性建立的链接指向关系，可以知道这个CSS样式文件的位置，而且html页面在浏览器中的解析和渲染不会暂停的同时，加载css文件。这不同于在style标签里面的内置样式，用@import添加的样式是在页面载入之后再加载，这可能会导致页面因重新渲染而闪烁。所以建议使用link引用css样式表文件，而不是@import。

用script标签中的src属性引用JS脚本文件代码如下：

当浏览器解析到这句代码时，会暂停页面上其他资源的下载、编译、渲染等处理工作，直到浏览器将src连接指向的文件内容全部加载到这个script标签内，才会继续加载处理其他内容，图片和iframe框架等元素也是如此！这也是为什么很多JS文件放在网页文档靠底部加载的缘故！