一、HTML5新增标签
header nav main footer section article hgroup figure figcaption aside video audio canvas
如何让低版本浏览器兼容新标签：html5shiv.js
二、html5新增的表单控件
1、表单控件的新属性
<input type="text" placeholder="默认输入的内容" required autofocus>
required:此选项必填，不能空
autofocus:指定表单获取输入焦点
Pattern：正则验证 - pattern=“\d{1,5}”
2、新增的输入性表单控件
email：电子邮箱文本框,跟普通的没什么区别
- 当输入不是邮箱的时候,验证不通过
- 移动端的键盘会发生变化
tel：电话号码
url：网页的URL
search：搜索引擎
- chrome下输入文字后，会多出一个关闭的X
range：特定范围内的数值选择器
min、max、step(步数)
例子： 用js来显示当前数值
number：只能包含数字的输入框
输入框末尾有两个箭头 上为加 下为减
color：颜色选择器
点击显示颜色版
datetime：显示完整日期
类似select选择样式
datetime-local：显示完整日期， 不包含时区
time：显示时间，不含时区
date：显示日期{年月日}
week：显示周{年月日周}
mouth：显示月{年月}
<input type="text"
placeholder="请输入4-16个字符" // 输入框内显示
autocomplete="off" // 是否记录输入的值
autofocus // 聚焦
required // 输入框不能为空
pattern="\d{1,5}" // 必须输入1到5个数字
/>
// required 和 pattern 具有安全隐患 如果在控制台修改input的pattern和required 那么就可以破除校验
// 如果用户在某个页面输入相当多的数据，临时有事需要离开一段时间，此时数据应该保存至草稿箱，那么同一个form表单下，将会有两个不同地址的sumbit提交 ope浏览器已支持 其余浏览器可能不支持
<form action="https://www.baidu.com">
<input type="text">
<input type="submit" value="提交" />
<input type="submit" value="保存至草稿箱" formaction="http://www.miaov.com"/>
</form>
三、本地存储
1、三中本地存储
cookie localStorage sessionStorage
2、localStorage的API
(1)写入：
localStorage.setItem(键，值); //值只能是字符串
localStorage.user = "123"
localStorage["user"] = "123"
(2)读取：
var user = localStorage.getItem("user")//'user'为存入的自定义的健名
var user = localStorage.user;
(3)修改：
localStorage.setItem("user","890")//修改其实就是从新赋值
(4)删除：
localStorage.remove('user');//删除单个key为user的
localStorage.clear();//删除全部
3、sessionStorage的API
跟localStorage一样的用法
sessionStorage.setItem(键，值);
sessionStorage.getItem(键);
sessionStorage.removeItem(键);
sessionStorage.clear();
4、cookie webStorage(localStorage sessionStorage)三者的区别-重点-
1、cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2、存储大小限制也不同，cookie数据不能超过4kb，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。其安全性也很差，如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5、Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
6、Web Storage 的 api 接口使用更方便。
ps:Web Storage带来的好处：1、减少网络流量：一旦数据保存在本地之后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要的来回传递；
2、快速显示数据：性能好，从本地读数据比通过网络从服务器上获得数据快得多，本地数据可以及时获得，再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示
3、临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便
localStorage和sessionStorage都是h5新增的本地存储方法，也是通过”键：值”对的形式存储数据，区别在于两者的生存时间不同：
localStorage是持久性的，即使关闭窗口或者关闭浏览器，都不会被删除，除非进行手动删除；
sessionStorage是临时的，当窗口或者浏览器关闭，则其也会随之清除；
4、Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
四、离线存储
（1） *.manifest (*.appcache)
index.html <html manifest="*.manifest">
(2) 理解离线存储的更新方式
五、移动端的布局思路
1、设备像素比（倍率） 逻辑像素尺寸 （360px 320px 375px 414px）
window.devicePixelRatio
2、 <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no"">
3、使用rem单位
4、设置不同设备中html根元素字号大小的方式有两种
750设计稿， w = 300px ----> w = 3rem
（1）媒体查询
html {
font-size: 100px;
}
@media (max-width: 375px){
html {
font-size: 50px;
}
}
(2) js （由base.js引申出了！！！！！！！！-------js防抖和节流概念）
六、地理定位
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(success,error,{
timeout: 5000
});
function success(pos){
纬度: pos.coords.latitute
经度： pos.coords.longtitude
}
}
navigator.geolocation.watchPosition(success);
七、视频，音频
<video autoplay="autoplay" controls="controls" loop="loop" poster="" preload="preload"> <audio>
八、移动端事件：
(1) 触屏事件： ontouchstart ontouchmove ontouchend
(2) 如何判断是否为移动端： if ("ontouchstart" in document){}
(3) 移动端事件的事件对象及常用属性
e.touches[0].clientX e.touches[0].clientY e.touches[0].target
(4) 移动端常见问题及解决方案：
a、 click事件 300ms的延迟： <1>zepto的tap事件
解决办法： fastclick.js
b、 zepto的tap事件有点透问题
解决办法fastclick.js
(5) zepto的touch模块： tap singleTap doubleTap longTap swipeLeft swipeRight swipeUp swipeDown
九、canvas
<canvas width="600" id="can"></canvas> 300*150
var can = document.getElementById("can");
var cxt = can.getContext("2d");
cxt.beginPath();
cxt.moveTo(100,200);
cxt.lineTo(200,400);
cxt.strokeStyle = '#f00';
cxt.stroke();
cxt.clearRect(0,0,200,300); context.globalCompositeOperation="destination-out";
