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. 利用manifest文件对程序目录下的dll进行分类

    1 背景 对于大部分的券商和机构投资者,只能通过有交易所交易系统接入资质的券商提供的柜台系统来进行现货交易.相对于期货市场,现货市场的柜台系统千差万别,接入协议有明文字符串.二进制数据和FIX协议等, ...

  2. js的浅拷贝和深拷贝

    转载:http://www.jb51.net/article/91906.htm //深拷贝,并且把合并后的值放到第二个参数里 function deepCopy(p, c) { var c = c ...

  3. C语言printf()函数:格式化输出函数

    C语言printf()函数:格式化输出函数 头文件:#include <stdio.h> printf()函数是最常用的格式化输出函数,其原型为:     int printf( char ...

  4. php file_get_contents失败[function.file-get-contents]: failed to open stream: HTTP request failed!解决

    在使用file_get_contents方法来获取远程文件时会出现 [function.file-get-contents]: failed to open stream: HTTP request ...

  5. 1415-2 计科&计高 软件工程博客&Github地址汇总-修正版

    序号 标识 博客 代码 1 1121袁颖 joanyy joanyy 2 1122崔琪 chitty ChittyCui 3 1123吕志浩 lucy123 715lvzhihao 4 1124张静 ...

  6. wsdl说明书

    WSDL文档的结构实例解析 <?xml version="1.0" encoding="UTF-8"?> <definitions xmlns ...

  7. Swift 中的指针使用

    SWIFT 中  指针被映射为泛型 UnsafePointer<T> UnsafeMutablePointer<T> 表示一组连续数据指针的 UnsafeBufferPoint ...

  8. 关于API认证的问题

    问题:如何保证api安全?-->做api的认证 如下图 整个过程大概就是这样. 好像没什么可以讲的....

  9. python3.x + selenium 3.x 遇到的问题:Exception ignored in: <bound method Service.__del__ of <selenium.webdriver.firefox.service.Service object at 0x0045E450>>

    我解决了!!!from selenium import webdriverimport timedr = webdriver.Firefox(executable_path = '/Users/jin ...

  10. js实现网页瀑布流布局

    效果图: html代码实现网页布局: <!DOCTYPE html> <html lang="en"> <head> <meta char ...