这是我参与「第五届青训营 」笔记创作活动的第1天。

前端入门

1.前端与HTML

前端应该关注的点，美观，安全，兼容，功能，体验，性能，无障碍...... 前端可以用nodejs开发服务器端的应用，功能，electron和react native开发客户端 webRTC多人会议，webGL游戏，可以用其他语言的代码编码在web端展示，

语法

推荐小写，空标签可以不闭合，属性值推荐用双引号，属性值也可以省略， 标题，h1-h6 列表，有序，无序，键值对列表（dl-dt-dd）， 链接，多媒体，输入， 文本类标签，blockquote长短句，cite属性表明文字来源，cite短标签，一般是文章标题，q应用之前的内容，code代码，pre放在code前表示多行代码，strong（紧急），em（语气）强调标签， 语义化标签，header，nav，main... 谁在使用我们的HTML，开发者要维护，修改，浏览器展示，搜索引擎，提取关键词，屏幕阅读器，盲人使用，可读性，可维护，搜索优化，提高无障碍性。 如何做到，w3c阅读，了解标签属性含义，根据内容思考使用何种标签，不要生成代码

CSS

选择器，通过标签，id，类名选择，属性选择，DOM树的位置选择

CSS使用，外链，嵌入，内联

伪类，状态性的伪类，特定状态下的类，结构伪类，根据在DOM树的位置选择的类 组合

颜色

透明度，字体，行高，间隔 选择器优先级

使用场景，基础样式被高优先级的样式覆盖， 继承，某些属性会继承父元素的计算值，一般是文字相关的属性，强制继承，给属性值设置inherit， 初始值，CSS求值过程 根据优先级，属性继承等规则来计算判断，

布局

确定内容大小，和位置的算法，根据元素，容器，兄弟节点和内容的信息进行计算 相关技术，常规（行，块，表格，flexbox，grid），浮动，绝对定位， 常规，盒子的margin，border，padding，width，height，content，宽高取值，其中百分数根据相对于容器的contentbox高度来计算的，auto取值是由内容计算得来的，容器有指定高度百分数才会生效， 常用技巧，水平居中，margin:auto 对于溢出，overflow三个属性，visible，hidden，scroll，

块级和行级

块级，不和其他盒子并列，使用所有盒子属性， 行级，和其他行级共享一行，不适用于盒子模型的width，height

BFC排版规则

盒子从上到下，垂直margin合并，BFC盒子的margin不会和外面合并，BFC不会和浮动元素重叠。

flexbox

控制子元素摆放流向，顺序，水平垂直方向对齐，是否允许折行，盒子的宽高，

grid

二维布局格式，需要划分格子，设置行高宽高实现调节布局，

定位

static默认定位

relative：常规布局定位，相对于自己本该在的位置进行偏移，使用top，eft，bottom，right设置偏移距离，流内其他元素当它没有偏移一样布局，

absolute：脱离常规流，相对于最近的非static祖先定位，不会对流内元素布局造成影响，

最后课程建议，充分利用MDN和W3C css规范，保持好奇心，持续学习。