1）什么是HTML5

 

　　1. HTML5简介

 

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

 

　　2. 广义的HTML5

 

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

 

　　2）H5新增语义化标签

 

　　以前布局，我们基本用div来做，div对于搜索引擎来说，是没有语义的

 

　　新增语义化标签

 

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

 

　　注意

 

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

 

　　3）H5新增多媒体标签

 

　　多媒体标签包含两个：

 

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

 

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

 

　　1. <audio>音频标签

 

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

 

　　音频格式

 

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

 

　　语法格式：

 

　　因为不同浏览器支持不同格式，我们采取的解决方案是我们为这个音频准备多个格式

 

　　2. <video>视频标签

 

　　语法格式：

 

　　<video>视频标签常见属性

 

　　总结：

 

　　音频标签和视频标签使用基本一致浏览器支持情况不同谷歌浏览器把音频和视频自动播放禁止了我们可以给视频标签添加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