HTML5：
1.新增的语义化标签  ：header    nav  aside footer
2.音频audio标签：语法         属性           浏览器的兼容性              加背景音乐
其基本语法：< audio controls="condtrols ">
                           <source src=有两种格式  要么是MP3格式要么是Ogg格式，因为存在浏览器兼容性的问题 ，只有用这种方法解决。
     视频video标签 和音频标签解决浏览器的兼容性问题是一样的，其语法格式也是相同，视谷歌浏览器把自动播放这个功能禁止播放了，解决谷歌浏览器  是需要静音  加自动播放这样效果才能显示出来。
3. 新增的input表单标签
  限制输入内容是的格式，
type="email"  限制用户输入必须为Email类型
type="url"    限制用户输入必须为URL类型  
type="number"  限制用户输入必须为数字类型
type="tel"  手机号码
type="search"  搜索框
type="date"   限制用户输入必须为日期类型
这些基本常用的标签
input表单 属性
     1.required =required表单拥有该属性表示其内容不能为空，必填
      2.placeholder提示文本表单的提示信息，存在默认值将不显示autofocus=autofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
      3.autocompleteoff / on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 默认已经打开，如 autocomplete=”on “ 关闭 autocomplete =”off” -需要放在表单内同时加上name属性 -同时成功提交
      4.multiple=multiple可以选中多个文件提交一次上传多个文件
4. CSS3
属性选择器
       元素 [属性]  
       元素[属性和属性值比如 id="tel"]
       元素[att^="val"] ^代表的是以val开头的属性值
       元素[att$="val"] $代表的是以val结尾的属性值


结构伪类选择器

      类选择器、属性选择器、伪类选择器，权重为 10
结构伪类选择器
        :first-child
        :last-child
        :nth-child(n)
                n可以是数字、单词、公式（从0开始计算）
                不考虑元素的类型
                指定父元素
        :first-of-type
        :last-of-type
        :nth-of-type()
                考虑元素的类型
伪元素选择器
        ::before
        ::after
                content不能省略，可以设置为空
伪元素要注意的 ：before和after  属于行内元素  在做页面的时候要转化
                            伪元素和标签选择器的权重都为1
5. 2D转换
    转换 transform     translate移动      旋转 rotate   缩放 scale
语法：
transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);
2d移动一般和过度还有定位搭配使用
旋转 语法 transform：rotate (...deg)这个度数单位不能省略
转换中心 是transfom-origin  默认的是以中心点转换的    还有左上角   右上角等
一.移动translate 的步骤
1. 给元素添加 转换属性  transform

2. 属性值为移动 translate(x,y)  如  transform:translate(50px,50px);

3.rotate 旋转
2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转   注意deg这个单位度数不能省略。
4.2d缩放 scale
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
他的放大个缩小是以四周发散的一个过程。不像宽高 影响其他盒子。
语法 ：
transform:scale(0.5)  缩小 小于1 都是缩小
transform:scale(2) 宽和高都放大了2倍 大于1是放大
中间是以逗号隔开的
综合写法 ：
transform：translate（）位移  rotate（）旋转    scale（）缩放  中间用空格隔开，其顺便不能变。
二.动画 animation
动画 可以设置变化的次数 甚至是无数次
1.语法步骤 ：
  /* 我们想页面一打开，一个盒子就从左边走到右边 */
        /* 1. 定义动画 */        
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用（使用）动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
2.动画属性
规定动画 @keyframes
规定 @keyframes动画的名称 ：animation-name
动画持续时间：animation-duration
动画的速度曲线 ：animation-timing-function
       1. linear： 匀速
        2.ease： 慢-快-慢  默认值
        3.ease-in： 慢-快     
       4.ease-out： 快-慢
        5.ease-in-out： 慢-快-慢。
动画延迟时间 也就是何时开始 ：animation-delay
动画循环方向：animation-direction
默认值normal      反向运动reverse     正反正alternate      反正反alternate-reverse


速度曲线细节

透视 perspective
3D呈现 transfrom-style
l控制子元素是否开启三维立体环境。。
ltransform-style: flat 子元素不开启3d立体空间  默认的
ltransform-style: preserve-3d; 子元素开启立体空间
l代码写给父级，但是影响的是子盒子
l这个属性很重要，后面必用

HTML5：
1.新增的语义化标签  ：header    nav  aside footer
2.音频audio标签：语法         属性           浏览器的兼容性              加背景音乐
其基本语法：< audio controls="condtrols ">
                           <source src=有两种格式  要么是MP3格式要么是Ogg格式，因为存在浏览器兼容性的问题 ，只有用这种方法解决。
     视频video标签 和音频标签解决浏览器的兼容性问题是一样的，其语法格式也是相同，视谷歌浏览器把自动播放这个功能禁止播放了，解决谷歌浏览器  是需要静音  加自动播放这样效果才能显示出来。
3. 新增的input表单标签
  限制输入内容是的格式，
type="email"  限制用户输入必须为Email类型
type="url"    限制用户输入必须为URL类型  
type="number"  限制用户输入必须为数字类型
type="tel"  手机号码
type="search"  搜索框
type="date"   限制用户输入必须为日期类型
这些基本常用的标签
input表单 属性
     1.required =required表单拥有该属性表示其内容不能为空，必填
      2.placeholder提示文本表单的提示信息，存在默认值将不显示autofocus=autofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
      3.autocompleteoff / on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 默认已经打开，如 autocomplete=”on “ 关闭 autocomplete =”off” -需要放在表单内同时加上name属性 -同时成功提交
      4.multiple=multiple可以选中多个文件提交一次上传多个文件
4. CSS3
属性选择器
       元素 [属性]  
       元素[属性和属性值比如 id="tel"]
       元素[att^="val"] ^代表的是以val开头的属性值
       元素[att$="val"] $代表的是以val结尾的属性值


结构伪类选择器

      类选择器、属性选择器、伪类选择器，权重为 10
结构伪类选择器
        :first-child
        :last-child
        :nth-child(n)
                n可以是数字、单词、公式（从0开始计算）
                不考虑元素的类型
                指定父元素
        :first-of-type
        :last-of-type
        :nth-of-type()
                考虑元素的类型
伪元素选择器
        ::before
        ::after
                content不能省略，可以设置为空
伪元素要注意的 ：before和after  属于行内元素  在做页面的时候要转化
                            伪元素和标签选择器的权重都为1
5. 2D转换
    转换 transform     translate移动      旋转 rotate   缩放 scale
语法：
transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);
2d移动一般和过度还有定位搭配使用
旋转 语法 transform：rotate (...deg)这个度数单位不能省略
转换中心 是transfom-origin  默认的是以中心点转换的    还有左上角   右上角等
一.移动translate 的步骤
1. 给元素添加 转换属性  transform

2. 属性值为移动 translate(x,y)  如  transform:translate(50px,50px);

3.rotate 旋转
2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转   注意deg这个单位度数不能省略。
4.2d缩放 scale
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
他的放大个缩小是以四周发散的一个过程。不像宽高 影响其他盒子。
语法 ：
transform:scale(0.5)  缩小 小于1 都是缩小
transform:scale(2) 宽和高都放大了2倍 大于1是放大
中间是以逗号隔开的
综合写法 ：
transform：translate（）位移  rotate（）旋转    scale（）缩放  中间用空格隔开，其顺便不能变。
二.动画 animation
动画 可以设置变化的次数 甚至是无数次
1.语法步骤 ：
  /* 我们想页面一打开，一个盒子就从左边走到右边 */
        /* 1. 定义动画 */        
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用（使用）动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
2.动画属性
规定动画 @keyframes
规定 @keyframes动画的名称 ：animation-name
动画持续时间：animation-duration
动画的速度曲线 ：animation-timing-function
       1. linear： 匀速
        2.ease： 慢-快-慢  默认值
        3.ease-in： 慢-快     
       4.ease-out： 快-慢
        5.ease-in-out： 慢-快-慢。
动画延迟时间 也就是何时开始 ：animation-delay
动画循环方向：animation-direction
默认值normal      反向运动reverse     正反正alternate      反正反alternate-reverse


速度曲线细节

透视 perspective
3D呈现 transfrom-style
l控制子元素是否开启三维立体环境。。
ltransform-style: flat 子元素不开启3d立体空间  默认的
ltransform-style: preserve-3d; 子元素开启立体空间
l代码写给父级，但是影响的是子盒子
l这个属性很重要，后面必用