基础笔记

header: 定义文档的页眉

nav:定义导航链接部分

footer:定义文档或节的页脚底部

article： 定义文章

section：定义文档的节

aside：定义所处内容之外的内容、侧边

新增属性

<datalist>

　　<option></option>

</datalist>

fieldset 表单相关元素分组，打包  legend搭配使用

新增input type属性

placeholder="请输入"

autofaocus

multiiple多个文件

required必填

acceskey激活快捷键

视频

audio多媒体ogg mp3 wav

<source src=""/>

  autoplay自动播放

controls 控制控件

loop 循环播放

video 视频 Ogg mpeg.4 webm

css3新增选择器

结构（位置）伪类选择器（css3）

  :first-child 首个子元素

:last-child 最后一个子元素

:nth-child 第N个子元素 （even）(odd) 奇数 (n)

全部：ntn-last-child 

属性选择器

div[class="demo"] ^= $= *=

伪元素选择器

E::first-letter

E:: first-line

E:: selection选中可设置样式

after和before

E::before {

　　content:"";必带

}

  在·盒子·内容内部前面插入内容，其实before是盒子,行内盒子，可转换

E：after 之后

css3盒子模型

box-sizing: border-box padding等之类外加模式变成内减

但会压下去图片（图片内放）

文字图片对齐

     dispaly:inline-block;

    vertical:center

    margin-top: 10px;

 比特虫---在线制作ico图片 引入

过渡（css3）

  transition: 要过渡的属性（property）  花费时间(dur)  运动曲线 何时开始

       　　　　 0 ease 0  (默认值)

  过渡动画：

   动画：

2D变形（css3）transform 位移、旋转、倾斜、缩放、支持矩阵动画支持取代大量靠flash才实现的效果

translate(x,y)  移动 平移 rotate(deg)

transfrom:translate(50%,50%);走自己盒子一半

scale（x,y）0 0% 1 100%

rotate(45deg)

　　正为逆

transition-origin: right bottom(跳转原点)

skew(倾斜)

transform: skew(deg,deg)

鼠标经过显示阴影

box-shawdow: 4个边

3D变形

　　transfrom: rotateX(180deg) 沿x轴转180

透视（perspective:500px）越小越明显 加在父

backface-visibility 元素(图片)不面向屏幕是否可见 hidden

动画 animation动画名称 动画时间  动画曲线 动画开始 播放次数（inifinite） 是否反方向(alternate)

@keyframes move {

　　from {}

　　to {}

} 声明动画

动画旋转

flex伸缩布局

父 display: flex;

子  flex：1 占一份

min-width: 最小宽度

flex-direction: colum垂直（默认水平） row-reverse(水平翻转)

文字阴影

text-shadow

背景缩放

background-size: length|precentage|cover|vontent

-webkit(google)  -ms(ie) -o-(opera)  -moz(fi)

背景渐变

-webkit- linear-gradient(top,red,blue)位置 起始颜色 结束颜色

多背景

盒子半透明 opacity: 0.2

filter: alpha(apacity=20);  ie6写法

优雅降级（graceful degradation）（向下兼容）和渐进增强（progressive enhancement）向上兼容

BFC(块级格式化上下文)