html
语义化
关于语义化有一些意义不大的官话：便于搜索引擎，便于阅读等。
最大的缺点是现在的开发那用了语义化标签大概率跟自带样式打架。
语义化的本质，是标签名拥有一定含义，如
表示头部内容。现在的语义化更应该理解为编写 React Render 中的 JSX 或者 Vue 的模版语法时，你的工程化组件化开发中，你的组件名的语意化。现在已然不是一个 html 文件里写点标签加几句 script 就是一个前端项目的时代了。
h5 语义化标签在框架横行的今天有些失去了他应有的光芒，但他的本质思想仍然值得学习。比如现在要从零开始写一个淘宝网，那么整个庞大的网站，说明性大段文字，商品标题等标题性文字，价格文字这几类都可以封装成一个包含样式的组件来得到属于自己的语义化标签。
比如做淘宝，你写了一个 price 组件，他需要一个 number 类型的参数，返回一个 ReactElement，你调用时候就是一个 标签加一个数字来得到一个统一字体的，红色的，统一小数位数和格式的 dom 节点。 那这个 price React 或者 Vue 组件其实就是你的语义化标签。
defer & async
script 标签 js 脚本会阻塞 html 的解析和页面视图的更新甚至用户操作。
defer & async 可以在 js 脚本初次加载时调控加载脚本与 html 解析的关系。
默认脚本的下载和脚本的解析执行都是会阻塞视图渲染更新。
async 异步会使让浏览器的网络进程新开一个专门的线程下载这个文件，在下载过程中完全不影响视图进程，但下载完毕后会立即执行 js 脚本并阻塞试图。
defer 推迟执行下载行为等同 async，但加载完毕后不会执行，等地视图渲染结束后才会执行。效果上相当于在这个脚本头部用了 document.ready / DOMContentLoaded ( dom解析完成 )
联想：window.ready 是一种浏览器行为，让 js 脚本主动等待浏览器窗口中的所有资源都准备好，包括图片视频等。window.document。
CSS
盒模型
- box-sizing: content-box ：标准盒模型（默认值）。width/height 设置为 content
- box-sizing: border-box ：IE（替代）盒模型。width/height 设置为 content + padding + border
优先级
A：内联央视
B：ID 选择器
C：类选择 / 属性选择 / 伪类
D：标签选择 / 伪元素
选择路径中每种类别出现的次数为值，从 A 开始依次比较，大的生效。
理念：客套话背后的思想是 “ 作用域越小的优先级越高 ”
flex
- flex-firection 主轴方向，默认为 row 水平方向，column-reverse 垂直主轴但是反向排列
- flex-wrap 换行方案，默认为 nowrap 不换行
- justify-content 主轴对齐方式
-
- flex-start 轴向开头 / flex-end 轴向末尾
- center 居中对齐
- space-between 均匀分布，两边不留
- space-around 均匀分布 两边留一半宽
- align-items 交叉轴对齐方式
-
- flex-start / flex-end / center
- stretch （默认） 高度填充满
- baseline 相对第一行的基线对齐
- align-content 多行时主轴和交叉轴的对齐方式
-
- 主轴对齐方式 + stretch
- flex-grow 有剩余空间时此元素按比例变宽 / flex-shrink 变窄
- flex-basis 元素在 flex 计算前先有限占据多少主轴空间,默认值 auto 元素本来大小
- flex ：
-
- 有两个快捷值 auto ( 1 1 auto ) / none( 0 0 auto )
- align-self 该元素的交叉轴对齐位置
line-height
- 继承：只继承具体数值和比例如 200px or 1.5，200% 则会计算成父元素数值的二倍。
- 基线：四线格的倒数第二条线称为基线；vertical-align 基线对齐方式
- 行高：两条基线之间的距离，如果不是文字元素则基线为 marginBottom
选择器
- [] 属性选择器，
- 文档选择器
-
- .a .b a类内部的b类
- a>b a的直接子类( 不越级 )
- a+b a 相邻的 b
- a～b a 后面的所有 b
- 伪类选择器
-
- div:nth-child(n)
- div:nth-of-type(n)
- div:last-child / :first-child
\
\
\
\
\
\
\
\
