src与href

本文详细解释了在HTML中使用href与src属性的区别,包括它们如何分别应用于样式表和脚本文件的加载过程,以及这些差异如何影响页面的渲染和性能。

速查

src

  • img 图片 <img src="/img/1.png" alt="1" />
  • scirpt 脚本 <script type="text/javascript" src="org.js"></script>
  • rame iframe 框架集 <iframe src="girl.gif"></iframe>  
  • input type 为image的提交按钮 <input type="image" src="submit.jpg" alt="Submit" align="right" />

href

  • a <a href="http://www.baidu.com" target="_blank">百度</a>
  • link 引用外部css <link type="text/css" href="iknow_base.css" rel="stylesheet" />
  • input type 中的onclick事件
    <input type=button onclick="window.location.href('#')" />

区别

    href和src是有区别的,而且是不能相互替换的。我们在可替换的元素上使用src,然而把href用于在涉及的文档和外部资源之间建立一个关系。
    href (Hypertext Reference)指定网络资源的位置,从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。当我们写下:<link href="style.css" rel="stylesheet" />,浏览器明白当前资源是一个样式表,页面解析不会暂停(由于浏览器需要样式规则去画或者渲染页面,渲染过程可能会被被暂停)。这与把css文件内容写在<style>标签里不相同,因此建议使用link标签而不是样式表导入到html文档里。
    src (Source)属性仅仅 嵌入当前资源到当前文档元素定义的位置。当浏览器找到<script src="script.js"></script>,在浏览器下载,编译,执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到<script>标签里类似。这也是建议把JS文件放到底部加载的原因。当然,img标签页与此类似。浏览器暂停加载直到提取和加载图像。
 
 

 

 





 

转载于:https://www.cnblogs.com/lovelyshiro/p/5804638.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值