Merge pull request #79 from rudy-lc/main

添加变量提升,CSS盒子模型,HTML语义化的文章介绍
This commit is contained in:
yck 2021-09-26 19:24:24 +08:00 committed by GitHub
commit 9cb2228c3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -196,8 +196,6 @@ JS 数据类型分为两大类及八种数据类型,注意别漏了 ES6 新增
- [ ] [You Don't Know JS 书中关于 this 的第二章节](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/ch2.md)
- [ ] [深入理解 js this 绑定 ( 无需死记硬背,尾部有总结和面试题解析 )](https://segmentfault.com/a/1190000011194676)
> 务必自己总结规则!
#### 闭包
- [ ] 文档
@ -207,17 +205,6 @@ JS 数据类型分为两大类及八种数据类型,注意别漏了 ES6 新增
- [ ] [JavaScript 的静态作用域链与“动态”闭包链](https://juejin.cn/post/6957913856488243237)
- [ ] [知乎中关于闭包的讨论](https://www.zhihu.com/question/34210214)
#### 变量提升
变量提升Hoisting可以将变量和函数在编译阶段放入内存从而在执行阶段时在声明前使用。
- [ ] 文档
- [ ] [JS 变量提升](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
- [ ] 推荐文章
- [ ] [JavaScript 变量提升和函数提升](https://towind.fun/2021/05/10/js-hoisting/)
- [ ] [我用了两个月的时间才理解 let](https://fangyinghang.com/let-in-js/)
- [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html)
#### 作用域
作用域是指程序中定义变量的区域,该位置决定了变量的生命周期,也就是变量和函数的可访问范围。
@ -252,6 +239,17 @@ JS 数据类型分为两大类及八种数据类型,注意别漏了 ES6 新增
- [ ] [JS 的 new 到底是干什么的?](https://zhuanlan.zhihu.com/p/23987456)
- [ ] [JavaScript 深入之 new 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/13)
#### 变量提升
变量提升Hoisting可以将变量和函数在编译阶段放入内存从而在执行阶段时在声明前使用。
- [ ] 文档
- [ ] [JS 变量提升](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting),变量提升的概念
- [ ] 推荐文章
- [ ] [JavsScript 变量提升和函数提升](https://towind.fun/2021/05/10/js-hoisting/),深度解析变量提升和函数提升,举例说明各种情况下的变量提升
- [ ] [我用了两个月的时间才理解 let](https://fangyinghang.com/let-in-js/),深度理解解析 let 和 val 的区别,和 let 的暂时死区
- [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html)JavaScript 中的作用域和函数声明和变量声明的提升
#### Class(类)
`class` 只是原型链的语法糖,与其它语言中的类不是同一样东西。
@ -363,10 +361,10 @@ JavaScrip 在变量被创建时分配内存,并在对象不再使用时自动
html 语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析。在没有引入样式 CCS 样式的时候也能以一种可以分辨出来大致表示内容的文档格式显示,并且是容易阅读的。 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
- [ ] 文档
- [ ] [HTML 中的语义](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html)
- [ ] [HTML 中的语义](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html),什么是 HTML 语义化HTML 语义化有什么好处
- [ ] 推荐文章
- [ ] [IFE-NOTE页面结构语义化](https://rainylog.com/post/ife-note-1/)
- [ ] [关于 HTML 语义和前端架构](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/)
- [ ] [IFE-NOTE页面结构语义化](https://rainylog.com/post/ife-note-1/)HTML5 语义化中的页面结构语义化的一些经验和理解
- [ ] [关于 HTML 语义和前端架构](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/)HTML 语义化在开发中配合 CSS 结构化类名的使用构建可重用和可组合的组件
### CSS
@ -378,11 +376,11 @@ html 语义化就是让页面的内容结构化,便于对浏览器、搜索引
在 CSS 中所有的元素都被一个个的“盒子box”包围着我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box),理解这些“盒子”的基本原理,是我们使用 CSS 实现准确布局、处理元素排列的关键。
- [ ] 文档
- [ ] [CSS 盒子模型](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
- [ ] [CSS 盒子模型](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model),官方文档深入了解 CSS 盒子模型
- [ ] 推荐文章
- [ ] [CSS 盒模型之内边距、边框、外边距 十九问](https://juejin.cn/post/6880111680153059341)
- [ ] [CSS Box Model](https://www.w3.org/TR/css-box-3/)
- [ ] [CSS 盒模型详解(图文教程)](https://www.cnblogs.com/qianguyihao/p/7256371.html)
- [ ] [CSS 盒模型之内边距、边框、外边距 十九问](https://juejin.cn/post/6880111680153059341),通过举例说明盒子模型各种常见形态和问题
- [ ] [CSS Box Model](https://www.w3.org/TR/css-box-3/),盒子模型的一些规范介绍
- [ ] [CSS 盒模型详解(图文教程)](https://www.cnblogs.com/qianguyihao/p/7256371.html),通过图片和例子说明盒子模型的各个部分和在页面上的表现形式
#### CSS 选择器
@ -391,10 +389,10 @@ CSS 中,选择器用来指定网页上我们想要样式化的 HTML 元素。C
CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素,叫做“选择器的对象”。
- [ ] 文档
- [ ] [CSS 选择器](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)
- [ ] [CSS 选择器](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors),官方文档详细地讲授选择器的不同使用方式,并了解它们的工作原理。
- [ ] 推荐文章
- [ ] [30 个你必须熟记的 CSS 选择器](https://code.tutsplus.com/zh-hans/tutorials/the-30-css-selectors-you-must-memorize--net-16048)
- [ ] [深入解析 CSS 样式优先级](https://cloud.tencent.com/developer/article/1545341)
- [ ] [30 个你必须熟记的 CSS 选择器](https://code.tutsplus.com/zh-hans/tutorials/the-30-css-selectors-you-must-memorize--net-16048),开发中常用的 CSS 选择器,熟练掌握以后可以很大程度提高 CSS 的编码体验
- [ ] [深入解析 CSS 样式优先级](https://cloud.tencent.com/developer/article/1545341),详细介绍了 CSS 样式的权重优先级,避免写重复样式和样式被覆盖不生效的问题
#### Flex