这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天 极简总结，尽量简短
HTML部分
是我们的文档声明头。他告诉了浏览器，本文档处理的是 HTML 文档。
html 标签
html 标签即根元素，此处表示文档的开始，该标签包含两个子标签：head 和 body。
head 元素
head 标签下面所包含的标签由 title、meta、link、style组成
title 标签
作用：设置文档的标题或者名称。浏览器通常将该标签的内容显示在窗口顶部或者标签页上。每个 HTML 文档只能有一个，必须有一个 title 标签。
meta 标签
一些文档元数据，如编码格式，作者等。
body 标签
body 标签定义文档的主体，也就是我们的主要内容（比如文本、超链接、图像、表格和列表等）。
标签学习体会
其实我感觉标签之间的区别并不是一个很重要的东西，比如div标签和span标签，表面上看一个是块级元素，一个是行内元素，但这两个区别完全可以用display:block和display:inline来转换。所以标签的区别我认为更多只是语义上的区别。如需要强调，或者做标题就可以用h1标签，虽然div标签内的内容也可以通过调整字体大小和粗细达到同样的效果，但语义上就是没有h1来的一目了然。所以标签没有那么重要，没必要特别记。
CSS部分
层叠样式表(Cascading Style Sheets) 用来控制HTML节点的样式
CSS如何工作？
加载HTML，解析HTML，生成DOM树，加载CSS，解析CSS，把样式挂载到DOM树上，生成渲染树，由浏览器渲染到屏幕上
一个元素样式如何计算出来？
DOM树和样式规则（HTML解析过程中内联的style）共同经历filtering过程（对DOM树上的每一个节点，找到其对应的样式，一个节点可能有多个冲突的样式）生成声明值，经历cascading（冲突的样式按照优先级选择一个优先级最高的属性给节点赋值）生成层叠值，经历defaulting过程（层叠值为空时使用继承或初始值）生成指定值，经历resolving过程（将相对值华为绝对值:em->px)，生成计算值，经历formatting过程将关键字、百分比转为绝对值，生成使用值，最后经历constraining过程生成实际值。
布局
所谓布局，就是确定页面上内容的大小和位置
常规流（文档流）
基本布局方式，从上到下，从左到右 块级、行级、table、flexBox、Grid
浮动
做文字环绕效果
绝对定位
盖在常规流上，不受常规流影响
盒子模型
常规流元素的基础，所有元素都会生成盒子模型
