前言
很多后端开发者长期专注业务逻辑的开发以及运维上面的技能提升，很少有人能熟练使用前端技术栈。而现实情况就是，随着技术的更新，后端开发者已经到了必须熟练掌握前端知识体系。 我们知道前端的三板斧是HTML、CSS和JavaScript， JS对后端人员来说还是比较好学习的，因为js还是有一一套结构逻辑的。 而让很多老前端都摇头的还是 HTML 和 CSS。
HTML和CSS并不是想的那么容易，背诵一些个标签和属性就完事的。因为技术栈比较繁杂，很多还都有交叉。入门容易，但是想学好还是比较难度的。本系列将从头构建起一套完整的结构体系，帮助大家熟练掌握前端知识体系中的基本功。
学习技术没有捷径，是个循序渐进的过程，不可能一天精通CSS。 但是有方法可以提高我们的学习效率。 在刚开始学习的时候，我们需要构建一份技术的架构图，然后根据将大而杂的技术拆分为更小的细节进行学习，和我们写软件的逻辑是一样的。
主要先通过大量阅读最基本的理论知识，然后提取关键点创建一个知识树。 再去硬着头皮去做项目，通过不断的犯错、调试和查遗补漏来加深我们对技术细节的理解和记忆。最后在回过头去学习理论细节，新旧知识的关联，从而将我们的知识树达到一个闭环。
我们在这一系列的文章中，将对内容做如下安排：
HTML基础篇
- html简洁
- head
- 元数据
- SEO
- og
- HTML组成
- 元素级别
- 语义化标记
- 规划一个网站
CSS基础篇
选择器
- 基本选择器
- 通配选择器
- 类型选择器
- ID选择器
- 类选择器
- 组合选择器
- 后代选择器
- 子代选择器
- 相邻选择器
- 通用兄弟选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
选择器优先级
不同选择器是靠权重来进行制定优先级的
样式继承
层叠层
层叠层主要解决了大型项目和团队协作中的冲突问题。
盒模型
- 外部显示
- 内部显示
- 区块盒子与行内盒子
- 标准盒子和替代盒子
属性分类
值和单位
- 数值类型
- 相对长度
- 绝对长度
- 颜色
- 位置
- 字符量和标识符
- 函数
CSS3新特性
- 渐变色
- 过渡
- 动画
- 变形
- 分组
- 变量
布局
- 常规流布局
- Flexbox弹性布局
- Grid网格布局
- 定位技术
- 表格布局
- 多列布局
- 响应式设计
- 移动端
JavaScript基础篇
- 文法：
- 词法：词汇结构和标记化词法结构，代码中的基本单位
- 标识符
- 保留字
- 常量
- 运算符
- 分隔符
- 字符串模板
- 注释
- 数字直接量、字符直接量、正则表达式直接量
- 语法：语句和表达式的结构和规则
- 语句
- 表达式
- 函数
- 条件语句
- 循环语句
- 词法：词汇结构和标记化词法结构，代码中的基本单位
- 语义：代码的含义和行为
- 变量声明
- 作用域
- 8中函数
- 闭包
- this
- 运行时：
- 数据结构
- 类型
- 基本类型
- 类型判断
- 类型转换
- 实例
- 类型
- 执行过程
- 数据结构
