首页 > 代码库 > href和src的使用场景

href和src的使用场景

href和src的使用场景

  href和src的用法虽然简单,但是有时候会突然记不起来该怎么用,且两者不可相互替换,下面列出来方便记忆,并给出具体区别。

 

 

     href的使用: 

         1.外部css引用:<link type="text/css" rel="stylesheet" href="http://www.mamicode.com/css/test.css" />

     2.<a>标签的使用: <a href="http://www.baidu.com" target="_blank">百度</a>

         3.input中type为button等的onclick事件:<input type=button onclick="window.location.href(‘#‘)" />

 

 

     src的使用:

  1. 引入图片img: <img src="http://www.mamicode.com/img/1.png" alt="1" />
  2. scirpt 脚本 :<script type="text/javascript" src="http://www.mamicode.com/org.js"></script>
  3. iframe框架: <iframe src="http://www.mamicode.com/girl.gif"></iframe>  
  4. input中type为image的提交按钮: <input type="image" src="http://www.mamicode.com/1.png" alt="Submit" />
  5. html5中的vidio元素:<video src="http://www.mamicode.com/movie.ogg" controls="controls">video元素</video>
  6. html5中的audio元素:<audio src="http://www.mamicode.com/someaudio.wav">audio元素</audio>
  7. html5中的embed元素:<embed src="http://www.mamicode.com/horse.wav"/>

 

 

  href和src的区别:

       src (Source)属性仅仅 嵌入当前资源到当前文档元素定义的位置。当浏览器找到<script src="http://www.mamicode.com/script.js"></script>,在浏览器下载,编译,执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到<script>标签里类似。这也是建议把JS文件放到底部加载的原因。当然,img标签页与此类似。浏览器暂停加载直到提取和加载图像。

 

 

   

href和src的使用场景