虽然一直在用这两个属性,但是一直没有具体的去区分和了解这两个属性的区别,今天就来看看

href标识超文本引用,用在linka等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系

src表示引用资源,表示替换当前元素,用在imgscriptiframe上,src是页面内容不可缺少的一部分。

src是source的缩写,是指向外部资源的位置,指向的内部会迁入到文档中当前标签所在的位置;在请求src资源时会将其指向的资源下载并应用到当前文档中,例如js脚本,img图片和frame等元素。

<script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理,直至将该资源加载,编译,执行完毕,图片和框架等元素也是如此,类似于该元素所指向的资源嵌套如当前标签内,这也是为什么要把js饭再底部而不是头部。

<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件,会下载并且不会停止对当前文档的处理,这也是为什么建议使用link方式来加载css而不是使用@import。

补充:link和@import的区别

两者都是外部引用CSS的方式,但是存在一定的区别:

区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。

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

  1. href 和src 的区别

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

  2. url,href和src的区别,defer和async的区别

    URL(Uniform Resource Locator):统一资源定位符,互联网上的每个文件都有一个唯一的URL,基本URL包含协议,IP地址,路径和文件名. 重点:herf和src的区别 href ...

  3. 浅谈href 和 src的区别

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

  4. href和src的区别(小计)

    1.Src 是指向物件的来源地址,请求src资源时会将其指向的资源下载并应用文档中 src的内容是页面上比不可少的一部分,是引入.在 img.script.iframe 等元素上使用. 2.href ...

  5. href与src的区别

    src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置:在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素. href ...

  6. 3、href和src的区别

    href:将现在的页面连接到新的页面 src:将需要引用的东西添加到现在的页面 <a href="mailto:youremailaddress@host.com">C ...

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

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

  8. href和src的使用场景

    href和src的使用场景 href和src的用法虽然简单,但是有时候会突然记不起来该怎么用,且两者不可相互替换,下面列出来方便记忆,并给出具体区别. href的使用: 1.外部css引用:<l ...

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

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

随机推荐

  1. 将一台电脑上的虚拟机上的系统复制到另一台电脑的虚拟机上!!!and想询问大神们问题的解决办法??

    虚拟机是Oracle VM VitualBox版本 前段日子oracle老师让课下安装虚拟机+windows8+oracle数据库,但悲伤的我安了七八遍(重装系统+安装数据库+配置数据库)依旧在配置数 ...

  2. antd-mobile的DatePicker日期选择组件使用

    现在项目上有个需求,在时间选择上需要精确到分钟,且分钟只能是0分钟或者是30分钟. 使用了antd-mobile的DatePicker组件,具体用法可参考:https://mobile.ant.des ...

  3. PAT 1005 Spell It Right

    1005 Spell It Right (20 分)   Given a non-negative integer N, your task is to compute the sum of all ...

  4. Oracle 拼接字符串

    Tom大神写的 CREATE OR REPLACE FUNCTION stragg(input varchar2) RETURN varchar2 PARALLEL_ENABLE AGGREGATE ...

  5. Elasticsearch安装部署(CentOS)

    1.安装JDK,http://www.cnblogs.com/zhi-leaf/p/5996287.html. 2.下载ES:https://www.elastic.co/downloads/elas ...

  6. MATLAB统计工具箱 转

    D:\Program Files\MATLAB\R2012b\toolbox\stats\stats MATLAB统计工具箱包括概率分布.方差分析.假设检验.分布检验.非参数检验.回归分析.判别分析. ...

  7. Java Web(八) 事务,安全问题及隔离级别

    事务 什么是事务? 事务就是一组原子性的SQL查询,或者说是一个独立的工作单元. 事务的作用 事务在我们平常的CRUD(增删改查)操作当中也许不太常用, 但是如果我们有一种需求,一组操作中必须全部成功 ...

  8. html 多媒体使用

    HTML插件 辅助应用程序(helper application)是由浏览器启动的程序,辅助应用程序也称为插件. 辅助应用程序可用于播放音频和视频(或其他 ).辅助程序是使用<Object> ...

  9. Vue + Element UI 实现权限管理系统(搭建开发环境)

    技术基础 开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供 ...

  10. Unity中UGUI之Canvas属性解读版本一

    Canvas的基本属性 1.Canvas Scaler组件 : Canvas Scaler组件用于设置处于不同组件下Canvas画布中的元素的缩放模式. Ui Scaler Mode : 设置UI的缩 ...