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. 20160303 - 升级 Windows 10 版本 1511 后,文件夹默认打开方式为 cmd 的修复

    问题描述:升级 Windows 10 版本 1511 (OS 内部版本 10586.122)后,文件夹的默认打开方式变成了cmd.双击任何一个文件夹,显示相关的提示错误信息如下: [Window Ti ...

  2. js如何判断一个数组

    typeof [] 为一个"object" 不能通过此方法判断一个数组 方法 1.instanceof方法,这个方法用的比较多. 2.这个是es5以后推荐的方法,Object.pr ...

  3. PHP中生成json信息的方法

    <?php //php中生成json信息 //json_encode(数组/对象) $color = array('red','blue','green'); //[索引数组] echo jso ...

  4. SpringMVC学习--入门程序

    前面基本介绍了下SpringMVC的运行原理,现在按照前面的原理一步步实现一个简单的程序.先搭建一个简单的web工程,将spring的jar包导入项目中. 前端控制器配置 在web.xml中配置如下: ...

  5. Qt5.3.0 for Android开发环境配置

    1.去官网下载Qt5.3.0 for Android 2.去http://developer.android.com下载Ndk 和SDk            3.去http://ant.apache ...

  6. C++折半插入排序

    代码如下: #include <iostream> using namespace std; void insertSort(int a[], int n) { for(int i=1;i ...

  7. spoj687 后缀数组重复次数最多的连续重复子串

    REPEATS - Repeats no tags  A string s is called an (k,l)-repeat if s is obtained by concatenating k& ...

  8. ThreadLocal详解(实现多线程同步访问变量)

    ThreadLocal翻译成中文比较准确的叫法应该是:线程局部变量. 这个玩意有什么用处,或者说为什么要有这么一个东东?先解释一下,在并发编程的时候,成员变量如果不做任何处理其实是线程不安全的,各个线 ...

  9. JS 打印功能代码可实现打印预览、打印设置等

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  10. cookie的写入与读出

    cookie在jquery中有指定的cookie操作类 $.cookie('the_cookie'); // 读取 cookie $.cookie('the_cookie', 'the_value') ...