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. Html练习 | 小影志首页练习

    <!DOCTYPE html> <head> <title>小影志首页练习</title> <style> /*应用全页字体*/ .pg-f ...

  2. 一个典型案例为你解读TDSQL 全时态数据库系统

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯技术工程官方号发表在腾讯云+社区 经典案例 增量抽取.增量计算等都是T-TDSQL的经典案例.如下以增量计算为例,来分析T-TDS ...

  3. jQuery 文本插入和标签移动方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Python Fabric ssh 配置解读

    Python Fabric ssh 配置解读 Fabric 2.4简介: Fabric is a high level Python (2.7, 3.4+) library designed to e ...

  5. [转](.NET Core C#) AES Encryption

    本文转自:https://www.example-code.com/dotnet-core/crypt2_aes.asp Chilkat.Crypt2 crypt = new Chilkat.Cryp ...

  6. 解决The current branch is not configured for pull No value for key branch.master.merge found in config

    使用Git Pull项目的时候出现这个问题: The current branch is not configured for pull No value for key branch.master. ...

  7. <meta http-equiv="X-UA-Compatible" content="IE=edge" />详解

    X-UA-Compatible是针对IE8新加的一个设置,对于IE8之外的浏览器是不识别的,这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE> ...

  8. 弱类型dynamic与var

    dynamic与var都可代替任何类型 var关键字是C# 3.0开始新增的特性,称为推断类型. 1.必须在定义时初始化 2.一但初始化完成就不能再给变量赋与初始化值类型不同的值 3.var要求是局部 ...

  9. View视图调用控制器方法

    1.@using XXX.Controllers;//引用控制器 2. var otherController = DependencyResolver.Current.GetService<U ...

  10. Aligning Plots in a Column作图列对齐

    Plot[Sin[x], {x, 0, Pi}] Plot[10000 Sin[x], {x, 0, Pi}] 直接作图左边无法对齐,影响图的美观.可以使用左边界空格实现列对齐,代码如下: optio ...