重学前端
程劭非（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_0bb537iframe有没有什么好的替代方案 那个导航栏一般都是通用的 我看到淘宝也有iframe2019-04-19 2
umaruStyle元素不能使用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
一步就说一个经常见到的： blob2019-04-26 1
Mazin🍃winter你好，如果当前页面需要有个区域是当前系统其他页面或者其他系统的，可以不用iframe，还也可以怎么处理？因为可能还有和子页面的交互2019-12-01- Light Yagamivar 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-AssignmentExpression2019-08-08 
AbyssKRstyle 标签不在替换中元素中，所以不使用 src 属性。<style src=""> W3C 的回答是从未讨论过，而且看到貌似以前还出现过 link 引入 JavaScript 的想法。2019-04-11
收起评论