这是我参与「第五届青训营 」笔记创作活动的第1天，今天主要学习了前端与HTML和理解CSS，相关知识点如下。
1.前端分为三层，HTML结构层，CSS样式层，JavaScript行为层。
2.<!doctype html>必须得写，他决定了浏览器以一种什么样的格式去渲染页面，如果不写的话将以一种怪异的模式去解析页面
3.有序列表ol，li；无序列表ul，li；以key，value的形式展示列表dl，dt，dd
4.input的type属性有一个date属性值，表示能够选择日期，min属性表示可选择的最小日期
5.input的type属性有一个list属性值，配合datalist标签和option标签可以辅助用户快速输入相应的值。例如当用户输入u时就会跳出uk等
6.快捷引用标签blockquote，有一个cite属性可以书写链接，表示引用部分的内容是从哪个网址得来的。cite标签短引用，比如引用人名，书名，第一章等等，可以写在p标签内部表示短引用。q标签会给引用的内容加上引号。code标签表示引用代码的标签，用pre包裹code可以引用多行代码。strong标签表示着重强调，字体会加黑，而em标签也表示强调，但是是在一段话中表示重读的内容。
7.语义化标签：header头标签，nav导航标签，main主要内容标签，aside标签表示相关的内容，article文章标签，footer页尾标签。在实际开发中多使用语义化标签会让html结构更加清晰，便于开发者理解和维护。
8.css代码由三部分组成，选择器selector，属性property，属性值value，声明declaration。
9.在页面中使用css：外链式，嵌入式，内联式。推荐使用外链式，这样可以实现内容与样式分离。
10.可以通过标签选择器，id选择器，类名选择器，属性选择器[disabled]{...}（属性选择器还可以配合正则表达式使用）来进行选择元素设置css样式。
11.伪类选择器，比如a标签的四个伪类选择器，a:link表示正常，a：visited表示访问过，a：hover表示移上去，a：active表示点击a时。：focus表示聚焦时。li：first（last）-child表示第一个或者最后一个孩子设置css样式。
12.input.error表示标签既要为input，又要有error的class类名时才会添加css样式。A>B 表示选中B，如果它是A的子元素（必须使父子关系）。A~B，选中B，如果B在A后且跟A同级。A+B，选中B，并且B是A后面的第一个标签
13.颜色的几种表达形式#000000aa，将aa转换成16进制 rgba（ ，，，透明度）或者直接是颜色的英文单词，hsla（某种颜色，取值0-360，s0%-100%饱和度，l0-100%颜色亮暗，透明度）
14.white-space可以用来控制空格以及换行。normal表示正常。nowrap表示不换行，pre表示不合并空格，pre-wrap不合并空格但换行
15.选择器覆盖的优先级：按特异度来计算，比如id class 标签，看谁的特异度高。
16.文字相关的属性都可以继承，盒模型相关的属性一般都不可以继承。显示继承：*{属性名：inherit}，表示页面中所有的盒子的属性都可以继承，继承是继承父级元素的计算值，em是不能被继承的，继承的是具体的计算出来的px值
17.布局：文档流（行级，块级，表格布局，flexbox，gird布局），浮动，绝对定位
18.padding和margin如果设置百分数的话是按照容器的width来进行计算的
19.当容器的width、height为0时，通过设置border属性可以画出三角形。
20.margin在垂直方向上是有margin collapse的，取两个盒子的最大margin值来确定两者之间的高度
21.overflow，visible可见，hidden超出的部分隐藏，scroll滚动条
22.块级元素（body article，div h1 p ul li等）与行级元素（span em 等）：块级元素独占一行，行级元素可以跟其他行级盒子放在一行或者拆成多行。块级元素适用所有盒模型属性，行级元素没有width和height，由内容撑高。
23.display：liline：行级，block：块级，inline-block：本身是行级，可以放在行盒中，可以设置宽高
24.行级排版上下文（IFC），只包含行级盒子的容器会创造一个IFC，规则：盒子在一行内水平摆放；一行放不下是换行展示，由text-align决定一行内盒子的水平对齐，由vertical-aline决定一个盒子在行内的垂直对齐，避开浮动元素
25.块级排版上下文（BFC），某些容器会创造一个BFC，根元素，浮动，绝对定位，inline-block，Flex子项和Gird子项，overflow不是visible的块级盒子，display：flow-root。规则：盒子从上到下摆放，垂直方向上margin塌陷，bfc内部盒子的margin不会与外面的合并，BFC不会与浮动元素重叠。
26.flex布局，有自己的排版上下文。display：flex ，flex-direction：row（默认水平向右） row-reverse（水平向左） col（从上到下） col-reverse（从下到上）justify-content：center（垂直方向对齐居中） align-items：center（水平方向对齐） flex-grow：比例，剩余空间按比例伸展的宽度 flex-shrink：比例，剩余空间不足时，不足的空间按比例压缩 flex-basis：没有伸展或者收缩时的基础长度
