HTML(负责页面结构)
P标签：段落标签。
Img:图片标签。Src属性：所要引入的图片
A：超链接，实现页面的跳转。Href属性：所要跳转的目标文件。Target=”_blank”.在新页面中打开 title:鼠标移入显示的文字
H1-h6标题标签
Video:视频标签.controls
Audio:音频标签.controls播放控制条 autoplay自动播放
Br:换行
Nobr:不换行
Pre:预设
B
U
I
Hr:水平线
Font文字控制标签
Sub:下标签
Sup:上标签
Span:小块、小区域
Div：大区域、大面积
Header头部
Nav导航
Article文章
Section区域标题
Aside侧边栏
Footer尾部
Dl>dt+dd一般用于图文混排（我的乐视）
Ul>li。无序列表（我的淘宝）ul的儿子只能是li
Ol>li。有序列表（轮播图+千寻浏览器）
Table>tr>td。表格
表单元素
maxlength:限制长度。Required提交的时候必须填写。Disabled禁止操作。Autofocus自动聚焦。Placeholder:默认显示文本。Selected默认选中。Checked(多选框或者单选框)。
input：类型：
text、password、number、radio、checkbox、button、submit、reset、range、color、date、week、month。
Textarea文本域，不能伸缩，添加样式resize:none;
Select>option下拉条
Form:表单提交
单标签img input
双标签p ul li ol dl dt dd a
标准文档流：说白了，就是一个“默认”状态。标准文档流中，标签分为两种：块级元素、行内元素。（块级元素垂直排列，行内元素水平排列）
块级元素：一定是霸占一行的，能设置宽、高，不设置宽度默认就是占满父亲。div、p、h、li、ul
行内元素：和其他行内元素并排，不能设置宽、高，默认宽度就是文字宽度。span、a、b、i、u
容器级(块级)的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。
p标签是一个文本级标签，就要死死记住：p里面只能放文字、图片、表单元素。其他的一律不能放。
再次强调，p是一个文本级的标签，p里面只能放文字、图片、表单元素 超链接
CSS（负责页面样式）
Css的书写位置行内式。
嵌入样式<style></style>里面
内联样式（行内式）写在style里面
外联样式通过<link rel="stylesheet" href="">引入
盒子模型：
width:宽
height:高
padding:内边距
值得情况可以参考margin;
margin:外边距
margin:10px;四个方向都是10px;
margin:10px 20px;上下10px 左右20px
margin:10px 20px 30px; 上10px 左右20px 下30px
margin:10px 20px 30px 40px 四个值上右下左；
也可以单独书写某一个方向的值：
margin-top: ;
margin-left: ;
margin-right: ;
margin-bottom: ;
特殊情况盒子水平居中margin：100px auto;盒子一定要有宽度。
border：边框
border，边框，三个值 线粗细 线样式 线颜色
3要素，4条边。
3要素：border-width、border-style(solid dashed dotted)、border-color；
4条边：border-top、border-right、border-bottom、border-left。
Opacity:文字和背景都变。
Background:背景
background: rgba(0, 0, 0, 1.0)背景变透明
包含四个值
1 background-color背景颜色
2 background-image背景图片
3 background-repeat是否平铺
4 background-position图片位置
5 background-size背景图片大小
line-height:行高。单行文字在盒子垂直居中
Text-align:center文字水平居中
Font-size:字体大小；
Font-weight:bold加粗
Font-weight:normal正常
Font-style:italic;文字倾斜
Font-style:normal正常
Text-decoration:none不加下划线；
Text-decoration：underline下划线
Font-family:设置字体；
Color：文字颜色
Display:none;隐藏
Display:block;转化成块级元素也可以是显示的意思
Display:inline;转化成行内元素
Display:inline-block转化成行内块
Cursor:pointer;小手；
Overflow：hidden；
1、溢出隐藏（百度图片展示）
2、清除浮动影响（子级元素浮动之后，父级检测不到子级元素的高度，加此属性可以解决浮动影响）
3、解决外边距塌陷（子级元素接了上外边距之后父级跟着下来）
4、滚动条
Overflow-X:auto（hidden）出现滚动条或者溢出隐藏
Overflow-Y:auto（hidden）
盒子投影
Box-shadow:水平方向光照 垂直方向的光照 羽化程度 颜色；
文本投影
Text-shadow: 水平方向光照 垂直方向的光照 羽化程度 颜色
三大动画模块
转化模块：
关键属性：Transform:
属性值：
Translate(0px,0px)
rotate(30deg)旋转
scale()缩放
值与值之间用空格隔开
也可以书写XYZ一个方向（具体参考音乐盒的制作）
Transform-origin:center center;旋转中心点。
过渡模块
关键属性：
Transition：all 时间;
过渡模块书写步骤：（不是只有一种写法，可以通过增加删除类来控制，具体参考千寻案例）
1、 书写默认样式
2、 触发之后的样式：hover
3、 回到默认样式书写transition：all 时间（all也可以单独改成某一个属性:比如：width）
动画模块：
关键属性：animation：name 时间 linear（平缓） infinite（循环）
使用步骤：
- 定义动画：@keyframes name {
a) 每一帧的状态
b) 每一帧都是一个样式条
}
- 使用动画：animation：name 时间 linear（平缓） infinite（循环）
3D效果transform-style:preserve-3d可以让其内部的元素以该元素作为参照物进入三维坐标
Border-radius:5px;
出现圆角（可以四个不同的值：左上 右上 右下 左下）
Border-radius:50%;变成圆形
所有css3的属性前面都要加私有前缀：-moz-,-ms-,-o-,-webkit
也就是都要写五遍
Float:left;左浮动：脱离标准流
Float:right;右浮动：脱离标准流
浮动之后的元素可以给宽高
浮动之后同级元素也要浮动
相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。
相对定位不脱标，真实位置是在老家，只不过影子出去了，可以到处飘。
相对定位有坑，所以一般不用于做“压盖”效果。页面中，效果极小。就两个作用：
1） 微调元素
2） 做绝对定位的参考，子绝父相
一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。
要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：
不一定是相对定位，任何定位，都可以作为参考点
定位之后（固定或绝对）盒子居中
当做公式记忆下来。就是
left:50%; margin-left:负的宽度的一半。
top:50%; margin-top:负的高度的一半。
固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。
固定定位脱标！
z-index值表示谁压着谁。数值大的压盖住数值小的。
● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
● z-index值没有单位，就是一个正整数。默认的z-index值是0。
● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
选择器：
标签(直接书写标签名字)
P{
}
Id（命名：id=””，选择的时候通过#ID名字，id具有唯一性，类似我们的身份证号码）
#ID名字{
}
类名（命名：class=””，选择的时候通过.类名字，类名可以重复，类似我们的名字）
.类名{
}
Div p 空格 后代
Div>p子代
H3.special 交集选择器
H3,h1并集选择器
*通配符,选择所有标签
继承性。有一些属性给祖先元素，所有的后代元素都集成上了。
哪些属性能继承：color、font-、text-、line-
层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制：
■ 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
■ 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
!important标记
!important提升的是一个属性，而不是一个选择器