1）啥是HTML5

　　1. HTML5简介

　　万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，作为HTML语言，具备新的元素、属性和行为。

　　2. 广义的HTML5

　　广义的HTML5是HTML5本身 + CSS3 + JavaScript这个集合有时称为HTML5和朋友，一般缩写为HTML5虽然HTML5的一些特质仍然不被某些浏览器支持，但它是一种发展势头HTML5 MDN介绍：

　　2）H5新增语义化标签

　　以前布局，大家基本用p来做，p对于搜索引擎来讲，是没语义的

　　新增语义化标签

　　— 头部标签 — 导航标签 — 内容标签 — 块级标签 — 侧边栏标签 — 尾部标签

　　注意

　　这种语义化标签主要针对搜索引擎的这类新标签在页面中可以用多次在 浏览器中，需要把这类语义化标签都转换为块级元素语义化标签，在手机端支持比较友好

　　3）H5新增多媒体标签

　　多媒体标签包括两个：

　　音频：<audio>视频：<video>

　　用它们可以很便捷的在页面中嵌入音频和视频，而不再去用落后的flash和其他浏览器插件。

　　1. <audio>音频标签

　　HTML5在不用插件的状况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的。

　　音频格式

　　目前， <audio>元素支持三种音频格式：

　　语法格式：

　　由于不同浏览器支持不同格式，大家采取的解决方法是大家为这个音频筹备多个格式

　　2. <video>视频标签

　　语法格式：

　　<video>视频标签容易见到属性

　　概要：

　　音频标签和视频标签用基本一样浏览器支持状况不同Google浏览器把音频和视频自动播放禁止了大家可以给视频标签添加muted属性可以自概念播放视频，音频不能视频标签是重点，大家常常设置自动播放，不用controls控件，循环和设置大小属性

　　4）、HTML5新增input表单、表单属性

　　CSS3近况

　　在CSS2的基础上新增（扩展）样式手机端支持优于PC端不断改进中应用相对广泛

　　1. CSS3属性（结构）选择器

　　2. CSS3结构伪类选择器

　　nth-child 解析

　　注意：本质上就是选中第几个子元素

　　n 可以是数字、关键词、公式

　　n 若是数字，就是选中第几个

　　容易见到的关键词有 偶数、 奇数

　　容易见到的公式如下（假如 n 是公式，则从 0 开始计算）

　　但第 0 个元素或者超出了元素的个数会被忽视

　　和 有什么区别

　　选择父元素里面的第几个子元素，无论是第几个种类

　　选择指定种类的元素

　　3. CSS3伪元素选择器

　　需要注意的地方：

　　和 需要有 属性 在内容前面，after 在内容后面 和 创建的是一个元素，但是行内元素创建出来的元素在 中查找不到，所以称为伪元素伪元素和标签选择器一样，网站权重为 1

　　典型应用：

　　添加字体图标

　　4. CSS3过渡（尤为重要）

　　过渡动画：是从一个状况日渐的过渡到另外一个状况，IE9以下不支持，常常和：hover一块搭配用

　　语法格式：

　　属性描述CSStransition简写属性，用于在一个属性中设置四个过渡属性。3transition-property规定应用过渡的 CSS 属性的名字。属性就是你想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。假如想要所有些属性都变化过渡， 写一个all 就可以。3transition-duration概念过渡成效花费的时间（需要写单位）。默认是 0。3transition-timing-function规定过渡成效的时间曲线。默认是 “ease”。3transition-delay规定过渡成效何时开始，可以设置 延迟触发时间。默认是 0，鼠标触发就立即开始。3

　　运动曲线示意图：

　　样例：

　　容易见到成效：

　　按钮变换底色 图片移动 小米成效 （阴影成效） 传智导航栏成效 等等

　　5. CSS3 2D转换

　　转换（transform）是CSS3中具备颠覆性的特点之一，可以达成元素的位移、旋转、缩放等成效。

　　转换（transform）可以容易理解为变形

　　移动：translate旋转：rotate缩放：scale

　　1）二维坐标系

　　2D转换是改变标签在二维平面上的地方和形状的一种技术，

　　2）2D转换之移动translate

　　2D移动是2D转换里的一种功能，可以改变元素在页面中的地方，类似定位

　　语法：

　　重点

　　概念2D转换中的移动，沿着X和Y轴移动元素translate最大的优点：不会干扰到其他元素的地方translate中的百分比单位是相对于自己元素的translate:（50%, 50%）;对行内标签没成效

　　3）2D转换之旋转rotate

　　2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

　　语法

　　重点

　　rotate里面跟度数，单位是deg譬如rotate（45deg）角度为正时为顺时针，负时为逆时针默认旋转的中心点是元素的中心点

　　案例：三角形

　　结果如图：

　　4）2D转换中心点transform-origin

　　大家可以设置元素转换的中心点

　　语法

　　重点

　　注意后面的参数x和y用空格隔开x y默认的中心点是元素的中心点（50% 50%）还可以给x y设置像素或者方位名词（TOP bottom left right center）

　　案例：旋转案例

　　结果如图：

　　5）2D转换之缩放scale

　　可以放大和缩小，只须给元素添加上了这个属性就能控制它放大还是缩小

　　语法

　　注意

　　注意其中的x和y用逗号分隔，里面的数字不跟单位就是倍数transform: scale（1, 1）：宽和高都放大一倍，等于没放大transform: scale（2, 2）：宽和高都放大了2倍transform: scale（2）：只写一个参数，第二个参数则和第一个参数一样transform: scale（0.5, 0.5）：缩小scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

　　案例：图片放大

　　结果如图：

　　案例：分页按钮

　　结果如图：

　　6）2D转换综合写法

　　注意：

　　同时用多个转换，其格式为：transform: translate（） rotate（） scale（）……等其顺序会干扰转换的成效（先旋转会改变坐标轴的方向）当大家同时有位移和其他属性的时候，记得要将位移放到最前面

　　6. CSS3动画

　　动画（animation）是CSS3中具备颠覆性的特点之一，可通过设置多个节点来精确控制一个或一组动画，常用来达成复杂的动画成效。

　　相比较过渡，动画可以达成更多的变化，更多的控制，连续自动播放等成效。

　　1）动画的基本用

　　制作动画分为两步：

　　先用keyframes概念动画（类似概念类选择器）

　　动画序列

　　0%是动画的开始，100%是动画的完成，如此的规则就是动画序列在**@keyframes**中规定某项CSS样式，就能创建由目前样式渐渐改为新样式的动画成效动画是使元素从一种样式渐渐便化为另一种样式的成效，你可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键字 " form " 和 ‘’ to " ，等同于0%和100%

　　再用（调用）动画

　　2）动画常用属性

　　3）动画简写属性

　　animation：动画名字 持续时间 运动曲线 何时开始 播放次数 是不是反方向 动画起始或者结束的状况；

　　animation: name duration timing-function delay iteration-count direction fill-mode;

　　简写属性里面不包括animation-play-state，如需用，单独写中止动画：animation-play-state：puased;常常和鼠标经过等其他配合用想要动画走回来，而不是直接就回来：animation-direction: alternate盒子动画结束后，停在结束地方：animation-fill-mode: forwards

希望以上内容可以解决您的问题！
如有其他问题欢迎大家一起交流学习！