HTML5学习
HTML5简介
HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。
广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合。
语法规范
HTML5在语法规范上也做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。
特点：
1、更简洁
2、更宽松，单标签不用写关闭符号，双标签省略结束标签，html、head、body、colgroup、tbody可以完全省略
语义标签
HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。
新增语义标签
-
<nav>表示导航 -
<header>表示页眉 -
<footer>表示页脚 -
<section>表示区块 -
<article>表示文章 如文章、评论、帖子、博客 -
<aside>表示侧边栏 如文章的侧栏 -
<figure>表示媒介内容分组 与 ul > li 做个比较 -
<mark>表示标记 -
<progress>表示进度 -
<time>表示日期
尽量避免全局使用header、footer、aside等语义标签。
浏览器兼容性
在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement(‘tagName’)创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement(‘tagName’)来创建一遍，这样IE低版本也能正常解析HTML5新标签了。
在开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。
<!-- 注意：ie8以下的浏览器不支持h5标签-->
<!--解决办法： 引入html5shiv.js文件-->
<!-- 条件注释 只有ie能够识别-->
<!--[if lte ie 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->
表单
输入类型
- email 输入email格式
- tel 手机号码
- url 只能输入url格式
- number 只能输入数字
- search 搜索框
- range 范围 滑动条
- color 拾色器
- time 时间
- date 日期 不是绝对的
- –datetime 时间日期
- month 月份
- week 星期
表单元素
<datalist> 数据列表，与input 配合使用。
<input type=”text” list=”sex”>
<datalist id=”sex”>
<option>男</option>
<option>女</option>
<option>其它</option>
</datalist>
<******> 生成加密字符串
****** 元素的作用是提供一种验证用户的可靠方法。
****** 元素是**对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
<output> 表示输出 <meter> 表示度量器，不建议用作进度条 <progress> 表示进度条
表单属性
- placeholder 占位符
- autofocus 获取焦点
- multiple 文件上传多选或多个邮箱地址
- autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off)
- form 指定表单项属于哪个form，处理复杂表单时会需要
- novalidate 关闭验证，可用于
<form>标签 - required 必填项
- pattern 正则表达式 验证表单
表单事件
- oninput 用户输入内容时触发，可用于移动端输入字数统计
- oninvalid 验证不通过时触发
多媒体
在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放，但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得处理音频/视频播放变的非常复杂，并且移动设备的浏览器并不支持Flash插件。
音频
标签：<audio>
属性：
- autoplay 自动播放
- controls 是否显不默认播放控件
- loop 循环播放
- preload 预加载 同时设置autoplay时些属性失效
播放格式：
推荐的兼容写法：
<audio controls loop autoplay>
<source src="music/yinyue.mp3">
<source src="music/yinyue.ogg">
<source src="music/yinyue.wav">
抱歉,你的浏览器不支持改功能,请升级浏览器!
</audio>
视频
标签：<video>
属性：
- autoplay 自动播放
- controls 是否显示默认播放控件
- loop 循环播放
- preload 预加载，同时设置了autoplay，此属性将失效
- width 设置播放窗口宽度
- height 设置播放窗口的高度
支持播放的格式：
推荐的兼容写法：
<video controls autoplay>
<source src="video/movie.mp4">
<source src="video/movie.ogg">
<source src="video/movie.webm">
抱歉,浏览器不支持该功能!
</video>
DOM扩展
获取元素
1、document.getElementsByClassName (‘class’) 通过类名获取元素，以类数组形式存在。
2、document.querySelector(‘div’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。
3、document.querySelectorAll(‘selector’) 通过CSS选择器获取元素，以类数组形式存在。
类名操作
1、Node.classList.add(‘class’) 添加class
2、Node.classList.remove(‘class’) 移除class
3、Node.classList.toggle(‘class’) 切换class，有则移除，无则添加
4、Node.classList.contains(‘class’) 检测是否存在class
Node指一个有效的DOM节点，是一个通称。
自定义属性
- 格式：data-*=”“，例如data-info=”我是自定义属性”。
- 取值：通过Node.dataset[‘info’] 我们便可以获取到自定义的属性值。Node.dataset是以类对象形式存在的。
- 注意事项：当我们如下格式设置时，则需要以驼峰格式才能正确获取。
- 案例：data-my-name=”zhangsan”，获取Node.dataset[‘myName’]
新增API
多媒体
方法：load() 加载、play() 播放、pause() 暂停
属性：
- currentTime 视频播放的当前进度
- duration:视频的总时间
- paused:视频播放的状态
事件：
- oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
- ontimeupdate:通过该事件来报告当前的播放进度.
- onended:播放完时触发
全屏：video.webkitRequestFullScreen();
拖拽
在HTML5的规范中，我们可以通过为元素增加draggable=”true”来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。
拖拽元素：页面中设置了draggable=”true”属性的元素。
目标元素：页面中任何一个元素都可以成为目标元素。
事件监听：
- 拖拽元素
- ondrag 应用于拖拽元素，整个拖拽过程都会调用
- ondragstart 应用于拖拽元素，当拖拽开始时调用
- ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
- ondragend 应用于拖拽元素，当拖拽结束时调用
- 目标元素
- ondragenter 应用于目标元素，当拖拽元素进入时调用
- ondragover 应用于目标元素，当停留在目标元素上时调用
- ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
- ondragleave 应用于目标元素，当鼠标离开目标元素时调用
历史
window.history，对象我们可以管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。
地理定位
获取用户地理信息的API，这样使得可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)。
获取地理信息方式
1、IP地址
2、三维坐标
- GPS
- Wi-Fi
- 手机信号
3、用户自定义数据
隐私
HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。
API
navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息。
navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息。
1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。
- Coords(坐标)
- position.coords.latitude纬度
- position.coords.longitude经度
2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error
3、可选参数 options 对象可以调整位置信息数据收集方式
Web存储
h5中提供两种web存储方式 ：
- window.sessionStorage，session（会话，会议） 5M 当窗口关闭是数据销毁 内存
- window.localStorage，20M 永久生效 ，除非手动删除 清理垃圾 硬盘上
特性
1、设置、读取方便
2、容量较大，sessionStorage约5M、localStorage约20M
3、只能存储字符串，可以将对象JSON.stringify() 编码后存储
window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享
window.localStorage
1、永久生效，除非手动删除
2、可以多窗口共享
方法
- setItem(key, value) 设置存储内容
- getItem(key) 读取存储内容
- removeItem(key) 删除键值为key的存储内容
- clear() 清空所有存储内容
- key(n) 以索引值来获取存储内容
全屏
HTML5规范允许用户自定义网页上任一元素全屏显示。
requestFullscreen() 开启全屏显示
cancleFullscreen() 关闭全屏显示
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
网络状态
window.online用户网络连接时被调用
window.offline用户网络断开时被调用
window.addEventListener('online',function () {
alert('网络连接已建立!');
});
window.addEventListener('offline',function () {
alert('网络连接已断开!');
});
应用缓存
HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。
优势
1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源，提升访问速度，增强用户体验
4、减少请求，缓解服务器负担
缓存清单
一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型。
例如创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest=”demo.appcache”。
manifest文件格式
1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符
4、FALLBACK: 当前页面无法访问时退回的页面(回退; 后退)
其它
1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制
CACHE:需要缓存那些资源.
NETWORK:不需要缓存那些资源，必须在网络下面才能访问.
FALLBACK:当访问不到某个资源时，自动由另外一个资源替换.
3、#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存