最近在温习学过的基础
从html基础及标签
一、HTML语言化
1.对人：增加代码的可读性，让代码更加容易维护
2.对机器对引擎更加友好有利于seo
二、块级元素：
1.div、p、h1~h6、ul、ol
2.独占一行，可以设置宽高
3.display：block可以设置为块级元素
三、行内元素
1、span、a、input、button
2.行内元素一般出现在一行，不会另起行，不能声明宽高
3.display：inline设置行内元素
四、行内块元素
1.不会自动换行，但是可以声明宽高
2.display：inline——block设置成行内块
五、单元格合并
1、colspan=“所要合并的单元格的列数”左合并
2.、rowspan=“所要合并的行数”上下合并
六、表单
1.type=text 文本框
2.type=password 密码框
3.type=submit 提交框
4.type=button 单纯的提交框
5.type=reset 清空效果
placeholder 输入预期的简短提醒信息，但是要兼容到ie8以上
七、盒模型
盒模型：margin+padding+border+content
标准盒模型和IE盒模型的区别就是计算高度不同：
1.标准盒模型：盒子总高度/宽度=width/height+padding+border+margin 注意width/height只是内容宽度 不包含padding和border
2.ie盒模型：盒子总高度/宽度=width/height+margin
注意width/height包含内容宽度和border、padding
八、margin之间的距离
当两个元素都设置margin时候，纵向会发生重叠问题，而最终显示的margin只会取最大那个值
九、margin负值问题
1.margin-right为负值时，自身不会移动，右侧元素会向左移动相应局距离
2.margin-left为负值时,元素自身向左移动相应距离
3.margin-bottom为负值时，自身不会移动，底部侧元素会向上移动相应局距离
4.margin-top为负值时,元素自身向上移动相应距离
十、BFC（格式化上下文）
了解BFC之前，我们知道常见的元素定位方法：
1.普通流：html元素按照从上到下而布局
2.浮动float：先按照普通流布局之后根据浮动的方向，尽可能地向左或者向右偏移
3.绝对定位方式 absolute position ：
元素会与普通流脱离，位置是有绝对定位坐标确定
BFC块级格式化上下文，他是属于普通流
BFC特性：形成一个独立容器，容器里面的布局不会影响外面的元素
形成BFC的条件
overflow不是visible
display是flex或者inline-block等
position是absolute或fixed
float不是none
BFC特性应用：
1.同一个BFC下外边距会发生折叠
设置两个div时候，同时给上margin 这时候两个div之间的margin数值不是相加，而是会发生重叠
解决：设置两个容器，各自放一个div
2.BFC可以包含浮动的元素（清除浮动）
浮动会脱离文本流，当我们给这个浮动元素触发BFC特性就可以清除浮动
3.BFC可以阻止元素被浮动元素覆盖
其实第二部分有些地方会被浮动元素所覆盖（文本信息不会被覆盖）这时候触发BFC（设置overflow：hidden），就可以避免元素被覆盖
十一、清除浮动
主要是因为两个方面的问题
1.垂直方向上margin塌陷问题
2.子元素float脱离文档流后，父元素高度塌陷问题
1.给父盒子加上overflow：hidden （触发BFC）清除父元素中子元素浮动对页面的影响（不建议，因为超出的内容会被隐藏）
2.使用额外标签；给浮动的盒子下面加一个空标签 ，添加样式clear：both
内部标签：重新把父盒子的高度撑开
外部标签：清除浮动盒子的影响，不会撑开父盒子
（不建议使用，增加空的标签，使页面混乱）
3.使用伪元素清除
.clearfix:after{
centent:"";
height:0；
line-height:0;
display:block;
visibility:hidden；//将元素隐藏
clkear:both;} //清除浮动
.clearfix{
zoom:1} //兼容ie
十二、CSS提升页面性能的方法
1.属性设置简写比如设置一个元素的上下左右margin,可以直接简写margin: 10px 12px 23px 34px；这样写的目的是减少最后打包代码的包的体积
2.去除0后面的单位有很多人写样式愿意写margin: 0px 10px;其实可以把0后面的单位去掉：margin: 0 10px;这样做的目的也是减少最后打包代码的包的体积
3.用css代替图片比如，可以用css画三角形代替一些箭头图片这样做的目的是减少http请求用
4.css雪碧图代替单个图片这样做的目的是减少http请求节约带宽
十三、音频
controls 显示音频插件
autoplay 自动播放
loop 循环播放
```
<audio src="" controls="constrol" autoplay= "autoplay" loop></audio>
```
十四、视频
```
<video src ="">
```
