H5新特性总结
html5总的来说比html4多了八个新特性，但其不支持ie8及ie8以下版本的浏览器
一、语义标签
二、增强型表单
三、视频和音频
四、Canvas绘图
五、地理定位
六、拖放API
七、WebWorker
八。本地存储
在HTML5中新加的video和radio,也对应有方法、属性和事件
以video标签为例：
<video id='video' controls = “controls”>
为兼容不同格式的视频
`
<video>
<source src=”1.mp4” type=”video/mp4” />
<source src = “2.ogg” type=”video/ogg” />
<source src=”3.webm” type=”video/webm” />
</video>`
2.localStorage/sessionStorage
localStorage.setItem("变量名", "要存的东西")
// 本地长时间储存 setItem设置 ("变量名"，"要存的东西")
console.log(localStorage.getItem("变量名"));
sessionStorages.setItem("变量名", "要存的东西")
// 本地短时间储存 setItem设置 ("变量名"，"要存的东西")关闭网页就会消失
console.log(sessionStorage.getItem("变量名"));
3语义化标签
nav构建导航组件。、
header标签 一般是头部标签
main 标签 一般是主要部分
footer 尾部标签 主要处理尾部
aside 标签 侧边栏
4input表单属性
<input type="color">选主要用于选取颜色<br>
<input type="date" name="" id=""> 从一个日期选择器选择一个日期<br>
<input type="time" name="" id=""> 时间<br>
<input type="email"> 邮箱<br>
<input type="number"> 选择一个月份<br>
<input type="url">地址<br>
5
css3新特性
过度
div {
width: 100px;
height: 100px;
border: 1px solid #000;
}
div:hover {
width: 200px;
height: 100px;
transition: linear 0.4s ease 0;
/* transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码 */
border: 1px solid #000;
}
动画语义化标签：header、footer、section、nav、aside、article
增强型表单：input 的多个 type
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
新增表单元素：datalist、keygen、output
output:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
datalist:
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
keygen:
<form action="demo_keygen.php" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
```Worker语法("文件路径")这个文用来处理比较耗费时间的
新增表单属性：placehoder、min 和 max
音频视频：audio、video canvas
##### audio 属性
src:文件路径
autoplay:自动播放
loop:循环
controls:控制条
muted:静音
preload:预加载（当使用autoplay时，preload自动失效）
<audio controls src="http://www.w3school.com.cn/i/song.mp3">
</audio>
#### video 属性
src:文件路径
autoplay:自动播放
loop:循环
controls:控制条
muted:静音
preload:预加载（当使用autoplay时，preload自动失效）
width:宽度
height:高度
poster:海报
<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" controls>
</video>
**拖拽**
H5之前没有拖放API，可以使用“鼠标按下 + 鼠标移动”两个事件来模拟用户拖动事件。
H5之后专门提供了七个鼠标拖动相关事件句柄：
```csharp
拖动的源对象(source)可能触发的事件：
dragstart：拖动开始
drag：拖动中
dragend：拖动结束
拖动的目标对象(target)可能触发的事件：
dragenter：拖动进入
dragover：拖动悬停
drop：松手释放
dragleave：拖动离开
注意：拖放API事件句柄中所有的事件对象都有一个dataTransfer属性（数据运输对象），用于在源对象和目标对象间传递数据。
源对象：event.dataTransfer.setData(key, value)
目标对象：var value = event.dataTransfer.getData(key)
本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
(1)window.sessionStorage：类数组对象，通过key=>value对存储字符串数据——会话级存储
特点：一次性储存，数据在浏览器关闭后自动删除
添加数据：sessionStorage['key'] = 'value'
修改数据：sessionStorage['key'] = 'newValue'
删除数据：delete sessionStorage['key']
获得数据：var v = sessionStorage['key']
(2)window.localStorage：类数组对象，通过key=>value对存储字符串数据——本地/跨会话级/永久存储
长期存储数据，浏览器关闭后数据不丢失;
特点:数据永久存储，没有时间限制；大小限制5M(够用了)；只存储字符串
添加数据：localStorage['key'] = 'value'
修改数据：localStorage['key'] = 'newValue'
删除数据：delete localStorage['key']
获得数据：var v =localStorage['key']
媒体查询：
响应式布局
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/567.css" media="screen and (max-width:567px)">
<link rel="stylesheet" href="./css/568.css" media="screen and (min-width:568px)">
<link rel="stylesheet" href="./css/768.css" media="screen and (min-width:768px)">
<link rel="stylesheet" href="./css/992.css" media="screen and (min-width:992px)">
<link rel="stylesheet" href="./css/1200.css" media="screen and (min-width:1200px)">
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 300px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
超小屏幕（手机，小于 768px）
@media (max-width: 768px) { ... }
小屏幕（平板，大于等于 768px）
@media (min-width: 768px) and (max-width: 768px) { ... }
中等屏幕（桌面显示器，大于等于 992px）
@media (min-width: 992px) and (max-width: 992px) { ... }
大屏幕（大桌面显示器，大于等于 1200px）@media (max-width: 768px) {
//手机移动端分辨率
}
@media (min-width: 768px) and (max-width: 992px) {
//PAD中屏分辨率
}
CSS3选择器：
**“:first-child**”选择器表示的是选择父元素的第一个子元素的元素E。
**:last-child**”选择器选择的是元素的最后一个子元素
**“:nth-child(n**)”选择器用来定位某个父元素的一个或多个特定的子元素。
**“:nth-last-child(n)**”从某父元素的最后一个子元 素开始计算，来选择特定的元素。
**“:first-of-type**”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
**“:last-of-type**”选择器 他选择是父元素下的某个类型的最后一个子元素
**“:nth-of-type(n)**”选择器和“:它只计算父元素中指定的某种类型的子元素。
**“:nth-last-of-type(n)**”选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始
**“:only-child”**选择器匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
**“:only-of-type**”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。
**:checked**选择器
圆角效果：
border-radius:10px; /* 所有角都使用半径为10px的圆角
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
阴影：
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
阴影颜色：默认黑色; 投影方式：inset时为内部阴影，省略为外部阴影
为边框应用图片：
border-image:url(borderimg.png) 70 repeat
rgba颜色：
background-color:rgba(100,120,60,0.5); 最后的0.5代码透明度
渐变色彩：
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。
线性渐变：linear-gradient(to left, red, orange); to left为渐变方向从右到左；to top;to right;to bottom;to top left;to top right 颜色可多个分别为从起始到终止的色彩。
溢出省略：
text-overflow:ellipsis;溢出文字以省略号出现，需要下面三个属性同时使用
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
-
文本阴影text-shadow：
text-shadow: X-Offset(水平偏移) Y-Offset(垂直偏移) blur（阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰） color;
background-origin设置元素背景图片的原始起始位置：参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。
background-size设置背景图片的大小
弹性布局：
Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。
它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：
在不同方向排列元素
重新排列元素的显示顺序
更改元素的对齐方式
动态地将元素装入容器
## ```apl
display: flex;
flex-direction: row;
/*弹性盒方向：主轴方向X轴 */
flex-direction: column;
/* 弹性盒方向：主轴Y轴方向 */
flex-direction: row-reverse;
/* 弹性盒方向：主轴方向X轴 倒叙 */
flex-direction: column-reverse;
>/* 弹性盒方向：主轴Y轴方向 倒叙*/
>flex-wrap: nowrap;
/* 弹性盒换行：不换行 默认的 */
flex-wrap: wrap;
/* 弹性盒换行：换行 */
//设置主轴方向子元素排列顺序
justify-content: flex-start;
/* 从左到右排列 默认的 */
justify-content: flex-end;
/* 从尾部开始排列 不影响子元素排列顺序 */
justify-content: center;
/* 从主轴居中对齐 */
justify-content: space-around;
/* 平分主轴剩余空间 */
justify-content: space-between;
/* 两边对齐，中间评分剩余空间 */
justify-content: space-evenly;
/* 间距相同 */
## # ```
-
animation动画
一：animation是一个复合属性，一共有8个参数;
一般是由@keyframes先定义动画，然后animation使用动画。
1.animation-name:动画名称，由@keyframes定义的
2.animation-duration：动画的持续时间
3.animation-timing-function：动画的过渡类型
4.animation-delay：动画的延迟时间
5.animation-iteration-count：动画的循环次数
6.animation-direction：设置动画在循环中是否反向运动
7.animation-fill-mode：设置动画时间之外的状态
8.animattion-play-state:设置动画的状态。 #
动画运动曲线：
animation-timing-function 属性规定动画的速度曲线。
animation-timing-function 属性可接受以下值：
ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
代码如下：
```
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
css2动画转换属性：
2D 转换 transform
描述：对元素进行移动，缩放，转动，拉长或拉伸。配合过渡和动画知识，可以代替flash才能实现的效果。
属性值：多种转化方法的属性值，可以实现不同的转换效果。
2D 转换-位移-translate()
描述：当transform的属性值为translate()时，可以实现位移效果。
语法：1.translate(x,y),x和y分别表示水平方向和垂直方向的移动距离，可以为px的值和百分比。区分正负。
2.translate(x):只有一个值，表示水平方向的位移。
2D 转换-缩放-scale()
描述：当transform的属性值为scale()时，可以实现元素缩放效果。
语法：1.scale(x,y):x和y分别表示改变元素宽度和高度的倍数。
2.scale(n):只有一个值n，表示宽高同时缩放n倍。
3.scaleX(n):改变元素的宽度。
4.scaleY(n):改变元素的高度。
2D 转换-旋转-rotate()
描述：当transform的属性值为rotate()时，可以实现元素旋转效果，沿着元素的中心点进行旋转。
语法：rotate(数字deg)：deg表示度数单位，正数表示顺时针旋转，负数表示逆时针旋转，2D旋转只有一个属性值。
注意：当元素发生旋转后，元素的坐标也会发生变化，因此，多个属性值同时设置给transform时，书写顺序不同导致的转换效果有差异。
2D 转换-倾斜-skew()
描述：当transform的属性值为skew()的时候，可以实现元素的倾斜效果。
语法：skew(数字deg,数字deg)：两个数字分别表示水平方向和垂直方向的旋转角度，属性值可以为正可以为负，第二个属性值不写默认为0。
2D 转换-基准点 transform-origin()
描述：设置调整元素水平方向和垂直方向原点的位置。调整元素的基准点。
语法：transform-origin: x y;x表示定义x轴的原点在何处，可能的值分别为left，center，right，像素值，百分比。y表示定义y轴的原点在何处，可能的值同x相同。top，center，bottom，像素值，百分比。
2D 转换案例
<!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>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 225px;
height: 150px;
/* border: 1px solid black; */
margin: 300px auto;
}
.box div {
position: absolute;
left: 0;
top: 0;
width: 225px;
height: 150px;
transform-origin: right top;
transition: all ease 1s 0s;
}
.box1 {
background-color: skyblue;
}
.box2 {
background-color: pink;
}
.box3 {
background-color: salmon;
}
.box4 {
background-color: sandybrown;
}
.box5 {
background-color: tomato;
}
.box6 {
background-color: darkseagreen;
}
.box:hover div:nth-child(1) {
transform: rotate(60deg)
}
.box:hover div:nth-child(2) {
transform: rotate(120deg)
}
.box:hover div:nth-child(3) {
transform: rotate(180deg)
}
.box:hover div:nth-child(4) {
transform: rotate(240deg)
}
.box:hover div:nth-child(5) {
transform: rotate(300deg)
}
.box:hover div:nth-child(6) {
transform: rotate(360deg)
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</div>
</body>
</html>
透视属性 perspective
描述：设置z轴的视线焦点的观察位置，从而实现3D查看效果。
属性值：像素值数值越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸。
注意：透视属性需要设置给3D变化元素的父级。
总结：如果想实现元素的3D转换，就需要给元素的父元素添加perspective属性，属性值越大图形想过月接近原始尺寸，属性值越小，3D旋转效果越明显。
3D 旋转
描述：3D旋转分为三个方向的角度旋转。
属性值：rotateX(angle):定义沿着X轴的3D旋转。
rotateY(angle):定义沿着Y轴的3D旋转。
rotateZ(angle):定义沿着Z轴的3D旋转。
3D 位移
描述：3D位移也分为三个方向的位移。
属性值：translateX(x):设置x轴的位移值。
translateY(y)：设置y轴的位移值。
translateZ(z): 定义3D位移，设置z轴的位移值
transform-style 属性
描述：用于设置在被嵌套的子元素在父元素的3D空间中显示，子元素会保留子集的3D转换坐标轴。
语法：transform-style: 属性值;
属性值：
flat: 所有子元素在2D平面呈现。
preserve-3d: 保留3D空间。
注意：该属性一般设置给3D变换图形的父元素。
transform 浏览器兼容
浏览器兼容：IE10,Firefox,以及opera浏览器支持transform属性，Chrome和Safari需要添加"-webkit-"前缀，IE9需要添加"-ms-"前缀。
动画
描述：在css3中动画效果需要两步，首先需要创建动画，然后需要绑定动画。
@keyframes 规则
描述：@keyframes规则用于创建动画，在@keyframes中定义某项css样式，就能创建从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式，任意多的次数。
需要使用百分比来规定变化发生的时间，或者使用关键词"from"和"to",等同于0%和100%，0%是动画的开始，100%是动画的结束。
语法：@keyframes 自定义动画名称 {
动画过程，可以添加任意百分比处的动画细节
}
@keyframes 规则代码示例
/* @keyframes 百分比形式 */
@keyframes move2 {
0% {
transform: translateY(0);
}
25% {
transform: translateY(100px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}
/* @keyframes 定义动画 */
@keyframes move {
from {
transform: translateY(0)
}
to {
transform: translateY(100px);
}
}
动画调用 animation 属性
描述：将@keyframes创建的某个动画绑定到选择器上，否则不会产生动画效果，animation属性就是将动画绑定到选择器上。
语法：div {
animation: 动画名称 过渡时间 速度曲线 动画次数 延迟时间;
}
其中必须设置动画名称和过渡时间，速度曲线于transition的运动曲线一样。
动画代码示例
<!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>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
margin: 100px auto;
border-radius: 50%;
background-color: skyblue;
/* 绑定动画 */
/* animation: move 3s linear; */
animation: move2 3s linear;
}
/* @keyframes 定义动画 */
@keyframes move {
from {
transform: translateY(0)
}
to {
transform: translateY(100px);
}
}
/* @keyframes 百分比形式 */
@keyframes move2 {
0% {
transform: translateY(0);
}
25% {
transform: translateY(100px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
