重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32969 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?

winter 2019-04-09
你好,我是 winter。我们今天来讲讲替换型元素。
我们都知道一个常识,一个网页,它是由多个文件构成的,我们在之前的课程中,已经学过了一种引入文件的方案:链接。
这节课我们要讲的替换型元素,就是另一种引入文件的方式了。替换型元素是把文件的内容引入,替换掉自身位置的一类标签。
我们首先来看一种比较熟悉的标签:script 标签。

script

我们之所以选择先讲解 script 标签,是因为 script 标签是为数不多的既可以作为替换型标签,又可以不作为替换型标签的元素。
我们先来看看 script 标签的两种用法:
<script type="text/javascript">
console.log("Hello world!");
</script>
<script type="text/javascript" src="my.js"></script>
这个例子中,我们展示了两种 script 标签的写法,一种是直接把脚本代码写在 script 标签之间,另一种是把代码放到独立的 js 文件中,用 src 属性引入。
这两种写法是等效的。我想这种等效性可以帮助你理解替换型元素的“替换”是怎么一回事。
这里我们就可以回答标题中的问题了:凡是替换型元素,都是使用 src 属性来引用文件的,而我们之前的课程中已经讲过,链接型元素是使用 href 标签的。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(13)

  • 赵健
    老师好,想请问下,业务场景中需要嵌入公司其他行业线的页面,这种不使用iframe该咋办?
    2019-04-09
    1
    12
  • Geeker1992
    老师,style 既然也可以这么用
    <style>css 规则</style>,
    为什么没有 <style src=“”></style>?
    2019-04-10
    8
  • favorlm
    早起第一件事,学习
    2019-04-09
    7
  • 南墙的树
    h5的设计稿,完全照办app设计稿,页面顶部的title导航(包括返回按钮),页面主体部分引入外部资源,这种需求,不使用iframe,请问老师该怎么处理?或者说,从一个不懂技术的产品那里开始,这种方案就有问题?
    2019-04-25
    3
  • Geek_0bb537
    iframe有没有什么好的替代方案 那个导航栏一般都是通用的 我看到淘宝也有iframe
    2019-04-19
    2
  • umaru
    Style元素不能使用css属性,这句话没看懂
    2019-04-10
    2
  • 阿成
    常见的有:http://,https://,file://,data...
    2019-04-09
    2
  • Light Yagami
    老师还是承接刚才那个问题,
    js里 .优先级高于 =,因此:
    1、先计算a.x,此时内存地址1多了x
    2、计算最右边 = ,此时a指向了新地址2
    3、最后计算左边的=,此时内存地址1的x指向了a
    应该是这样的原理,但是我感觉少了一个东西,就是第2步里,a已经指向新地址2了,为什么第三步执行a.x时,a.x还能指向地址1里的x呢?
    2019-08-08
    1
  • 🐳李小博🐳
    @Geeker1992
    回答你的问题,只有可替换型元素才能用src,元素就是实实在在有内容的东西,不管有没有样式文档都会存在,而css是样式文档,他不是可替换型元素。
    2019-05-07
    2
    1
  • 一步
    就说一个经常见到的: blob
    2019-04-26
    1
  • Mazin🍃
    winter你好,如果当前页面需要有个区域是当前系统其他页面或者其他系统的,可以不用iframe,还也可以怎么处理?因为可能还有和子页面的交互
    2019-12-01
  • Light Yagami
    var a = {n: 1};
    var b = a;
    a.x = a = {n: 2};
    a.x b.x 分别是什么?
    老师,能不能把a.x这块的赋值讲一下?

    作者回复: 这个分析是可以分析,但是连等这个用法我觉得是语言的糟粕,所以不太想讲。

    具体来说,等号的语法是先求左边的引用,再执行右边的表达式,然后再做赋值操作的。所以你这个代码的结果特别奇怪。

    参考 https://www.ecma-international.org/ecma-262/10.0/index.html#prod-AssignmentExpression

    2019-08-08
  • AbyssKR
    style 标签不在替换中元素中,所以不使用 src 属性。<style src=""> W3C 的回答是从未讨论过,而且看到貌似以前还出现过 link 引入 JavaScript 的想法。
    2019-04-11
收起评论
13
返回
顶部