2020/2/1 html5和css3

html5

1.html5新特性？（掌握）
    1）语义化标签
    2）双工通信websocket协议
    3）本地存储
    4）多媒体(音频视频)标签
    5）绘图canvas
    6）多线程webworks
    7）响应式设计
    8）flex布局 弹性布局

2.自定义属性
    h4 原生的属性和自定义不好区分
    获取自定义属性的方法是getAttribute("属性名")
    设置自定义属性的方法是setAttribute("属性名","属性值")

    h5 所有自定义属性都是以data-开头，很好区分
    获取自定义属性 el.dataset.属性名
    设置自定义属性 el.dataset.属性名 = 属性值

3.本地存储(重点)
    1）cookie（了解）
        容量4kb ，有安全隐患 ，session技术基于cookie实现

    2）sessionStorage(重点)
        容量 5M
        生命周期：存在于一个页签中，当浏览器关闭的时候就会被销毁,存取的类型都是字符串

        获取方法：sessionStorage.getItem("属性名")
        设置方法：sessionStorage.setItem("属性名","属性值")
        删除方法: sessionStorage.removeItem("属性名")
        清空方法: sessionStorage.clear()

    3）localStorage(重点)
        容量 5M
        生命周期：永久存在，除非主动删除

        获取方法：localStorage.getItem("属性名")
        设置方法：localStorage.setItem("属性名","属性值")
        删除方法: localStorage.removeItem("属性名")
        清空方法: localStorage.clear()

4.web字体
    常见的字体格式.ttf .eot .woff .svg .otf
    优点：
        减少http请求
        永久高清
        使用灵活（大小颜色方便修改）

5.谷歌截取网页产屏快捷键
先F12
ctrl+shift+p
输入full

6.

css3

1.css3兼容性（重点）
    加私有前缀
    -webkit-border-radius:10px;
    -ms-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;

2.选择器(部分少用的)
层次选择器
        E+F    相邻选择符(Adjacent sibling combinator)    CSS2    选择紧贴在E元素之后F元素。
        E~F    兄弟选择符(General sibling combinator)    CSS3    选择E元素之后所有兄弟元素F。
目标伪类选择器
        E:target 定位到锚点时的样式
属性选择器
        E[att]    CSS2    选择具有att属性的E元素。
        E[att="val"]    CSS2    选择具有att属性且属性值等于val的E元素。
        E[att~="val"]    CSS2    选择具有att属性且属性值为一个用空格分隔的字词列表，其中一个等于val的E元素。
        E[att^="val"]    CSS3    选择具有att属性且属性值为以val开头的字符串的E元素。
        E[att$="val"]    CSS3    选择具有att属性且属性值为以val结尾的字符串的E元素。
        E[att*="val"]    CSS3    选择具有att属性且属性值为包含val的字符串的E元素。
        E[att|="val"]    CSS2    选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

4.过渡
     transition: all（所有属性都参与过渡） 执行时间  过度函数  延迟 

5.动画
    1）定义动画
    @keyframes 动画名 {
        from{}
        to{}
    }
    @keyframes 动画名{
        0%{}
        20%{}
        40%{}
        60%{}
        80%{}
        100%{}
    }

    2）执行动画
    animation: 动画名 执行时间
        animation-name：动画名
        animation-duration：执行时间
        animation-timing-function：贝塞尔曲线
        animation-delay：延迟时间
        animation-iteration-count：执行次数
            n  |  infinite
            次数   无限循环
        animation-direction：动画播放方向
            normal | reverse | alternate | alternate-reverse
            正常      反向      奇正偶反     奇反偶正
        animation-fill-mode：元素应用的关键帧样式
            none    |  forwards          |             backwards                  | both
            默认不应用   动画结束应用最后一个关键帧样式    延迟期间应用第一个关键帧样式    forwards && backwards
        animation-play-state：运行或者暂停
            running | paused
            运行       暂停

     3）动画事件
        animationstart 动画开始事件
        animationiteration 动画循环事件
        animationend   动画结束事件
     另外：
animationstart 和 animationteration 和 animationend貌似通常都用的js原生代码写的
貌似jq并没有封装这个事件
例子：
        var box = document.querySelector(".box");
        box.addEventListener("animationstart",function(){
            console.log("start")
        })

7.transform（rotate之类）
rotate3d(x,y,z,angle)为标准语法，其中（x,y,z）为坐标，angle旋转角度。整个函数含义是：
以坐标原点（根据transform-origin设定，默认为（0，0，0））为起始点，以（x,y,z）为终点的向量为轴，根据左手定则，选择angle角度。
none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。

小结：
在做关于transform的动画时
如果同时设置了tranlate和rotate两个属性
那么最好把rotate放于后面
因为虽然这两个动作是同一语句
但是后一个变化是以前一个变化结束后的状态作为参考系
即参照点发生改变
会出现一些意料之外的畸形动画

8.transform中的Matrix(矩阵)
写法：
transform: matrix(a,b,c,d,e,f);

详细理解看张前辈的这篇文章：http://www.zhangxinxu.com/wordpress/?p=2427