HTML5主要新特性（新的语义标签、新表单元素、API、canvas标签）

了解HTML5

HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体！！！
例如： video 标签和 audio 及 canvas 标记
☞ 好处：
1. 跨平台
例如：比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是大多数人对HTML5有兴趣的主要原因。

☞ 缺点：
1. pc端浏览器支持不是特别友好，造成用户体验不佳

新语义标签

网页布局结构标签及兼容处理

  <header></header>
  <footer></footer>
  <article></article>
  <aside></aside>
  <nav></nav>
  <section></section>

更多语义标签以及兼容性请点击这里

多媒体标签及属性介绍

☞ <video></video> 视频

• 属性：controls 显示控制栏
• 属性： autoplay 自动播放
• 属性：loop 设置循环播放

☞ <audio></audio> 音频

• 属性：controls 显示控制栏
• 属性：autoplay 自动播放
• 属性：loop 设置循环播

☞ video标签支持的格式
请点击 链接

☞ 多媒体标签在网页中的兼容效果方式

<video>
		<source src="code/多媒体标签/trailer.mp4">
		<source src="trailer.ogg">
		<source src="trailer.WebM">
</video>

新表单元素及属性

智能表单控件

<input  type="email">

email: 输入合法的邮箱地址
url： 输入合法的网址
number： 只能输入数字
range： 滑块
color： 拾色器
date： 显示日期
month： 显示月份
week ： 显示第几周
time： 显示时间

表单属性

• 新的form、input属性详细内容请点击属性

HTML5中的API

获取页面元素及类名操作及自定义属性

☞ document.querySelector(“选择器”)；

• 备注：
  选择器： 可以是css中的任意一种选择器，通过该选择器只能选中第一个元素。

☞ document.querySelectorAll(“选择器”);

• 备注：
  与document.querySelector区别： querySelectorAll 可以选中所有符合选择器规则的元素，返回的是一个列表。querySelector返回的只是单独的一个元素

☞ Dom.classList.add(“类名”): 给当前dom元素添加类样式

☞ Dom.classList.remove(“类名”); 给当前dom元素移除类样式

☞ classList.contains(“类名”); 检测是否包含类样式

☞ classList.toggle(“active”); 切换类样式（有就删除，没有就添加）

文件读取

☞ FileReader

• FileReader —接口有3个用来读取文件方法返回结果在result中
• readAsBinaryString —将文件读取为二进制编码
• readAsText —将文件读取为文本
• readAsDataURL —将文件读取为DataURL

☞ FileReader 提供的事件模型

• onabort —中断时触发
• onerror —出错时触发
• onload —文件读取成功完成时触发
• onloadend —读取完成触发，无论成功或失败
• onloadstart —读取开始时触发
• onprogress —读取中

获取网络状态

☞ 获取当前网络状态

• window.navigator.onLine 返回一个布尔值

☞ 网络状态事件
1. window.ononline
2. window.onoffline

获取地理定位

☞ 获取一次当前位置
window.navigator.geolocation.getCurrentPosition(success,error);

• coords.latitude 维度
• coords.longitude 经度

☞ 实时获取当前位置
window.navigator.geolocation.watchPosition(success,error);

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案，使用sessionStorage和localStorage存储数据。
☞ localStorage：

1. 永久生效
2. 多窗口共享
3. 容量大约为20M

• window.localStorage.setItem(key,value) 设置存储内容
• window.localStorage.getItem(key) 获取内容
• window.localStorage.removeItem(key) 删除内容
• window.localStorage.clear() 清空内容

☞ sessionStorage：

1. 生命周期为关闭当前浏览器窗口
2. 可以在同一个窗口下访问
3. 数据大小为5M左右

• window.sessionStorage.setItem(key,value)
• window.sessionStorage.getItem(key)
• window.sessionStorage.removeItem(key)
• window.sessionStorage.clear()

canvas标签

关于canvas标签请点击链接
更多关于HTML5的详细内容请参考W3School官方网站