H5C3

HTML5：

HTML第五次重大修改，增加了新的元素、属性和行为

新特性：

语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效，性能与集成特性，css3特性
广义HTML5包含HTML5本身、css3、js

H5新增语义化标签：

< header>：头部标签
< nav>：导航标签
< article>：内容标签
< section>：块级标签
< aside>：侧边栏标签
< footer>：尾部标签
语义化标签主要针对搜索引擎；新标签页面中可以使用多次；IE9中，需要把这些元素转换为块级元素；它们更适用于移动端

H5新增多媒体标签：

< audio>：音频，支持格式：Ogg Vorbis、MP3、Wav
< audio src=“media/snow.mp3” controls=“controls”>< /audio>
属性：
controls：显示控件（比如播放、暂停）不同浏览器的控件不同
autoplay：马上播放 谷歌浏览器把它禁用了
loop：音频结束时重新播放
src：要播放音频的URL

<audio controls="controls">
        <source src="media/snow.mp3" type="audio/mpeg" />
        <source src="media/snow.ogg" type="audio/ogg /">
            您的浏览器不支持播放声音
    </audio>不同浏览器支持的格式不同，所以提供多个格式

< video>：视频，支持格式：Ogg、MP4、WebM

<video src="media/video.mp4" controls="controls"></video>
video muted="muted" loop="loop" poster="media/pig.jpg" controls>
        <source src="media/video.mp4" type="video/mp4" />
        <source src="media/video.ogg" type="video/ogg" />
        您的浏览器不支持播放视频
    </video>

属性：
controls：显示控件
autoplay：马上播放 谷歌浏览器把它禁用了，添加静音属性可以解决
loop：视频结束时重新播放
src：要播放视频的URL
preload：加载完再播放
poster：加载等待的画面图片
muted：静音播放
width：宽度
height：高度

H5新增input表单、表单属性：

邮箱: <input type="email" />
网址: <input type="url" />
日期: <input type="date" />
日期: <input type="time" />
数量: <input type="number" />  e可以输入（科学计数法）
手机号码: <input type="tel" />
搜索: <input type="search" />
颜色: <input type="color" />
<input type="submit" value="提交">//用于检测

属性：
required：表单内容不能为空
placeholder：表单的提示信息，存在默认值将不再显示（占位符）
autofocus：自动聚焦
autocomplete：在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项（需要在表单加入name属性）
multiple：可以多选文件提交

CSS3：

在CSS2的基础上新增样式；移动端支持优于PC端；不断改进中；应用相对广泛

CSS3属性选择器：

属性选择器使用方法：button[disabled] 标签名[属性]

 /* 1.直接写属性 */
        button[disabled] {
            cursor: default;
        }
        /* 2. 属性等于值 */
        input[type="search"] {
            color: pink;
        }
        /* 3. 以某个值开头的 属性值 */
        div[class^="icon"] {
            color: red;
        }
        /* 4. 以某个值结尾的 */
        div[class$="icon"] {
            color: green;
        }
        /* 5. 可以在任意位置的 */
        div[class*="icon"] {
            color: blue;
        }

注意： 类选择器、属性选择器、伪类选择器，权重都为10

CSS3结构伪类选择器

也属于伪类选择器

E:first-child：匹配父元素中第一个子元素E
E:last-child：匹配父元素中最后一个子元素E
E:nth-child(n)：匹配父元素中第n个子元素E n可以为数字、关键字、公式（从0计算，0和超出的会被忽略） even偶数 odd奇数
选择父元素里面的第n个孩子，它不管里面的孩子是否同一种类型
E:first-of-type：指定类型E的第一个
E:last-of-type：指定类型E的最后一个
E:nth-of-type(n)：指定类型E的第n个

 ul li:first-child {
            background-color: pink;
        }
        ul li:last-child {
            background-color: deeppink;
        }
        /* nth-child(n)  我们要第几个，n就是几  比如我们选第8个， 我们直接写 8就可以了 */
        ul li:nth-child(8) {
            background-color: lightpink;
        }
       /* of-type 选择指定类型的元素 */
        div span:first-of-type {
            background-color: purple;
        }
        div span:last-of-type {
            background-color: skyblue;
        }
        div span:nth-of-type(2) {
            background-color: red;
        }

CSS3伪元素选择器：

::before：在元素内部的前面插入内容
::after：在元素内部的后面插入内容
注意： 必须有content属性；before和after会创建一个元素，属于行内元素，因为在dom中看不到创建的元素，所以称之为伪元素；伪元素和标签选择器权重为1

CSS3 2D转换：

transform，可以实现元素的位移（translate）、旋转（rotate）、缩放（scale）等效果
二维坐标系：x轴水平向右，y轴垂直向下

translate：
transform: translate(x, y);

1. 我们如果只移动x坐标
   transform: translateX(100px);
2. 我们如果只移动y坐标
   transform: translateY(100px);

注意： translate最大的优点时不会影响其他元素的位置；百分比单位是相对于自身元素的百分比；对行内标签没有效果

盒子实现水平和垂直居中：

position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

rotate：
让元素在二维平面内顺时针或是逆时针旋转
注意： 单位时deg（度）；角度为正时，顺时针，负时，逆时针；默认旋转中心时元素的中心点
transform-origin：设置元素转换的中心点
transform-origin: x y; 注意： xy使用空格隔开的；默认是50% 50%，可以跟方位名词和数字+像素

scale：
transform: scale(x, y); 参数表示倍数，只写一个参数指两个一样；不会影响其他盒子，可以设置中心点

2D转换综合写法：

transform: translate() rotate() scale();   

注意： 同时有位移和其他属性，需要把位移放到最前面；其顺序会影响转换的效果

CSS3动画：

animation：
可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果；可以改变任意多的次数；相比较与过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
制作动画步骤：

1.定义动画
@keyframes 动画名称 {
            /* 开始状态  from */
            0% {
                
            }
            /* 结束状态  to */
            100% {
               
            }
        }
2.调用动画
	/* 动画名称 */
            animation-name: 动画名称;
               /* 持续时间 */
            animation-duration: 时间;

动画序列

1. 可以做多个状态的变化 keyframe 关键帧
2. 里面的百分比要是整数
3. 里面的百分比就是 总的时间（比如10s）的划分 25% * 10 = 2.5s

动画常用的属性：
@keyframes：规定动画
animation：所有动画属性的简写属性
animation-name：动画名称
animation-duration：完成一个动画的时间，默认0
animation-timing-function：动画的速度曲线，默认ease（慢快慢）linear（匀速）steps（步长）
animation-delay：动画何时开始，默认0
animation-iteration-count：动画播放次数，默认1，infinite 无限
animation-direction：动画是否在下一周期逆向播放，默认normal，反向alternate
animation-play-state：动画是否在运行或暂停，默认running，暂停paused
animation-fill-mode：动画结束后状态，保持forwards，回到起始backwards

动画简写属性：
alternate：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或结束状态
注意：前两个必写；简写属性不包括暂停，经常在鼠标经过里写

CSS3 3D转换：

特点： 近大远小，物体后面遮挡看不见
三维坐标系：x轴水平向右 y轴垂直向下 z轴垂直屏幕向外

3D位移：
3D位移比2D位移多了一个z轴
translateZ 后面的单位一般跟px，不用百分比
transform: translate3d(0, 100px, 100px); xyz是不能省略的，如果没有就写0

透视perspective：
如果想在网页产生3D效果需要透视；模拟人类的视觉位置，可以安排一只眼去看；透视也称为视距，就是人的眼睛到屏幕的距离；距离视觉点越近的在电脑平面成像越大，越远成像越小；透视的单位是像素
注意： 透视写到被观察元素的父盒子上面，透视的值越小，所观察的物体越大；z是写到被观察的元素身上

3D旋转：
让元素沿着x轴、y轴、z轴或者自定义轴旋转
transform: rotateX(45deg)
transform: rotateY(45deg)
transform: rotateZ(180deg)
transform: rotate3d(x,y,z,deg)
旋转方向的问题可以参考左手准则： 左手大拇指沿着轴（x、y、z）的正方向，其余四指弯曲的方向就是度数为正时的旋转方向

3D呈现 transform-style：
控制子元素是否开启三维立体环境
flat：子元素不开启，默认的
preserve-3d：子元素开启
代码写给父级，但是影响的是子盒子

浏览器私有前缀

兼容老版本的写法

-moz-：代表firefox浏览器私有属性
-ms-：代表ie浏览器私有属性
-webkit-：代表safari、chrome浏览器私有属性
-o-：代表opera浏览器私有属性