首页 » 编程语言 » html » 正文

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

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

首先,我们从下面图像<img>标签中的src属性谈起

<img src="mypic.jpg">

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

接着,我们把这个图片的地址换成<a>标签中href的属性值,如下所示

<a href="mypic.jpg">刘代码博客 <a>

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

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

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

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

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

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

<link href="mystyle.css" rel="stylesheet"  type="text/css"/>

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

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

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

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



欢迎您发表评论或留言