这是我参与 [第五届青训营] 伴学笔记创作活动的第1天
通过三天的掘金教学，使我回顾了HTML与CSS知识
1.HTML
HTML即超文本标记语言
1.1以前不太注意到的<!DOCTYPE html>决定了浏览器的渲染模式，不使用会导致浏览器渲染的 怪异模式
1.2语义化：
语义化标签每个有其特定的语义，如 <cite>表示引用等。开发者应遵循语义编写程序，可以方便样式编写，提高代码可读性，以及方便搜索引擎获取信息
1.3浏览器渲染网页[1]：
- 浏览器将HTML文档解析为DOM树
- 处理CSS，构成层叠样式表模型CSSOM
- 将DOM和CDDOM合并为渲染树 rendering tree
- 将渲染树各个节点绘制到屏幕上（painting）
其中DOM树大致以下图展开
2.CSS
2.1 css 工作原理
css会解析每一个元素的css属性，并将这些属性按照相应规则、权重值等计算出属性层叠值，对于各个元素的相同属性，选出层叠值最高的作为该属性的值
2.2 颜色模式
rgb模型： 红绿蓝值，rgb(x,y,z)或#xyz
HSL模型：色相、饱和度、亮度；常用于调整某系列的颜色
alpha透明度：css中是不透明度，数值越高越不透明；
使用方法是在颜色后追加 ’a‘ 如rgba、hsla
2.3选择器特异度：
- !important>内联>id>类=属性选择器=伪类选择器>标签选择器=伪元素选择器
- css某些属性会继承父元素：直接样式>最近祖先样式>祖先样式
- 可以使用显示继承让某些不可继承的属性继承自父元素：
xxx:inerit;
2.4初始值
每个属性都有一个初始值，可以使用 init 关键字重置为初始值
2.5 border-box
width和height指定的是包含padding与border的宽高
2.6 css不允许同一个父级中既有块级盒子又有行级盒子，于是会用一个匿名块级盒子将行级盒子包裹
2.7 Flexibility
设置子项的弹性
flex-grow有剩余空间时的伸展能力 会将剩余空间按份数分配flex-shrink容器空间不足时的收缩能力 将超出空间按份数减去flex-basis没有伸展或收缩时的基础长度
