程序员必须懂得前端基础知识
HTML
* 超文本标记语言
* 是有一个个标签组成，如果我们要创建一个HTML文档，第一行必须先声明我们要创建的是一个h5页面
* <!doctype html>
* html页面值雨荨有一个外层标签，html;所有的标签都要包裹在HTML标签以内 ；<html>..</html>
* html标签不分（标签名）大小写；
* xml要严格区分大小写；
* 下边有两个字标签，一个<head>页面的各种信息 <body>页面要显示的内容
* <head>中页面的标题<title></title>
* <meta>页面的配置，不包国任何内容，单标签
* <meta charset="utf-8"/>Google可以不写
* <meta name='keywords' content='关键词'/>用于搜索引擎优化
* <meta name="description" content="页面标书">跟搜索引擎有关
* <style> css样式表
<body>
* div 没有特殊样式，表示一个快； span 无特殊样式，一个文字区域,块元素和行元素
* h1-h6标题标签，默认加错
* 原则上一个页面只有一个H1;
* ol>li 有序列表； type 1 数字; a小写字母； A 大写字母； I 大写罗马数字； i小写罗马数字排序
* ul>li； 无序列表
* 自定义列表；dl dt dd
* <dl> <dt></dt> <dd></dd> <dd></dd> </dl>
* a标签，作用：锚点和超链接
* target="";跳转目标：——self当前页面跳转 _blank当前页面不动，打开新的标签; iframe的name值：在iframe中跳转；
* 语义化标签：header:头部； nav:页面中的导航栏；section:区块，语义化的div； main:页面主要区域；artical:主要内容； aside:侧边栏；footer:页面底部； 效果上跟div一样
* p标签，文字段落；
css样式
* 第一个地方可以写在style属性，任何一个标签都有style属性
* 写在head标签中的style标签内
* 写在一个外部的css文件中，页面中可以用link标签引入；
* 复用性高写在css文件，复用性不高写在head中的style标签中；一般不用style属性
#### 选择器
* 1、id选择器，以#开头，允许两个id一样
* 2、class选择器，以.开头，匹配class相同的标签
* 一个标签可以有多个class值，用空格分隔；
* 3、元素选择器，直接用标签名来命名，匹配标签名相同的标签
* 4、*通配符，匹配所有的标签
#### 选择器的优先级
* 范围越小优先级越高
* 内联样式(标签的style属性)优先级最高>id选择器>class>元素>*
#### 常用样式
* 常用单位：
* 大小：px固定大小，表示像素
* 百分比 % 参照父元素的大小
* vh百分比，参照屏幕的高度，vw参照屏幕的宽度
* em 参照的是父元素的font-size,1em=父元素的font-size;
* rem参照的是HTML的font-size
* 角度
* deg**********
* 常用样式
* 宽度
* 高度
* background 背景色，背景图，平铺，背景定位等等
* background-positon: 背景定位********* background-position: left top;
* margin外边距
* padding内边距
* border边框线，大小 样式 颜色
* 样式：solid 实线 dashed虚线（线段） dotted虚线（点） inset(凹陷感觉) outset(凸起感觉)
* border-left...
* 内边距和边框线会会改变元素的实际宽度和高度****
* 实际高度= height+上边内边距+上线边框线
* box-sizing: border-box;内边距和边框线都在宽度和高度以内绘制
* display: block,inline,inline-block，none（隐藏模型）,flex将元素转换成弹性模型；**********
* flex-direction: row-reverse/column-reverse
* 子元素flex-grow；1 2 。。弹性比例扩展
* display:none ; 隐藏元素并且脱离文档流；*****
* 就是不占用任何位置
* 不脱离文档流：visibility:hidden;******
浮动
* float: 浮动 脱离文档流、left:左浮动，right: 有浮动
一旦设置了浮动，该元素自动变成inline-block;*****
* clear 清除浮动，在浮动的统计元素中设置，
* left 清除左浮动， right: 清除有浮动 both: 清除左右浮动
* 清除浮动后，浮动的元素回到了文档流，但是仍然保持并排；
#### transform 元素转换
* 3d转换，transform-style: preserve-3d;
* 父元素设置镜头的 距离： perspective: 800-1200px
* rotateX 沿着x轴旋转； rotateY: 沿着y轴。 rotateZ:。。
* translateX: 沿着x轴平移。。。
* rotate 沿着z轴旋转(2d)
#### 定位 position
* reletive 相对定位 特点：不脱离标准流，参照无定位的位置
* static 静态****
* absolute 绝对定位：脱离标准流，参照上一个非static定位的父元素
* fixed 固定定位： 参照屏幕的位置，随着滚动条滚动
* 覆盖规则：
* 1、非static覆盖static定位
* 2、后写的定位覆盖先写的
* 3、有z-index覆盖 wu z-index
* z-index大的覆盖 z-index小的
### 动画样式
* css3中的动画是一个相对位置的移动，所以一定要定位： relative或者absolute;*********
* 1、定义动画
* @keyframes 动画名{ 过度效果}
@-webkit-keyframes wy{
0% {left：0}
100% {left: 600px}
}
@-o-keyframes wy {
}
* 2、执行动画
* 用的是animation；
* -webkit-animation: wy 1s
* 在选择器中animation:
* 动画名 过度时间 速度曲线（ease默认) 延迟时间（默认是0) 播放次数（默认是1） 偶数次是否逆序 停留位置
* 速度曲线：ease 低速-快-特别慢
* ease-in 特别慢- 快
* ease-out 特别快- 越来越慢
* ease-in-out 特别慢- 快- 减速
* linear: 匀速
* 播放次数
-webkit-animation: wy 3s linear 1s 4
* infinite无限次
* 偶数次，是否逆序
* normal不逆序 alternate逆序
* 停留位置： forwards 停留在动画执行的最后一帧上
待续...晚上发布
