HTML中的href和src有什么区别?

加载js的时候,用到的是<script style='text/javascript' src='js/demo.js'></script>
加载css的时候,用到的是<link rel="stylesheet" href="css/demo.css"/>
一个用到的是src,另一个用到的是href,这两个有什么区别呢?
 
href 表示超文本引用(hypertext reference),在 link和a 等元素上使用。
src 表示来源地址,在 img、script、iframe 等元素上。
src 的内容,是页面必不可少的一部分,是引入。href 的内容,是与该页面有关联,是引用。区别就是,引入和引用。

href (Hypertext Reference)指定网络资源的位置,从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。当我们写下:

<link href="style.css" rel="stylesheet" />

浏览器明白当前资源是一个样式表,页面解析不会暂停(由于浏览器需要样式规则去画或者渲染页面,渲染过程可能会被暂停)。这与把css文件内容写在<style>标签里不相同,因此建议使用link标签而不是@import来吧样式表导入到html文档里。

src (Source)属性   嵌入当前资源到当前文档元素定义的位置。当浏览器找到

<script src="script.js"></script>

在浏览器下载,编译,执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到<script>标签里类似。这也是建议把JS文件放到底部加载的原因。当然,img标签页与此类似。浏览器暂停加载直到提取和加载图像。

 

scr 和 href 区别的更多相关文章

  1. window.location.assign和window.location.href区别

    window.location.assign和window.location.href区别 window.location.assign(url)和window.location.href=url实现 ...

  2. HTML中关于url、scr、href的区别

    URL是什么 URL:Uniform Resource Locators(统一资源定位器)的简写,Web浏览器通过URL从Web服务器请求页面. url不是属性,src和href是属性,src用于替换 ...

  3. window.location.Reload()和window.location.href 区别

    首先介绍两个方法的语法: reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])参数: bForceGet, 可选参数, 默认为 false, ...

  4. window.location.replace()与window.location.href()区别

    有3个页面 a,b,c 如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c 1:b->c 是通过window.location.replace("..xx/c ...

  5. href="javascript:;" href="javascript:void(0);" href="#"区别

    一.href="javascript:;" 这种用法不正确,这么用的话会出现浏览器访问"javascript:;"这个地址的现象: 二.href="j ...

  6. parent.location.href和location.href区别

    parent.location.href='ind.php'parent用于框架结构,需要全网页转向如果你的网页是左右框架,那么,直接把当前页面全部转到ind.php中 location.href=' ...

  7. window.location.replace和window.location.href区别

    有3个页面 a,b,c 如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c 1:b->c 是通过window.location.replace("..xx/c ...

  8. href="javacript:;" href="javacript:void(0);" href="#"区别。。。

    一.href="javacript:;"  这种用法不正确,这么用的话会出现浏览器访问“javascript:;”这个地址的现象: 二.href="javacript:v ...

  9. a标签中href="javacript:;" href="javacript:void(0);" href="#"区别

    在使用<a>标签时,经常会绑定其他事件比如onclick,这时候我们会给<a>标签的href属性赋值为“#”,“javacript:;”,“javacript:void(0); ...

随机推荐

  1. 深入浅出理解linux inode结构

    一.inode是什么? 参考文档:http://tech.diannaodian.com/dw/lin/2012/0112/154629.html 做Android底层驱动或者嵌入式Linux的程序猿 ...

  2. JQuery脚本-通过禁用按钮防止表单重复提交

    <script type="text/javascript"> /* jquer 脚本,避免重复提交 隐藏点击的submit,后在他之后插入同名button伪装成被隐藏 ...

  3. AutoMagic自动化测试平台简介

    PS:给想做自动化平台同学一点思路. AutoMagic 是一个基于WebUI的自动化管理平台.为什么叫AutoMagic呢?因为自动化(Automation)在执行起来的时候是一个很神奇的事情,它可 ...

  4. indexOf.substr,substring,charAt的区别

    var a = "asdfghjkl" alert(a.substr(1, 3));        //  从下标为1开始,往右数3个长度的数, 显示 sdf; alert(a.s ...

  5. $smarty->assign('','')查询结果发送给模板

    $article = one("select * from article WHERE id = '$id'"); $smarty->assign('abc(随便定义)',' ...

  6. asp: suggest ajax

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

  7. Python爬虫《爬取get请求的页面数据》

    一.urllib库 urllib是Python自带的一个用于爬虫的库,其主要作用就是可以通过代码模拟浏览器发送请求.其常被用到的子模块在Python3中的为urllib.request和urllib. ...

  8. php有经纬度计算距离

    /** *  @desc 根据两点间的经纬度计算距离 *  @param float $lat 纬度值 *  @param float $lng 经度值 */  function getDistanc ...

  9. Stage2--Python的数据类型

    说在前面: Stage1-Stage4简单介绍一下Python语法,Stage5开始用python实现一些实际应用,语法的东西到处可以查看到,学习一门程序语言的最终目的是应用,而不是学习语法,语法本事 ...

  10. wx.grid.Grid

    # -*- coding: cp936 -*- import wx import wx.grid import wx.lib.gridmovers as gridmovers import pymss ...