H5笔记

1.h5新增语义标签

header：头部标签
nav：导航标签
article：内容标签
section：块级标签
aside：侧边栏标签
footer：尾部标签
·注意：主要是针对搜索引擎的
   ie中需要转化成块级元素（这些行级元素）

2.h5新增多媒体标签

audio 音频标签 ogg,mp3,wav
    autoplay 自动播放  *谷歌把autoplay禁用
    controls 界面控件
    loop 循环播放
    src
video 视频标签
    controls 界面控件
    loop 循环播放
    autoplay 自动播放  *谷歌把设置静音
    muted 设置静音
    poster 加载等待的画面图片

3.input表单、表单属性

type="email" 邮箱
date 日期
url 网址
week 周
tel 电话
number 限制输入是数字
color 颜色
search 搜索
file 文件

属性：required = "required"  内容不能为空
      placeholder 提示文本
      autofocus = "autofocus" 自动获得焦点
      autocomplete = "off" 默认是on 显示之前输入的字段
      multiple = "multiple"  文件多选

4.css3属性选择器

cursor:pointer //按钮小手
disabled = "disabled" //禁用按钮
//[]属性选择器
button[disabled]{
    cursor:default;
}

属性选择器的权重10
[class^="icon"]  以icon开头的元素
[class$="icon"]  以icon结尾的元素
[class*="icon"]  含有icon，不论位置在哪

5.css3结构伪类选择器(以ul li为例)

//ul下第一个li  
ul li:first-child{
    background-color:red
}

last-child 最后一个li
nth-child(n)  第n个li 不管里面的孩子是否同一类型
nth-child(even)  odd奇数  even偶数
（）里面可以为公式  n从0开始计算，例如：
    nth-child(3n)  第3，6，9... li
    n+5  从5个li开始
    -n+5 前5个(包括第5个)
    第0个元素或者超出元素个数会被忽略

of-type 选择指定类型的元素
    first-of-type
    last-of-type
    nth-of-type(n)
    例子：
        div span:nth-of-type(2)  
    注意：
        ul里只允许放li  所有nth-child 和of-type 一样

6.css3伪元素选择器

::before  在元素内部的前面插入内容
::after  在元素内部的后面插入内容
注意：
    before和after会创建一个元素，行内元素(display:block块级元素)
    不是一个真正意义的元素，有元素的属性,在dom看不见
    伪元素和标签选择器的权重都是1
    before和after必须有content属性
div::befor{
    content:"itancc"
}

7.css3 2D转换

translate 移动 不会影响其他盒子  对行内标签没有效果   
    div {
        transform:translate(x,y) 
        transform:translateX(x)
        transform:translateY(y)

        //里面参数是%移动的距离是 盒子自身的宽度或者高度来对比
        transform:translateY(50%)  
    }

rotate 旋转
    div {
        //单数：deg 正:顺时针 负:逆时针
        transform:rotate(度数)

        transform-origin:x y  旋转中心点 默认是50% 50%
        transform-origin:right button 以右下角旋转
    }

scale 缩放 不会影响其他盒子,也可以设置缩放中心点
    div {
        //x,y 数字不跟单位 倍数的意思 2倍 0.5倍
        transform:scale(x,y) 
    }

2D转换综合写法
    transform:translate() rotate() scale()
    注意:
        其顺序会影响转换效果(先旋转会改变坐标轴方向)
       *同时有位移和其他属性时，要把位移放到最前面 

8.css3动画

1) 先定义动画
    /*里面%要是整数*/
    @keyframes 动画名称{
        0%{
            /*开始状态*/
        }
        50%{

        }
        100%{
            /*结束状态*/
        }
    }
2) 使用动画
    div {
        animation-name:动画名称
        animation-duration:1s 持续时间

        animation-timing-function:ease 运动曲线 linear匀速
        animation-delay:1s 何时开始
        animation-iteration-count:infinite 无限次 //重复次数
        animation-direction:normal(默认) 是否逆向 alternate 逆向
        animation-fill-mode:backwards(默认回到起始) forwards结束状态
        animation-play-state:paused 停止动画  running默认启动
    }

    动画简写属性：
        animation:动画名称 持续时间 运行曲线 何时开始 执行次数 是否逆向 结束状态
    
    /* 透明度 */
    opacity: 1;  

速度曲线步长:
    steps(5)  步长
     /* 我们元素可以添加多个动画， 用逗号分隔 */

9.css3 3D转换

3D位移:translate3d(x,y,z)  不移动赋值0
    translateZ 单位一般是px
    正值 往外移动 负值 往里移动
    z轴越大物体就越大

 透视:perspective
    透视写到被观察元素的父盒子上
    perspective:200px  近大远小

3D旋转:rotate3d(x,y,z)
    rotateX 正值向里旋转 左手准则(大拇指指向正)
    rotateY 同上
    rotateZ
    rotate3d(x,y,z,deg)  矢量旋转
   
3D呈现:transfrom-style
    transform-style:preserve-3d 开启立体空间
    代码写给父级，影响子盒子

10.浏览器私有前缀

私有前缀
    -moz- 火狐
    -ms- ie
    -webkit chrome,safari
    -o- Opera