2021已经远去，作为一个不那么卷的新人程序猿，必不可少的出一份年度总结，用来了解一哈自我和世界，知道这些，应该可以算是入了个大概，废话不多讲，下面是正文！
1. 你不得不会的HTML部分：
首先，HTML是一种标签语言，由一对语义明确的<>标签组成，基本结构至少包括：整体语义标签<html></html>，<head></head>，<body></body>分别用来表示文档开始，文档头部，文档主体，而细分的话其中又包含可读取语言标签<html lang="en/zh">（en为英文，用浏览器打开后会出现可选提示，zh为中文，用浏览器打开后默认由中文模式打开）
<head>标签下 <meta charset="UTF-8">代表了可读取编码符是包含全世界所有国家需要用到的字符，<title>Document</title>标签则是代表了整个文档或者说页面的标题，其显示区域如下：
<link rel="stylesheet" href="css1.css">为引入文件的标签，通常可引入CSS样式，小图标，iconfont（字体图标）等，通常放置在<title>标签下方。文档自上而下读取。
*一些标签和作用：
h1-h6代表了6种标题大小的标签，1最大6最小，分别用来显示1-6级标题；
<p>为段落标签，里面所有内容一行显示，遇到边界会自动换行，且不另外设置样式的话不会首行缩略和进行行高等操作
<hr>为水平分割线，就像：
<br>为换行，<strong>为加粗，<em>为倾斜
一些特殊符号： 空格； <小于号； >大于号； "双引号； ©版权符号
<img src="" alt="" title+"">为图片标签，src为图片的地址，该地址可以是本地地址，也可以是外部地址，alt为读取图片失败后显示的信息，title是鼠标悬停时显示的信息，单独设置图片宽高时会等比缩放
<a href="" target=""></a>是链接标签，通过点击特殊样式的内容跳转到某种资源上，href是链接地址，target属性设置目标窗口打开的位置，属性值_self替换自身窗口，_blank是打开新窗口，通过<a name = ""></a>组成一对锚链接，即点击a href标签跳转到a name标签处，
<div></div>是一个块级标签，开辟出一块独立的区域，如果不设置宽高将会由内容撑开，
<span></span>是一个行级标签，通常用于突出显示段落中的部分内容
块级标签：该元素独占一行(h2,p)
行级标签：按行显示，一行不够放，才会自动换行(a,strong,em,img)
通常情况下，行级标签要放在块级标签里面使用，p标签不能嵌套p标签
ol是有序列表标签，它里面的列表项是有序号的
ul是无需列表标签，它里面的列表项是没有序列的，但是有符号
li 是列表项标签，ol，ul都可通过type属性设置标签符号的样式，
列表可以嵌套定义，比如<ul><li><ul><li></li></ul></li></ul>
dl是定义列表标签
dt的定义列表的标题标签
dd是定义列表的描述标签，用来描述dt
可以用多个dd去描述一个dt,一个dl可以只描述一个dt，也可以描述多个dt,
<table></table>是表格标签，caption是表格的标题标签，<thead>是表格头，<tbody>是表格主体，<tfoot>是表格尾部，作用是将表格分为一个由不同功能区域构成的完整表格，其中<thead>里面又包含<th>(表头标签，该标签里的内容会默认加粗显示)，<tr>为行标签<td>为列标签，先行后列colspan属性，用于单元格跨列，rowspan属性，用于单元格跨行
form是表单标签，表单的作用是：接收用户输入的数据，并向服务器发送，method属性设置表单的提交方式：GET和POSTP，action属性设置表单的提交地址，如果表单中使用了文件域，表单标签需要添加一个enctype="multipart/form-data"属性
input标签是表单的元素，绝大多数表单元素都是使用input标签，通过type属性设置元素的类型：
<audio> 标签定义声音，比如音乐或其他音频流，为入口标签，具体地址内容由其内部的<source src="" type="audio/MP3">标签进行定义，可放置多个source，读取可成功读取的那一个
<video> 标签定义视频，比如电影片段或其他视频流，为入口标签，具体信息由内部<source src="" type="video/mp4">标签进行定义，可放置多个source，读取可成功读取的那一个
<svg></svg>标签是指内联svg的矢量图，优点是不会随屏幕放大而失帧或模糊，SVG 是一种使用 XML 描述 2D 图形的语言，区别于canvas，Canvas 通过 JavaScript 来绘制 2D 图形，缺点是加载进程会造成阻塞，减慢渲染进度，不适合大幅度复杂设计，适合大进程点线设计，如地图放大，模型绘制等。
localStorage 和 sessionStorage
web存储是由一对Key 和Value组成的，localStorage 对象存储的数据没有时间限制
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
可用的API如上。
<canvas> 标签定义图形，比如图表和其他图像，使用Javascript来定义或者绘制图像，<canvas></canvas>只是定义了一个canvas容器，容器内部需要由脚本进行绘制，此处将不作详解。
2. 你不得不会的CSS部分：
CSS可以在title标签下的style标签内进行编码，或者由link标签进行外部引入
选择器：
标签选择器：以标签的名称作为选择器的名称，对所有该标签添加样式 h1{}
类选择器：选择器的名称是自定义的，必须以.符号开头。在标签中，通过class属性调用具体的类选择器样式，在标签中使用时，不需要加.号 <div class="box1"></div>， .box1{}
id选择器：选择器的名称也是自定义的，必须以#符号开头。在标签中，通过id属性调用具体的id选择器样式，在标签中使用时，不需要加#号，在网页中，标签的id属性值，通常是不能重复的。id选择器的优先级更高 <div id="box2"></div> #box2{}
基本选择器的优先级：id选择器 > 类选择器 > 标签选择器， !important的优先级最高
层次选择器：
后代选择器，方式是：A B{}。对A里面的所有B添加样式
子选择器，方式是：A>B{}。 对A里面的所有第一级的B添加样式
相邻兄弟选择器，方式是：A+B{}，B必须是A相邻的下一个元素
通用兄弟选择器，方式是：A~B{}，对A下面的所有的B元素添加样式
属性选择器：属性选择器，方式是：[属性名]{}，通常会配合其他选择器一起使用，比如：li[属性名]，只针对li标签，例如：li[name="first"]{}
属性选择器，可以根据属性值，精确的对某些标签添加样式：
$= 表示以指定的属性值结尾
^= 表示以指定的属性值开头
*= 表示属性值包含指定的内容
交集选择器，方式是：选择器A选择器B{}，同时满足A和B的元素，添加样式
并集选择器，方式是：A,B,C{}，给多个选择器，设置相同的样式
结构伪类选择器：
:first-child 表示指定标签的第一个
:last-child 表示指定标签的最后一个
:nth-child(n) 表示指定标签的第n个
盒子模型：网页里面的每一个标签，都可以当做是一个盒子，该盒子是用来放内容的，通过：宽高，内边距，边框，外边距定义盒子
每条边框可以通过三个属性设置，分别设置：边框宽度（width） 边框颜色（color） 边框类型（size），
边框类型solid，表示实线，边框类型double，表示双实线，边框类型dashed，表示虚线，边框类型dotted，表示点线，例：
border: 1px solid black，即表示线宽为1 ，颜色是黑色的直线，
margin为外边距，即盒子与其他相邻元素之间的距离，如果这两个盒子均设置了不同大小的边距，大的一方将会覆盖小的一方，解决办法就是给其中一个盒子指定一个父级盒子，给父级盒子再套一个外边距。
margin:10px ，margin-left:13px。。。
宽高：即平面2D里的长宽，宽为横向，高为纵向，单位有px (像素),vw(百分比)/vh, em(字体大小),rem(移动端字体大小),是构成封闭2D图的基本要素，只设置一个则另一个由其子级元素撑开。
内边距：padding，有外边距自然会有内边距，内边距是指盒子内部要素距盒子边框之间的距离，例如：padding:10px 。
以上要素均可单独设置上下左右四个单独区域的属性样式。盒子的实际宽度= width + border-left + border-right + padding-left + padding-right + margin-left + margin-right，box-sizing属性设置盒子的类型，默认值是content-box，是内容盒子，表示width和height的空间全部给内容，通过display属性，可以设置标签的显示方式，inline表示行内元素，block表示块级元素，none表示不显示，盒子阴影：属性值分别是：X轴偏移量 Y轴偏移量 模糊半径 阴影颜色，第一个属性值设置为inset，表示内阴影：
box-shadow:10px 10px 5px blue，
box-shadow:inset 0px 0px 30px blue，
属性值border-box，是边框盒子，盒子的边框和内边距产生的空间从width和height里面扣除
浮动：
float属性设置浮动，属性值包括left(左浮动)，right(右浮动)，none(不浮动)，clear用于清除浮动。属性值包括：left(清除左浮动)，right(清除右浮动)，both(清除全部浮动)
解决父级边框塌陷:
第一种解决的方法是：给父级一个明确的高度;
第二种解决的方法是：在父级的最下面，添加一个不浮动的元素，并清除前面的浮动空间；
第三种解决的方法是：通过伪元素样式在父级的下面添加块级元素，再利用该块级元素清除前面的浮动：
::after表示在指定的父级的下面，添加元素
::before表示在指定的父级的上面，添加元素
即：
.parent::after{
/* content属性里面设置添加的元素里面的内容 */
content:'';
/* 下面是设置该元素的样式 */
display:block;
clear:both;
}
第四种解决的方法是：给父级添加一个overflow属性，属性值是非visible（overflow配合锚链接的使用，可以增长一个盒子的实际使用空间，使用方法：父级盒子用来单独显示要素，内部子级可以放置多种样式大小，再将父级设置overflow属性，非visible，再通过设置锚链接即可将子级元素通过点击显示出来，当然，修改DOM可以更快实现）
white-space 属性设置空白处理，属性值nowrap，表示设置文本不换行，属性值pre，表示保留空格，overflow 属性是溢出处理，属性值hidden表示溢出部分隐藏，text-overflow 属性设置文本溢出处理，属性值ellipsis表示文本溢出部分显示...
注意：上面的三个属性值缺一不可
定位：
position 是定位属性，属性值包括：static(不定位，默认值)，relative(相对定位)，是相对于自己重新定位，通过top，bottom，left，right属性控制定位的偏移量，absolute(绝对定位)。绝对定位是根据离它最近的父级定位元素进行定位（注意：绝对定位元素，会脱离标准文档流，所以，它下面的元素会去抢占它原来的位置），fixed(固定定位)。就是根据浏览器的视口进行定位（定位后的位置，不会随着浏览器滚动条的滚动而消失）
非定位元素的实际宽度 = width + border-left + border-right + padding-left + padding-right + margin-left + margin-right
定位元素的实际宽度 = width + border-left + border-right + padding-left + padding-right + margin-left + margin-right + left + right
opacity属性，设置透明度，注意：是设置整个元素的透明度
取值范围是：0-1，0是全透明，1是不透明
BFC：
即Box Formatting Context（决定如何渲染文档的容器），Formatting context 是 W3C CSS2.1 规范中的一个概念，BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，相关内容可访问：BFC
圆角：border-top-left-radius:20px;
border-top-right-radius:40px;
border-bottom-right-radius:60px;
border-bottom-left-radius:80px;
设置两个值的时候：一个属性值是横向宽度，第二个属性值是纵向宽度，这样的圆角就是椭圆圆角，
border-radius是缩写属性，可以同时设置：左上 右上 右下 左下，四个角的圆角：
border-radius:20px 40px 60px 80px;
四个角的圆角都设置为50%，就是正圆：border-radius:50%;
背景：
背景样式
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片的平铺方式，
属性值包括：no-repeat(不平铺) repeat(平铺) repeat-x(X轴平铺) repeat-y(Y轴平铺)
background-position 背景图片的位置，
可以通过：left right top bottom center 这些方位值设背景图片的具体位置，
也可以通过：具体的数字设置X轴和Y轴的位置，
还可以通过：百分比设置X轴和Y轴的位置，
无论是给具体的数字，还是给具体的百分比，如果只传一个值，X轴和Y轴的位置相同
background-size 属性设置背景图片的大小，
属性值contain，表示：等比拉伸，直到跟任意一边与容器边框重叠，
属性值cover，表示：等比拉伸，直到跟所有边与容器边框重叠，
可以设置固定的大小，一般不推荐，因为会使图片变形，
属性值也可以设置百分比
background 是背景的缩写属性，可以同时设置背景颜色，背景图片，平铺方式，位置，
各属性值，没有严格的顺序
如果要加背景图片的大小,方式是：颜色 图片 平铺方式 位置 / 背景图片大小：
background: red url(./img/zhl.jpg) no-repeat center/300px 300px
渐变：
linear-gradient()函数，用于设置背景的线性渐变，该函数的第一个参数值是渐变的方向，后面的参数值是渐变的颜色：background:linear-gradient(to left top,red,blue,green,purple)；
radial-gradient()函数，用于设置背景的径向渐变，该函数不需要传渐变方向，直接传渐变的颜色，从中间向外渐变：background:radial-gradient(red,blue,green)
文本：
color 是文本颜色，
text-align 是文本对齐方式，属性值包括：left(默认值)，center，right
text-indent 是首行缩进，首行通常需要缩进两个字符，所有属性值单位通常使用em或者rem
一个em大小就是当前元素字体的大小尺寸。一个rem的大小默认是网页字体的默认大小(16px)
line-height 是行高
text-decoration 是文本装饰，属性值包括：underline(下划线)，overLine(上划线),line-through(删除线),none(没有装饰)
可以通过text-decoration属性，去掉超链接的默认下划线
letter-spacing 是字符间距
word-spacing 是单词间距
list-style-type 设置列表样式，属性值none，表示无样式
其它属性值，包括：disc(实心圆) circle(空心圆) square(方块) decimal(数字)
所以，所谓有序列表和无需列表，只是默认的列表样式值不同
list-style-image 设置列表的样式为图标
list-style-position 设置列表样式的位置，属性值包括：inside 和 outside(默认值)，inside属性值，列表会往里缩进一个tab符
list-style 是缩写属性，既可以设置列表符号类型，也可以设置列表图标
字体样式：
font-size 设置字体的大小
单位：px是像素
font-family 设置字体的类型
font-family 可以设置中文字体类型，也可以设置英文字体类型，如果需要同时设置英文字体类型和中文字体类型，先设置英文，再设置中文
font-weight 设置字体的粗细，属性值bold表示加粗
font-style 设置字体的风格，属性值italic表示倾斜
font是字体的缩写属性，可以同时设置：风格 加粗 大小 类型
风格和加粗的顺序可以变化，也可以省略，最后两个属性值必须是大小和类型
特殊用法：20px是字体大小，40px是行高
预处理器：
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。附赠原文地址：预处理器
动画：
animation-name 指定动画的名称（指定一个动画的关键帧名称，就是动画的规则）
animation-duration 指定动画的时间（完成该动画需要多少时间）
animation-delay 动画的延迟播放时间
animation-timing-function 动画的动作函数，ease linear ease-in ease-out ease-in-out
animation-iteration-count 设置动画的播放次数 属性值可以给具体的次数，如果设置属性值为infinite，表示无限次数
animation-play-state 表示播放状态，默认值是running(播放) paused(暂停)
animation-direction 表示动画的方向，属性值包括：
normal(正向) reverse(反向) alternate(正反方向重复运动) alternate-reverse(反正方向重复运动)
animation-fill-mode 表示填充模式，其实就是动画结束后，元素的回到什么位置，属性值包括：
backwards(回到原点位置)，在开始动画之前，等待的时间在开始动画处等待，
forwards(停在结束位置)，在开始动画之前，等待的时间在原点位置处等待，
both(综合了上面两个属性的特点)，在开始动画处等待，在动画结束处停止，
animation是缩写属性，具体的属性值，没有顺序要求，如果同时设置动画时间和等待时间，第一个是动画时间，第二个是等待时间
定义动画的关键帧，关键帧就是动画的规则，在css中，一个动画最多可以拆分成100份：
过渡：
transition 过渡属性
过渡：css从一种状态变化到另一种状态的过程
transition-property 设置哪些属性，需要过渡效果，可以传多个过渡的属性，使用逗号隔开
例如： transition-property: background-color,width，属性值设置为all，表示过渡全部属性
transition-duration 设置过渡的时间，就是完成整个效果，需要花费的时间，单位可以是秒(s)或者毫秒(ms)
transition-delay 设置过渡之前的等待时间，单位同transition-duration
transition-timing-function 设置过渡的动作函数：
默认值是 ease 表示先快速再慢速
linear 表示匀速
ease-in 表示加速
ease-out 表示减速
ease-in-out 表示先加速再减速
transition是过渡的缩写属性，四个属性值的顺序没有要求，但是如果设置了两个时间，第一个是过渡时间，第二个过渡等待时间
相关HTML+CSS总结就到此，后半段将总结JS，一些库和工具篇，喜欢的话可以点个赞，谢谢。新的一年，步步高升！
