首先是大概复习方向
#### 1 整理HTML常见标签
#### 2 整理标签的特性：语义化、规范、分类...
#### 3 CSS2.1 常见样式
#### 4 CSS3 常见样式：动画、变形、flex、grid ...
#### 5 实践：PSD 切图、PC端网页、移动端网页、响应式网页...
HTML常见标签？
<html></html> 创建一个HTML文档
<head></head> 设置文档标题和其它在网页中不显示的信息
<title></title> 设置文档的标题
<h1></h1> 最大的标题
<pre></pre> 预先格式化文本
<u></u> 下划线
<b></b> 黑体字
<i></i> 斜体字
<em></em> 强调文本(通常是斜体加黑体)
<strong></strong> 加重文本(通常是斜体加黑体)
<font size="" color=""></font> 设置字体大小从1到7，颜色使用名字或RGB的十六进制值
<big></big> 字体加大
<SMALL></SMALL> 字体缩小
<STRIKE></STRIKE> 加删除线
<CODE></CODE> 程式码
<KBD></KBD> 键盘字
<SAMP></SAMP> 范例
<VAR></VAR> 变量
<BLOCKQUOTE></BLOCKQUOTE> 向右缩排
<DFN></DFN> 述语定义
<ADDRESS></ADDRESS> 地址标记
<sup></SUP> 上标字
<SUB></SUB> 下标字
<font color=00ff00>...</font>字體顏色
<font size=1>...</font>最小字體
<font style ='font-size:100 px'>...</font>無限增大
<p></p> 创建一个段落
<p align=""> 将段落按左、中、右对齐
<br> 换行 插入换行符
<dl></dl> 定义列表
<dt> 放在每个定义术语词前
<dd> 放在每个定义之前
<ol></ol> 创建一个标有数字的列表
<ul></ul> 创建一个标有圆点的列表
<li> 放在每个列表项之前,若在<ol></ol>之间则每个列表项加上一个数字,
若在<ul></ul>之间则每个列表项加上一个圆点
<div align=""></div> 用来排版大块HTML段落,也用于格式化表
<center></center> 水平居中
HTML5 的语义化标签？
<title>：页面主体内容。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress>：定义运行中的进度（进程）
标签分类
块级标签：
div、p、ul、li、ol、dd、dt、address、dir、table、
dl、fieldset、form、menu、noframe、h1-h6、hr、pre
行内标签：
a、b/strong、bdo、big、small、br、cite、em、font、i、img、input、
kbd、label、select、span、sub、sup、textarea
行内块标签：
img、input
HTML语义化？
好处：
1. 在没有CSS的情况下，页面也能呈现出很好的内容结构。
2. 有利于SEO，让搜索引擎爬虫更好的理解网页。
3. 方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4. 便于团队开发与维护。
CSS常见样式
常见的css样式
color 文字颜色
background-color 背景颜色
opacity 设置透明度
颜色： 光的三原色： 红 绿 蓝
三种颜色表示法：
名词表示法： red green blue
16进制颜色表示法： #000000 十六进制 0 --- f
# ff（红色） 00（绿色） 00（蓝色）
十进制颜色表示法：
rgb(255红,255绿,255蓝) 取值范围 0 --- 255
rgba(255红,255绿,255蓝,0.5透明度) 取值范围 0 --- 255
a 表示透明度 取值范围 0-1之间 0代表完全透明 1代表不透明
opacity 与 rgba() 设置透明度的区别：
opacity：表示所有内容都更改透明度
rgba()：表示只有背景颜色透明
尺寸：
width：宽 常见的计量单位： px(像素) %(百分比) em(字体单位)
height：高
min-width 最小宽度
max-width 最大宽度
字体：
font-size: 设置字体大小 浏览器默认的普通文字大小为16px 最低设置文字大小为8px 一般默认最低为12px 最大不限
font-style: 设置字体样式 normal表示普通体文字 italic表示斜体文字
font-weight: 设置字体粗细 normal表示普通体文字 bold表示粗体
font-family: "楷体"; 设置字体名称 设置的字体必须是电脑上已经安装过的字体
文本、段落
text-align: 设置文本的水平对齐方式 默认 left 左对齐 可以设置成 center 居中对齐 right 右对齐
text-indent:设置文本的首行缩进 一般中文段落都会设置成2em 代表首行缩进两个字符
line-height:设置行高，如果行高比文字的高度要多，那么剩余空间会在文字上下两端平均分配
如果设置单行文本在该标签内垂直居中，则直接可以设置行高等于标签的高度
text-decoration 设置文本修饰
none 表示没有任何修饰 通常用于去掉超链接的下划线
underline 设置文本下划线
line-through 设置贯穿线 也叫删除线
overline 设置文本上划线
vertical-align 设置元素的垂直对齐方式
top 表示设置顶线对齐
baseline 表示设置基线对齐
middle 表示设置中线对齐
bottom 表示设置底线对齐
背景：
background-color 背景颜色
background-image 背景图片
url("") 来引入一张背景图 默认背景图是以平铺的方式显示
background-repeat 设置背景图片的平铺方式
repeat 平铺
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
round 环绕
background-size 设置背景图片的尺寸
background-position 设置背景定位
left top right bottom center
设置以下两个样式 可以将一张背景图完全覆盖整个标签
background-repeat: round;环绕
background-size: cover;覆盖
CSS选择器
ID
id=“”
CLASS
class=".xxxx
标签(元素)
p{} <p></p>
通配
*{} ( *就是所有标签的意思 )
群组
p,h1,div,{}
层次
后代 : M N
找M下的所有N
父子 : M > N
找M下的子标签N
兄弟 : M ~ N
相邻 : M + N
特点： ~ 是找M标签下面的所有N标签
+ 是找M标签下相邻的N标签
无论用~ + 都是找下面的兄弟，上面的兄弟是不会有任何作用的。
属性
M[] : [ class="elem" ] * ^ $
组合的：M[][][]{}
伪类
CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
主要这四个伪类是针对a标签的
:link 访问前的选择器 ( 只能加给a标签 )
:visited 访问过后的选择器 ( 只能加给a标签 )
:hover 鼠标移入的选择器 ( 所有标签都能添加 )
:active 鼠标按下的选择器 ( 所有标签都能添加 )
注：
a标签如果四个伪类都添加的话，那么是有顺序的 L V H A
一般的网站都只会设置a{ color:red;} a:hover{ color:blue;}
其他伪类选择器：
:before :after ( 特点，不用单独在创建一个标签，就可以给文本添加样式 )
input:checked{ width:100px; height:100px;}
input:disabled{ width:100px; height:100px;}
当标签能够获取焦点的时候，会触发 :focus
input:focus{ background:Red;}
结构性伪类选择器：
:nth-of-type()、 :nth-child()
:first-of-type、 :first-child
:last-of-type、 :last-child
:only-of-type、 :only-child
()中可以添加的值：number(第几个，从1开始) | n(表示一个0到无穷大的数)
CSS优先级？、
相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
单一样式优先级
style行间 > id > class > tag > * > 继承
权重 1000 0100 0010 0001 ...
!important 权重 -> 10000 ( 建议不要乱用 , 非规范写法 )
场景：紧急情况下才去用。
标签 + 类 和 单类？
标签 + 类 > 单类
群组和单一样式？
群组选择器与单一选择器的优先级相同，靠后写的优先级高。
层次选择器？
权重： 把对应的数值加起来
约分：把相同的相同的选择器约掉
建议：层次选择器最好不要超过三层
BFC规范
形成一个独立的容器，不影响外面的元素。
块级格式化上下文。
触发BFC的条件？
1. overflow:hidden
2. float:left
3. position:absolute; fixed;
4. display : inline-block; flex;
解决什么问题？
高度塌陷
margin传递、叠加
float中不出现叠加
当然还有很多没写到，知识太多，慢慢学习。
最后来个冷笑话：
一女同学在食堂吃饭时，一程序猿凑到旁边，“同学，我能和你说话不，我已经一个月没和女生说话了
来源：CSDN
作者：铁憨憨2号
链接：https://blog.csdn.net/weixin_45808386/article/details/104733689