关于H5(1)

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文档头 

新增标签

“有用”语义化标签
1：
头部标签
2:
模块
3:
尾部标签
4:
导航
5:
侧边栏
6:
文章
包含段落和标题
7:
标题组合
8:
  对于一组资源描述
    
    
清纯
  
9:2016年12月26日
10:数据列表：下拉
    
    
11:标题描述：收缩菜单
    

        
这是标题
        
相关介绍
    
12:对话框
    
对话框
13： 地址描述写法：
    
北京市 大兴区 亦庄开发区 
    
14:进度条写法

*表单

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       运动类型

浏览器规则：

    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;