href和src的使用场景

Posted 2020-10-02 张松任

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

　

 

    　href的使用：　

         1.外部css引用：<link type="text/css" rel="stylesheet" href="../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="/img/1.png" alt="1" />
2. scirpt 脚本 ：<script type="text/javascript" src="org.js"></script>
3. iframe框架： <iframe src="girl.gif"></iframe>  
4. input中type为image的提交按钮： <input type="image" src="1.png" alt="Submit" />
5. html5中的vidio元素：<video src="movie.ogg" controls="controls">video元素</video>
6. html5中的audio元素：<audio src="someaudio.wav">audio元素</audio>
7. html5中的embed元素：<embed src="horse.wav"/>

 

 

　　href和src的区别：

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