H5的新特性
标签语义化
html5新增了许多语义化标签 比如：
<header>头部标签</header>
<nav>导航标签</nav>
<section>块标签</section>
<article>文章标签</article>
<aside>侧边栏</aside>
<footer>尾部标签</footer>
1.html语义化让页面的内容结构化，结构更清晰 便于队浏览器 搜索引擎解析 即使在没有css样式的情况下也以一种文档格式显示，容易阅读
2.搜索引擎的爬虫也依赖于html标记来确定上下文和各个关键字的权重，利于SEO；
3.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
拖拽（设置元素可拖拽）
<div draggable="true">拖拽</div>
音频、视频API(audio,video)
音频
<!--
audio 音频标签
src 路径
controls="controls" 播放控件（不能显示播放）
autoplay="autoplay" 自动播放（除去IE都禁用了）
loop="loop" 播放完成后自动循环播放
-->
<audio controls>
<source src="" type="audio/mpeg">
对不起，您的浏览器不支持加载音频
</audio>
视频
<video src="" controls width="" autoplay muted="muted" loop poster=""></video>
<!--
video 视频标签
src 路径
controls 播放控件
width/height 宽高
muted 静音播放+autoplay(可静音播放)
loop 循环播放
poster 加载等待图片画面
preload 预加载auto（自动）none（不加载）
-->
表单控件
<form action="">
<ul>
<li>
<label for="">邮箱 </label>
<input type="email" name="" id="" placeholder="传说的占位符">
</li>
<li>
<label for="">数字 </label>
<input type="number" name="" id="" placeholder="传说的占位符">
</li>
<li>
<label for="">手机 </label>
<input type="tel" name="" id="" maxlength="11" placeholder="传说的占位符">
</li>
<li>
<label for="">url </label>
<input type="url" name="" id="" placeholder="传说的占位符">
</li>
<li>
<label for="">日期 </label>
<input type="date" name="" id="" placeholder="传说的占位符">
</li>
<li>
<label for="">时间 </label>
<input type="time" name="" id="" placeholder="传说的占位符">
</li>
<li>
<label for="">月 </label>
<input type="month" name="" id="" placeholder="传说的占位符">
</li>
<li>
<label for="">周 </label>
<input type="week" name="" id="" placeholder="传说的占位符">
</li>
<li>
<label for="">搜索 </label>
<input type="search" name="" id="" placeholder="传说的占位符" >
</li>
<li>
<label for="">颜色 </label>
<input type="color" name="" id="" placeholder="传说的占位符" >
</li>
<li>
<input type="submit" value="提交">
</li>
</ul>
</form>
数据存储 localStorage、sessionStorage
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
// 储存数据语法：
localStorage.setItem("key", "value");
// 读取数据语法：
var lastname = localStorage.getItem("key");
console.log(lastname);
// 删除数据语法：
localStorage.removeItem("key");
//sessionStorage语法与localStorage相同
画布(Canvas) API
canvas：在页面上规划出一块空间，canvas标签，通过JavaScript控制画布完成绘制
地理(Geolocation) API
HTML5 Geolocation（） 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
H5 Web Workers
Javascript是运行在单线程环境中，也就是说无法同时运行多个脚本。假设用户点击一个按钮，触发了一段用于计算的Javascript代码，那么在这段代码执行完毕之前，页面是无法响应用户操作的。但是，如果将这段代码交给Web Worker去运行的话，那么情况就不一样了：浏览器会在后台启动一个独立的worker线程来专门负责这段代码的运行，因此，页面在这段Javascript代码运行期间依然可以响应用户的其他操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<input type="button" value="开始">
</body>
<script>
var worker=new Worker('./js/count.js')
document.querySelector('input').onclick=function(){
console.time('a')
//将数据传给线程
worker.postMessage(1000000000)
worker.onmessage=function(event){
//消息文本放置到div中
document.querySelector('div').innerHTML=event.data
}
console.timeEnd('a');
}
</script>
</html>
onmessage=function(event){
console.log(event);
var num=event.data
var a=0
for(var i=0;i<num;i++){
a+=i
}
//向线程的创建源（worker）送回信息
postMessage(a)
}
C3的新特性
1.选择器：属性选择器E[attr]，伪类选择器E:nth-child(n)，空伪类E:empty ，排除伪类E:not(selector)
:last-child /* 选择元素最后一个孩子 /
:first-child / 选择元素第一个孩子 /
:nth-child(1) / 按照第几个孩子给它设置样式 /
:nth-child(even) / 按照偶数 /
:nth-child(odd) / 按照奇数 /
:disabled / 选择每个禁用的E元素 /
:checked / 选择每个被选中的E元素 /
:not(selector) / 选择非 selector 元素的每个元素 /
::selection / 选择被用户选取的元素部分 /
伪类选择器：
:last-child / 选择元素最后一个孩子 /
:first-child / 选择元素第一个孩子 /
:nth-child(1) / 按照第几个孩子给它设置样式 /
a:link {color: #FF0000}/ 未访问的链接 /
a:visited {color: #00FF00}/ 已访问的链接 /
a:hover {color: #FF00FF}/ 鼠标移动到链接上 /
a:active {color: #0000FF}/ 选定的链接 /
伪元素：创建了 html 中不存在的元素，用于将特殊的效果添加到某些选择器
::before {}/ 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。 /
::after {}/ 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。 /
:first-letter / 选择该元素内容的首字母 *
/:first-line /* 选择该元素内容的首行 /
::selection / 选择被用户选取的元素部分 */
2.文字阴影
text-shadow: 5px 5px 5px #FF0000;
text-shadow: h-shadow v-shadow blur color;
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊的距离。
color可选。阴影的颜色。
3.盒模型
概念：页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。
盒模型又分为标准盒模型和怪异盒模型
标准盒模型 box-sizing: content-box:
盒子宽度=内容宽（设置的宽度）+左右内间距+左右边框
怪异盒模型 box-sizing: border-box;
盒子宽度=设置的宽度（包含了内容宽+左右内间距+左右边框）
4.边框
圆角border-radius
阴影box-shadow
5.背景：
通过 background-size 设置背景图片的尺寸。
通过 background-origin 可以设置背景图片定位(background-position)的参照原点。
通过background-clip，可以设置对背景区域进行裁切，即改变背景区域的大小。
6.渐变
线性渐变
background: linear-gradient(pink,aqua);
background: linear-gradient(to left, pink,aqua);
background: linear-gradient(to left top, pink,aqua);
background: linear-gradient(45deg,pink,aqua);
background: linear-gradient(to right,pink 50%,aqua);
<angle>：用角度值指定渐变的方向（或角度）。
to left：设置渐变为从右到左。相当于:270deg
to right：设置渐变从左到右。相当于:90deg
to top：设置渐变从下到上。相当于:0deg
to bottom：设置渐变从上到下。相当于:180deg。这是默认值，等同于留空不写。
<color-stop>：用于指定渐变的起止颜色：
<color>：指定颜色。
<length>：用长度值指定起止色位置。不允许负值
<percentage>：用百分比指定起止色位置。
径向渐变
background: radial-gradient(red,pink,aqua);
7.字体图标
8.弹性盒
/* 给父级设置弹性盒属性：显示为弹性盒 */
display: flex;
/* 设置弹性盒主轴方向：x轴 （默认的） */
flex-direction: row;
/* 设置弹性盒主轴方向：y轴 */
flex-direction:column;
/* 设置弹性盒主轴方向：x轴倒叙 */
flex-direction: row-reverse;
/* 设置弹性盒主轴方向：y轴倒叙 */
flex-direction: column-reverse;
/* 弹性盒换行：不换行（默认的） */
flex-wrap: nowrap;
/* 弹性盒换行：换行 */
flex-wrap: wrap;
/* 设置主轴上的子元素排列方式：x轴从左到右（默认） */
justify-content: flex-start;
/* 设置主轴上的子元素排列方式：x轴从尾部开始排列，不影响默认排序 */
justify-content: flex-end;
/* 设置主轴居中对齐 */
justify-content: center;
/* 平分主轴剩余空间 */
justify-content: space-around;
/* 两边对齐，中间平分剩余空间 */
justify-content: space-between;
/* 设置侧轴上的子元素排列方式：从头部开始 */
align-items: flex-start;
/* 设置侧轴上的子元素排列方式：从尾部开始 */
align-items: flex-end;
/* 设置侧轴上的子元素排列方式：居中显示 */
align-items: center;
/* 设置侧轴上的子元素排列方式：拉伸 */
align-items: stretch;
9.2D转换：
translate 设置元素的位置（x/y坐标）
/* 转换：转变为(x轴移动-100px y轴移动100px) */
transform: translate(-100px,100px);
transform: translateX(-100px);
transform: translateY(100px);
scale 设置元素的缩放比例（x/y两个方向）
/* 缩放（比例） */
transform: scale(1.2);
rotate 设置元素旋转（正值为顺时针，负值为逆时针）
transform-origin 设置转换元素的原点
/* 转换：旋转（90度） */
transform: rotate(90deg);
/* 转换-原点： 右 下 （方向） */
transform-origin: right bottom;
/* 过渡： 全部 1s 均匀 */
transition: all 1s linear;
10.3D转换：
透视（perspective）值为1000px~1200px
将2D元素转换为3D立体（给父元素设置）transform-style: perserve-3d;
设置元素背面是否可见 backface-visibility: hidden;
<!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>
body{
perspective: 500px;
/* 透视:可以加给父级及父级以上 */
}
main{
transform-style: preserve-3d;
/* 转换-样式：保留3d效果（子元素） */
position: relative;
width: 200px;
height: 300px;
transition: all 1s linear;
margin: 100px auto;
}
main:hover{
transform: rotate3d(1,1,1,270deg);
}
div{
position: absolute;
width: 100%;
height: 100%;
}
.d1{
background: aqua;
}
.d2{
background: yellow;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<main>
<div class="d1"></div>
<div class="d2"></div>
</main>
</body>
</html>
11.动画：
定义关键帧 @keyframes
通过百分编写帧
在各帧中分别定义各属性
通过animation将动画应用于相应元素
div{
width: 100px;
height: 100px;
background: aqua;
/* 调用动画 */
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
/* animation: name duration timing-function delay iteration-count direction fill-mode */
animation: w 2s linear 1s infinite alternate forwards;
/* 调用动画： 名称：w 持续时间：2s 运动曲线：匀速 何时开始：1s后 播放次数:无限循环 反方向播放 */
}
div:hover{
animation-play-state: paused;
/* 动画-播放-状态：暂停 */
}
/* 定义动画 */
@keyframes w{
0%{
}
100%{
width: 1000px;
}
}
