H5

1:语义标签footer,header
2:
(1)表单:input 的type
email，url，color，date
number:min,max,step(步长)
(2)表单元素：
datalist，

 <div>
    <datalist id="list1">
      <option value="">jack</option>
      <option value="">jerry</option>
      <option value="">tom</option>
    </datalist>
    <input type="text" name="mylist" list="list1"/>
  </div>

progress（进度条），
meter，

 <meter id="me" max="10000" low="500" high="9000" optimum="9999"
         value="10"></meter>

output
（3）表单新增属性：placehoder（占位符）,autofocus（自动获焦）,mutiple（允许输入多个值）,form（表单元素可以在空间外）.required(必填),maxlength,minlength,max,min,

---

3：音频视频

浏览器解析视频必须安装相应视频格式的解码器，一般浏览器都有mp4的解码器，如果没有，则可以将视频在格式工厂里转换为各种格式，如avi,flv，webm,等。如：

<video id = "v" controls muted>
	<source src = "X.avi "></source>
	<source src = "X.mp4 "></source>
	<source src = "X.webm "></source>
</video>

controls：视频下方的播放控件。 muted：静音。autoplay：自动播放。loop：循环。poster视频播放前的广告图片。

    var v = document.getElementById("v1")
  v.volume=0.5//调节播放时的声音。
  v.playbackRate=3//播放时的速率倍数。

paused:true表示暂停。
play():播放视频
pause()：暂停
onplay():
onpause():
音频：

---

4：网页绘图（Canvas），做特效，小游戏。

svg:2D矢量图；canvas：2D位图；webGI：3D位图。

图形：

画布的宽和高不能在css里设置，会出现错误。
<canvas id = "c1" width =	"500px" height="400px"></canvas>
<script>
	//获得画布
	var c1 = document.getElementById("c1")
	//获得画笔
	var ctx = c1.getContext("2d")
	//设置实心矩形样式（填充颜色）：
	ctx.fillStyle="red"
	//绘制实心矩形
	ctx.fillRect(0,0,100,80)
	//设置空心矩形样式（描边颜色）
	ctx.strokeStyle = "green"
	//设置描边宽度
	ctx.lineWidth=3
	//绘制空心矩形
	ctx.strokeRect(100,100,100,80)

	//清除范围内元素
	ctx.clearRect(0,0,180,400)
</script>

文字：

<script>
	//获得画布
	var c1 = document.getElementById("c1")
	//获得画笔
	var ctx = c1.getContext("2d")
	ctx.font = "30px Microsoft雅黑"//设置字体
	ctx.textBaseline="top"//设置为基线对齐
	var str = "abcdegjaeger加到"
	ctx.fillText(str,10,20)//填充实心文字
	var str1 = "kongxing的文字"
	ctx.strokeText(str1,260,350)//填充空心文字
    var obj = ctx.measureText(str)//获得文本对象
	var w = obj.width//获得文本长度。
</script>

线条：

 var c1 = document.getElementById("c1")
  var ctx = c1.getContext("2d")
  ctx.beginPath()
  ctx.arc(200,200,50,0,180*Math.PI/180)
  ctx.stroke()
  ctx.beginPath()//开始画
  //画弧线。圆心，半径，起始角度，结束角度。
  ctx.arc(300,300,60,270*Math.PI/180,90*Math.PI/180)
  //描边，因为默认画出来的路径无颜色。
  ctx.stroke()
  //将画笔移至..
  ctx.moveTo(300,300)
  //画直线
  ctx.lineTo(200,200)
  ctx.lineTo(300,305)
  //描边
  ctx.stroke()
   ctx.beginPath()
  ctx.arc(296,160,6,0,360*Math.PI/180)
  //设置填充颜色
  ctx.fillStyle="white"
  //为空心线条填充颜色。
  ctx.fill()

画图：
图片随鼠标移动

var c1 = document.getElementById("c1")
  var ctx = c1.getContext("2d")
  //创建图片画布
  var img2 = new Image()
  //要下载的图片路径
  img2.src = 'img/t2.png'
  var w = img2.width
  var h = img2.height
  //加载图片后触发的事件
  img2.onload=function () {
    var x = 0
    var y = 0
    c1.onmousemove=function (e) {
      x = e.offsetX
      y = e.offsetY
      //将图片画在画布上
      ctx.clearRect(0,0,600,400)
      ctx.drawImage(img2,x-w/2,y-h/2)
    }
  }

直方图：

  /*result:[{"name":"健胃消食片","s":109150},
    {"name":"六味地黄丸","s":211800}]*/
  var c1 = document.getElementById("c1")
  var ctx = c1.getContext("2d")
  for(var i = 0;i<result.length;i++){
        var w = 50
        var h = result[i].s/1000
        var x = i*100+w
        var y = 400-h
        ctx.fillRect(x,y,w,h)
      }

5：svg
6：地理定位
智能手机通过芯片定位，准。打开GPS即可。
老年手机通过基站定位。
电脑通过IP地址定位。
直接去百度地图开发平台，注册获得秘钥。
然后调用api即可。
7:web Work
8:web storage
客户端存储数据的方式：
（1）：cookie,不超过4k,操作复杂。
（2）：flash：
（3）:web Storage,不能超过8M,简单
会话：session，浏览器打开某个网站的第一个页面，会话开始，关闭浏览器，会话结束。

sessionstorage存储：（会话存储）关闭浏览器，数据会被清除。



var  a = sessionStorage.setItem("name","jack")
 var b = sessionStorage.setItem("age",23)
 
 获取：


    var a = sessionStorage.getItem("name")
  var b = sessionStorage.getItem("age")
  console.log(a)
  console.log(b)

localStorage(跨会话存储)，关闭浏览器，数据不会被清除。数据实际存储在C盘下某个位置。

（4）：indexDB,存储量大。
9:拖放API

10：web socket协议：http协议：发送一次请求，响应一次。websocket请求一次后不再断开连接。