href和src的使用场景

  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标签页与此类似。浏览器暂停加载直到提取和加载图像。

 

   

href和src的使用场景的更多相关文章

  1. href,src,url 整理

    一.href 和 src 的定义及区别 href:Hypertext Reference(超文本引用),指定网络资源的位置,从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接 ...

  2. url、href、src 详解

    发现自己居然没把url.href.src关系及使用搞清楚,今天就理一下.主要包括:url.src.href定义以及使用区别.顺便试下在segmentfault来一发. URL(Uniform Reso ...

  3. 正则抓取网页所有href和src

    根据抓取的页面,用正则来匹配页面href和src string UserAgent = "Mozilla/5.0 (Windows NT 5.2; rv:29.0) Gecko/201001 ...

  4. 「HTML5」url、href、src区别

    一.URL的概念 统一资源定位符(或称统一资源定位器/定位地址.URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网络上的门 ...

  5. href 和src 的区别

    转载地址:http://www.58maisui.com/2016/08/03/30/?utm_source=tuicool&utm_medium=referral href和src的区别: ...

  6. 前端中url、href、src的详细含义

    一.URL的概念 统一资源定位符(或称统一资源定位器/定位地址.URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网络上的门 ...

  7. url、href、src

    一.URL的概念 统一资源定位符(或称统一资源定位器/定位地址.URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网络上的门 ...

  8. 前端面试题-url、href、src

    一.URL的概念 统一资源定位符(或称统一资源定位器/定位地址.URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网络上的门 ...

  9. 浅谈href 和 src的区别

    href 表示超文本引用(hypertext reference),在 link.a 等元素上.src 表示来源地址,在 img.script.iframe 等元素上.src 的内容,是页面必不可少的 ...

随机推荐

  1. Nodejs爬虫进阶=>异步并发控制

    之前写了个现在看来很不完美的小爬虫,很多地方没有处理好,比如说在知乎点开一个问题的时候,它的所有回答并不是全部加载好了的,当你拉到回答的尾部时,点击加载更多,回答才会再加载一部分,所以说如果直接发送一 ...

  2. SQL复杂查询和视图

    子查询 现实中,很多情况下需要进行下述条件判断 某一元素是否是某一集合成员 某一集合是否包含另一集合 测试集合是否为空 测试集合是否存在另一元组 子查询是出现在WHERE子句中的SELECT语句被称为 ...

  3. java.awt.Robot

    import java.awt.AWTException; import java.awt.Robot; import java.awt.event.KeyEvent; public class Te ...

  4. Day Seven(Beta)

    站立式会议 站立式会议内容总结 331 今天: 1)阅读html 5+文档 未来走h5路线 2)restful,未来开发接口 3)h5+demo运行 4)get 代码:a||(a=as); 5)js ...

  5. 模拟发送http请求

    1.httpie 2.postman:Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件. 3.fiddler

  6. Oracle空串与null的处理

    来源于:http://blog.itpub.net/24870090/viewspace-1057853/ Oracle空串与null的处理[@more@] Oracle中的空字符串基本上是被当成空N ...

  7. extJs学习基础4 Ext.each的用法

    Ext.onReady(function(){ //案例一 /* var countries = ['Vietnam', 'Singapore', 'United States', 'Russia'] ...

  8. 单链表C/C++实现

    #include <iostream> using namespace std; const int N = 10; typedef int ELEMTYPE; typedef struc ...

  9. Swift基础--可选绑定和守护绑定

    Swift中的可选绑定和守护绑定 1.可选绑定 格式 // 通过url来创建request对象 if let tempUrl = url { // url为可选类型,当可选类型有值,才执行大括号里面的 ...

  10. Maven-eclipse运行maven命令

    右击项目,点击Run as,如下图: 即可看到有很多现有的maven命令,点击即可运行,并在控制台可以看到运行信息 如果你想运行的maven命令在这里没有找到,点击Maven build创建新的命令, ...