H5基础都有哪些：
1:html5新增标签
2:css3新增样式
3:3D动画效果
4:js新增语法
5:计算机信息
6:重力感应
7:地理信息
8:websql
9:多线程
10:地图功能
H5有用的标签:
1：绘图canvas
2：视频video
3：音频audio
*H5可用于：微信开发 phonegap Grunt gulp es6 但是H5不兼容IE8
*H5文档头 <!doctype html>
新增标签
“有用”语义化标签
1：<header>头部标签</header>
2:<section>模块</section>
3:<footer>尾部标签</footer>
4:<nav>导航</nav>
5:<aside>侧边栏</aside>
6:<article>文章</article>包含段落和标题
7:<hgroup>标题组合</hgroup>
8:<figure> 对于一组资源描述
<img src="" />
<figcaption>清纯</figcaption>
</figure>
9:<time>2016年12月26日</time>
10:数据列表：下拉
<input type="text" list="vag" />
<datalist id="vag">
<option>土豆</option>
<option>苹果1</option>
<option>鸭梨2</option>
<option>茄子</option>
<option>香蕉</option>
<option>冬瓜</option>
</datalist>
11:标题描述：收缩菜单
<details>
<summary>这是标题</summary>
<p>相关介绍</p>
</details>
12:对话框
<dialog>对话框</dialog>
13： 地址描述写法：
<address>北京市 大兴区 亦庄开发区 </address>
<progress></progress>
14:进度条写法
<meter max="100" value="100"></meter>
<progress max="100" value="10"></progress>
*表单
1:email 邮箱
2:color 颜色
3:date 时间
4:month 月份
5:week 周
6:url 网址
7:tel 调用数字键盘
8:search 搜索
9:range 拖拽条
10:number 数字输入框 max min(两个属性分别写限制的大小值)
*js新增功能
1:选择器：class id tagName * name
2:新增获取对象的方式：
1：获取一个对象
var oUl=document.querySelector('#id');
2：获取一组对象
var aLi=document.querySelectorAll('标签名');
3:自定义属性和非自定义属性之间的区别
js:
obj.className
obj.src
obj.title
4:自定义属性:obj.index 不支持
3:js自定义属性的时候必须加data-前缀:例如（data-xxx）
4:js如何获取：obj.dataset.xxx
5:js如何设置：obj.dataset.xxx="abc";
6:操作class
this.classList.add('abc'); 添加class
this.classList.remove('abc'); 删除class
this.classList.contains('abc'); 验证是否包含
this.classList.toggle('abc'); 切换class是否存在
7:localStorage本地储存
1)：cookie ：
A:4k B:有过期时间 C:会跟随服务器发送 D:必须在服务器环境下
2)：localStorage：
A:大小5M B:没有过期时间 C:不会跟随服务器发送 D:不用在服务器环境下
3)：LocalStorage的存读取：
存值 localStorage.a=12;
获取 alert(localStorage.a);
删除 delete localStorage.a
4)：LocalStorage的存读取（另一种写法）：
设置 localStorage.setItem('a',666);
获取 localStorage.getItem('a')
删除 localStorage.removeItem('a');
删除全部 localStorage.clear();
css3选择器：
1:属性选择器：（IE6以下不兼容）
li[class] 有属性
*li[class=abc] 属性和值是否相等 "abc"
li[class~=abc] 包含 "abc ab"
li[class^=abc] 以abc开头
li[class$=abc] 以abc结尾
li[class|=a] 以值开头的元素
li[class*=abc] 字符串中有abc的值
2:伪类选择器：
*obj:nth-child(1) 选择某一个
*input:disabled 不可用
*:root 根元素 html
*input:enabled 可用
*Inpur:disabled 不可用
obj:nth-child(odd) 奇数
obj:nth-child(even) 偶数
obj:nth-child(n) 全部
obj:nth-child(2n) 几倍数
obj:nth-last-child(2) 从后往前数
obj:first-child 第一个
obj:last-child 最后一个
input:focus 获取焦点
p:only-child 父级下只能存在一个子级元素
div:empty 空元素
::selection 选择的文本样式
：root 根元素 HTML
*css3新增的样式
写圆角：border-radius：50%； 表示：正圆 单位%，px都可以用
写入： 一个值 四个方向
两个值 左上/右下 右上/左下
三个值 左上 右上/左下 右下
四个值 左上 右上 右下 左下 顺时针
transition:1s all ease;
1s 运动时间
all 运动样式
Ease 运动类型
<h4>浏览器规则：</h4>
1：chrome 谷歌 使用：-webkit-
2：firefox 火狐 使用：-moz-
3：ie IE 使用：-ms-
4：opera 欧朋 使用：-o-
*目的：移动端开发：-webkit- 兼容
H5的一些小效果：
1:文字阴影效果：text-shadow:1px 1px 2px #000;
第一个值：X轴
第二个值：Y轴
第三个值：模糊度
第四个值：阴影颜色
2:颜色表示方法：rgba(0,0,0,0.1)
1:R 表示为 red
2:G 表示为 green
3:B 表示为 blue
4:A 表示为 alpha(透明度)
3:文字描边写法：-webkit-text-stroke:2px red;
2px表示为描边宽度
Red表示为描边颜色
4:块阴影的写法：box-shadow:0px 0px 10px 10px #000 inset;
第一个值为：X轴值
第二个值为：Y轴值
第三个值为：写模糊度
第四个值为：扩充阴影值
第五个值为：颜色
第六个值为：内阴影
5:渐变的三种写法：
1：线性渐变
background:-webkit-linear-gradient(left,red,green)；
left top right bottom /45deg 角度
red起始颜色
green结束颜色
2：重复渐变
background:-webkit-repeating-linear-gradient(-45deg,red 0,red 10%,blue 10%,blue 20%);
3：径向渐变
background:-webkit-radial-gradient(red,green);
普通元素可编辑：contenteditable="true"
6:蒙版的写法：-webkit-mask:url(../img/meizi.jpg) no-repeat x y;
1：背景图大小
background-size:width height; px
contain 以最小值为准
cover 以最大值为准
2：多个背景图
background:url,url,url,url;
网友评论