一、认识HTML5
（1）H5即是HTML的一个最新的版本，也是web的一个标准。
（2）结合CSS3中的内容如:圆角、动画、过渡等效果，提高用户的体验。
（3）新增了javascript的api，使得操作dom更加的方便。
（4）还增加了与硬件结合的功能:定位、重力感应.硬件访问等功能。
（5）通常所说的H5: HTML5 + CSS3 + JavaScript;组合而成的一个应用开发平台。
二、语法规范
html:4s&4t html:xt html:5&! 更加简洁 更加宽松
三、兼容合语义化
1、语义化
1.1标签的语义化
header页眉 footer页脚 nav导航 aside侧边栏如文章的侧栏 figure媒介内容分组与ul>li做个比较 section区块 article文章如文章、评论、帖子、博客 mark标记(常用"U"，不怎么用) progress进度(常用"UI"，不怎么用) time日期 hgroup标题列表(据说已废弃) details bdi command rp rt ruby summary
1.2微数据
主要是为机器如:搜索引擎更加友好
1.3ARIA
主要正对残障人士
2、兼容
引入一个js文件，当支持H5的时候不引入此文件，不支持的时候引入
快捷键: cc:ie6
四、新增API
1、网络状态
（1）window.online用户网络连接时被调用
（2）window.online用户网络连接时被调用
（3）通过window.navigator.onLine可以返回当前的网络状态:alert(window.navigator.onLine);
2、全屏
（1）开启全屏显示:Node.requestFullScreen();*大注意**︰不能拉伸原来的元素
（2）关闭全屏显示:Node.cancelFullScreen();**注意**:关闭的时候只能使用document.CancelFullScreen()方法才能关闭
（3）document.fullScreen检测当前是否处于全屏**注意**:不同浏览器需要添加前缀
3、文件读取
filelist对象
FileReader对象
（1）实例方法
（2）事件监听
（3）属性
4、拖拽
事件监听
1.拖拽元素
（1）ondrag应用于拖拽元素，整个拖拽过程都会调用
（2）ondragstart应用于拖拽元素，当拖拽开始时调用
（3）ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
（4）ondragend应用于拖拽元素，当拖拽结束时调用
2.目标元素
（1）ondragenter应用于目标元素，当拖拽元素进入时调用
（2）ondragover应用于目标元素，当停留在目标元素上时调用
（3）ondrop应用于目标元素，当在目标元素上松开鼠标时调用
（4）ondragleave应用于目标元素，当鼠标离开目标元素时调用
5、地理定位
1.获取地理信息
2.隐私
3.API详解
获取当前地理信息
实时获取当前地理信息
4.应用
6、历史管理
1.新增方法
（1）pushState(data, title, url)追加一条历史记录
（2）replaceState(data, title, url)与pushState()基本相同，不同之处在于replaceState()，只是替换当前url，不会增加/减少历史记录。
2.事件监听
7、web储存
1.特性
（1）设置、读取方便
（2）容量较大，sessionStorage约5M、localStorage约20M
（3）只能存储字符串，可以将对象JSON.stringify()编码后存储
2.window.sessionStorage
（1）生命周期为关闭浏览器窗口
（2）在同一个窗口下数据可以共享
3.window.localStorage
（1）永久生效，除非手动删除
（2）可以多窗口共享
4.方法详解
（1）setltem(key, value)设置存储内容
（2）getltem(key)读取存储内容
（3）removeltem(key)删除健值为key的存储内容
（4）clear()清空所有存储内容
（5）key(n)以索引值来获取存储内容
5.其他
webSQL、IndexDB
8、应用缓存
1.优势
（1）可配置需要缓存的资源
（2）网络无连接应用仍可用
（3）本地读取缓存资源，提升访问速度，增强用户体验
（4）减少请求，缓解服务器负担
2.manifest文件格式
（1）顶行写CACHE MANIFEST
（2）CACHE:换行指定我们需要缓存的静态资源，如.css、image、js等
（3）NETWORK:换行指定需要在线访问的资源，可使用通配符
（4）FALLBACK:换行当被缓存的文件找不到时的备用资源
3.其他
（1）CACHE:可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
（2）可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制
（3）#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存
（4）chrome可以通过chrome:/lappcache-internals/工具和离线(offline)模式来调试管理应用缓存
五、DOM扩展
1.获取元素
（1）document.getElementsByClassName('class'):以伪数组的形式存在
（2）document.querySelector('selectotr'):通过选择器来选择，取的是第一个元素
（3）document.querySelectorAll('selector'):通过选择器选择，伪数组的形式存在
2.类名操作
（1）node.classList.add();添加
（2）node.classList.remove();删除
（3）node.classList.toggle();切换
（4）node.classList.container();检测是否存在
3.自定义属性
格式: data-*=""".
（1）js获取和设置:getAttribute & setAttribute :自定义属性可以通过js的方法获取,但有缺点，查询DOM比较麻烦;
（2）H5提供的方法: dataset获取所有的自定义属性dataset是以对象的形式存在，当他指定了多个值的时候，node.dataset则存储了所有的自定义属性的值。
（3）注意:当我们如下格式设置时，则需要以驼峰格式才能正确获取;<div data-my-name="itcast">这样获取Node.dataset[ 'myName']
六、表单
1.表单输入类型
email: <input type="email">输入邮箱格式
tel: <input type="tel">输入手机号码格式
url: <input type="url">输入url格式
number: <input type="number">输入数字格式
search : <input type="search">搜索框(体现语义化)
range: <input type="range">自由拖动滑块
color: <input type="color">拾色器
time: <input type="time">小时
date: <input type="date">年月日
datetime: <input type="datetime">时间输入框
month: <input type="month">年月
week: <input type="week">周
2.表单元素
（1）<datalist>:数据列表
（2）<keygen>:生成加密字符串
（3）<output>结果</output>输出结果
（4）<meter>:度量器
3.表单属性
placeholder占位符
autofocus自动获得焦点
multiple多文件上传
autocomplete自动完成
form表单
novalidate关闭验证
required必填项
pattern自定义验证
4.表单事件
（1）oninput用户输入内容时触发，可用于移动端输入字数统计
（2）oninvalid验证不通过时触发
七、视频&音频
1.audio
（1）标签: <audio src= ""></audio>
（2）属性: controls autoplay loop
（3）兼容处理: <audio controls> <sourcesrc="./music/See You Again.mp3"> <sourcesrc="./music/See You Again.wav"> <sourcesrc="./musiclSee You Again.ogg">浏览器 不支持HTML5音频播放<laudio>
2.video
（1）标签:<video src= ""></video>
（2）属性: autoplay controls loop
（3）兼容处理: <video src="" controls> <sourcesrc="./video/movie.mp4"> <sourcesrc="./video/movie.ogg">浏览器不支持HTML5视频播放</video>
标签：总结,缓存,元素,window,调用,HTML5,应用,拖拽 From： https://www.cnblogs.com/zhangyang2002/p/17635740.html