H5C3

一、 html5

新增的语义标签：

header标签：nav标签；article标签；section标签（块元素上；aside（侧边栏）标签；footer标签, 以上的几个是常用的标签，当然了还有很偶新增的标签，遇到你就去查就行

多媒体标签

在html5中新增的多媒体标签是相对比较复杂的，（主要这里有兼容性问题，你需要特殊处理，

audio,我们一般放两种格式 ogg 和mp3以便于解决兼容性问题。其属下和值你需要有所了解，请在，前面的内容翻阅（注意：我们一般都用js来写）

以下是代码实例
<audio controls= "controls">
  <source src="xxx.mp3" type="audio/mpeg">
  <source src="xxx.ogg" type="audio/ogg">
</audio>

video这个和上面的audio标签差不多，这里给出代码实例

<body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

新增的表单标签input，新增的表单在移动端效果比较明显

注意一下上面的每个标签的属性不详细写，请你去查看文档。以上的就是我们html5最常用的，最常见几个新增标签了

二、 CSS3

属性选择器--作用：简化css类名属性样式。注意c3的这几个选择器对的权重都是10，
结构伪类选择器，你需要注意里面的nth-chlid()和nth-child-type()的区别,

nth-child()是自定父元素里面的第几个，不区分类型
nth-child-type()指定的是type里的第几个区分类型

伪元素选择器，所谓的伪元素的选择器，可以这么理解：就是从css中加html元素，创建出来的是行内元素（没有大小,你需要添加：display:block），注意一下，这里的元素在dom对象中是不可见的。这个的选择器权重是1。我们可以使用伪元素选择器，丢字体图标。
2D转换transform,有以下三个属性值：

translate(x,y)移动特点：不会影响其他元素的位置，对行内元素无效，百分比的相对基准是自身，语法和用法类似于定位，

rotate旋转，注意一下这个里面的，单位是deg，默认的旋转中心在中心，不过你可以设置，旋转中心（transform-origin：X Y;其中XY 可以是方位词left buttom等，也可以是像素或者百分比)

scale缩放，scale（x,y） 默认是中心点缩放不影响其他的盒子

代码实例：综合写法，顺序是有顺序问题的一般来说，开发的时候，一般都是把位移先放在最前面

    div:hover {
     transform: translate(200px, 0) rotate(360deg) scale(1.2)
   }

动画，我们直接上代码，你看你就懂了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 需求：打开一个网页 有一个盒子从左走到右 */
        /* 1.定义动画 */
        
        @keyframes move {
            /* @keyframes是动画序列 move是你自己定义的动画的名称*/
            /* 0%是开始状态，100%是结束状态，当然了，你想要的几个状态都是没有问题的*/
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0);
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        /* 2.调用动画 */
        /* animation-NAME是指定动画，animation-direction是指定持续时间 
       animation-iteration-count: infinite;表示播放次数 “无限”  */
        
        div {
             200px;
            height: 200px;
            background-color: pink;
            animation-name: move;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

以下的是动画里面常见的属性

其简写形式如下：animation:名称持续时间运动曲线何时开始播放次数是否反向动画起始状态或结束状态

3D转换

translate3d(X,Y,Z)位移

rotate3d(x,y,z)旋转

透视perspective，写在被观察元素的父盒子上所谓透视就是近大远小

3d呈现 transform-style 这个是主要写在有多个盒子一起实现3d效果中，子元素开启3d空间flat不开启3d空间，开启的属性值preserve-3d

浏览器私有前缀

这个东西是为了解决流浪器的兼容性问题

五大流浪器私有前缀：

-moz-火狐的
-ms-ie的
-webkit-safari的
-o-Opera的

代码实例：

-moz-border-radius:10px;
-ms-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius : 10px;