HTML5的概念
HTML5并不仅仅是作为HTML标记语言的一个最新版本,更重要的是它制定了web应用开发的一系列标准, 成为第一个将web作为应用程序开发平台的HTML语言
HTML5定义了一系列的新元素, 如新语义标签, 智能表单, 多媒体标签, 可以帮助开发者创建互联网应用, 同时有令人眼花的css3, 还提供了一些JavaScript的API(应用程序接口), 列如: 地理定位 重力感应, 硬件访问, 可以在浏览器内实现类似于原生应用, 制作webAPP, 甚至结合Canvas可开发一些网页板的小游戏啊
H5其实只是一个泛称, 是由HTML5+CSS3+JavaScript等技术结合而成的一个应用开发平台
HTML5的兼容性
新增的部分有兼容性的问题, 并不是所有的html5都是IE9兼容的, 有一些属性是需要IE10或者更高级的浏览器才能兼容, 所以, html5更多应用在移动端的方面, 因为移动端搭载的浏览器比较高级
HTML5的骨架
代码示例:
Title
HTML5骨架是没有兼容的问题的
反问：如果在xt的文档DTD里面书写h5的内容，会带来兼容问题么？
答：跟你用什么文档DTD没有关系 主要跟浏览器有关系
html5新增的标签
新增的6大结构标签：
（1）header 网站头部 （2）nav 导航栏（3）section 类似于div （4）aside 文件侧栏（5）article 文章/文本内容（6）footer 网站脚部
作用：跟div一模一样 ，就是增加了语义性 更加利于seo优化
由于html5新增的标签有兼容问题，所以我们需要做兼容！怎么实现？
（1）利用document.creatElement()去创建html5的新标签，同时设置成块元素（相对麻烦）
1
（1）借助于第三方的JS框架 =>html5shiv.min.js （推荐）配合IE的hack实现最佳兼容
10
注明：还有一些新增的用到的不多，所以了解即可，上述六个结构标签是最为常用的
html5新增的智能表单
以前学过 type =text ，submit ，reset，radio。。。。
type="email" 限制用户输入必须为Email类型
type="url" 限制用户输入必须为URL类型
type="date" 自动生成一个日期控件
type="number" 限制用户输入必须为数字类型
type="range" 产生一个进度条的表单
type="search" 产生一个搜索意义的表单
type="color" 生成一个颜色选择表单
总结：智能表单的兼容比较大，在移动端用的较多，移动端会自动调取手机本身的控件（不同手机之间会略有不同，但如果需要高度自定义，就需要用JS去写了）
智能验证表单
（1）required => 验证表单是否为空，必须配合form表单来使用
（2）pattern => 自定义验证表单规则，匹配正则 一般用于设置用户名的格式, 或者密码的难度
（3）invalid => 验证失败的时候触发的事件
（4）dom.setCustomValidity() => 自定义弹出的内容 参数：string 自定义的内容
表单的新属性
（1）placeholder => 占位文本，体验更加
（2）autofocus => 自动获取焦点 dom.focus（）
（3）autocompleted => 提交一次后下次自动补全 注意：必须提交一次之后，同时必须要有name属性
（4）multiple => 配合file控件实现多选
（5）form => 配合form表单的id值实现关联，在任意位置都可以被提交，但是不建议这么写
代码示例:
智能感应
利用表单的list=“datalist的id值”与datalist这个标签取得联系实现的
html5调用视频
直到现在，我们的视频依旧采用第三方的网站播放视频，并且需要借助于flash技术
在html5中，我们只需要借助于video这个标签来实现视频的播放
标签：video
标签属性：
（1）autoplay =>视频默认加载完播放
（2）controls =>播放的控件
（3）loop =>控制循环
（4）poster =>在视频没有播放的时候的预览图片
我们发现每一个浏览器支持的格式都不一样，所以我们需要利用source标签实现兼容（MP4格式已经全被兼容）
视频的API：（注：是JS的，JQ去使用需要转化对象）
（1）play（）//控制视频播放
（2）pause（）//控制视频暂停
（3）load（）//重新加载视频或者音频
音频：audio的用法与视频一模一样
代码示例: 视频
代码示例: 音频
JS获取元素的新方式
（1）document.querySelector('selector') 通过CSS选择器获取元素，符合匹配条件的第1个元素。可以传入复合选择器（如：.box li, .box > li input[type=’button’]）等
（2）document.querySelectorAll('selector') 通过CSS选择器获取元素，以类数组形式存在。可以传入复合选择器（如：.box li, .box > li input[type=’button’]）等
JS类名操作
（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节点，是一个通称。
自定义属性
在HTML5中我们可以自定义属性，其格式如下data-*=""，例如
data-info="我是自定义属性"，通过Node.dataset['info'] 我们便可以获取到自定义的属性值。
Node.dataset是以对象形式存在
当我们如下格式设置时，则需要以驼峰格式才能正确获取
data-my-name="itcast"，获取Node.dataset['myName']
自定义进度条
（1）Progress
（2）Meter => 有颜色的切换
总结：两种标签运用的不多，因为不能深度自定义，实际开发中，多是自己用div模拟
网络状态
我们可以通过window. navigator.onLine来检测，用户当前的网络状况，返回一个布尔值
addEventListener 进行绑定online用户从无网的网络状态被连接时调用
addEventListener 进行绑定.offline用户网络从有网到断开时被调用
事件是给window绑订的
地理定位
在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)
获取地理信息方式
1、IP地址
2、三维坐标
GPS（Global Positioning System，全球定位系统）
Wi-Fi
手机信号
3、用户自定义数据
如下图对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。
隐私
HTML5 Geolocation 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。
API详解
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
navigator.geolocation.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。
position.coords.latitude纬度
position.coords.longitude经度
position.coords.accuracy精度
position.coords.altitude海拔高度
2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error
3、可选参数 options 对象可以调整位置信息数据收集方式
a) enableHighAccuracy 高精度模式
b) timeout 超时设置，单位为ms
c) maximumAge表示浏览器重新获取位置信息的时间间隔，单位为ms
百度地图的用法：
官网：http://lbsyun.baidu.com/
（1）进入官网 直接找到javascript API
（2）直接找到示例DEMO，复制源代码
（3）需要获取密钥 （自己申请，需要一到两个工作日）
（4）创建应用（填写浏览器端）
（5）利用密钥去替换script标签里面的“你的密钥”
代码示例:
普通地图&全景图
多媒体
- 常用方法：load() 加载、 play() 播放、 pause() 暂停
Jq没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必须使用原生的js方法
- 常用属性：
a) currentTime 视频播放的当前进度、
b) duration:视频的总时间 100000/60
c) paused:视频播放的状态.
- 常用事件：
a) oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
b) ontimeupdate:通过该事件来报告当前的播放进度.
c) onended:播放完时触发—重置
参考文档
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
- 页面结构：
视频播放器
- Js代码：