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

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. 使用IntelliJ IDEA 配置Maven(转)

    原文地址:使用IntelliJ IDEA 配置Maven 1. 下载Maven 官方地址:http://maven.apache.org/download.cgi 解压并新建一个本地仓库文件夹 2.配 ...

  2. Git的安装和创建版本库

    1.Git是分布式版本控制系统 2.安装Git 下载Git后,按照默认设置即可实现安装,安装完毕后点击git目录下的Git Bash 输入以下命令符: git config --global user ...

  3. Qt Widgets——抽象旋转框及其继承类

    默认外观分别如下(win7,与上述顺序对应): 可看出,都是由一个可编辑的文本框及右端小箭头组成 QAbstractSpinBox 属性简单解释如下: Properties accelerated : ...

  4. Qt调用JS(二)

    转自:http://www.cnblogs.com/verstin/p/4908673.html <html> <script language="JavaScript&q ...

  5. 快捷键设置 keyiing.json

    // 快捷键设置 keyiing.json // 将键绑定放入此文件中以覆盖默认值 [     /* // 转换大写     {         "key" : "ctr ...

  6. 使用 NumPy 和 Matplotlib 绘制函数图

    Numpy是用python进行科学计算的基本程序包. 它主要包含以下功能: ♦强大的n维数组对象 ♦复杂(广播)函数工具 ♦用于集成c/c++和Fortran代码-有用的线性代数 ♦傅里叶变换和随机数 ...

  7. shell shell基本概述

    SHELL的概念 SHELL是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序, 用户可以用shell来启动,挂起,停止甚至是编写一些程序. ​ Shell还是 ...

  8. linux 播放加密DVDs

    尝试下 https://www.cyberciti.biz/faq/howto-ubuntu-linux-playback-dvd/

  9. [CodeForces332E]Binary Key

    Problem 题目给出一个加密前的字符串长度为p和加密后的字符串长度为s,让你求一个长度为K字典序最小的密钥. 密钥是循环的,第i位为1表示加密前的第i为是有用的否则是没用的. Solution 首 ...

  10. OO第一次课程总结分析

    作为一个之前从未使用过java语言,主攻面向过程式编程的“面向对象”小白,于是乎从第一次作业开始时利用时间疯狂学习java语言,经过三次作业的残酷洗礼,自己对面向对象式编程多多少少有了初步的了解(前路 ...