毕业了，也曾迷茫于产品和技术以及工作的抉择，但是无论如何路还很长，需要学的很多，通往巅峰的路上总有许多挫折，好好加油~ 一些小总结写在这里记录自己的成长，努力总会有所回报。
了解HTML5
☞HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体！！！
例如： video 标签和 audio 及 canvas 标记
☞ 新特性：
1. 取消了过时的显示效果标记 <font></font> 和 <center></center> ...
2. 新表单元素引入
3. 新语义标签的引入
4. canvas标签（图形设计）
5. 本地数据库（本地存储）
6. 一些API
☞ 好处：
1. 跨平台
例如：比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是大多数人对HTML5有兴趣的主要原因。
☞ 缺点：
1. pc端浏览器支持不是特别友好，造成用户体验不佳
新语义标签
网页布局结构标签及兼容处理
<header></header>
<footer></footer>
<article></article>
<aside></aside>
<nav></nav>
<section></section>
....
http://www.w3school.com.cn/html/html5_semantic_elements.asp
多媒体标签及属性介绍
☞ <video></video> 视频
属性：controls 显示控制栏
属性：autoplay 自动播放
属性：loop 设置循环播放
☞ <audio></audio> 音频
属性：controls 显示控制栏
属性：autoplay 自动播放
属性：loop 设置循环播放
☞ video标签支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp
☞ 多媒体标签在网页中的兼容效果方式
<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属性：
autocomplete=on | off 自动完成
a=true | false 是否关闭校验
◆ input属性：
*autofocus ： 自动获取焦点
form：
list：
<input type="text" list="abc"/>
<datalist id="abc">
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
</datalist>
multiple： 实现多选效果
*placeholder ： 占位符 （提示信息）
*required： 必填项
HTMl5中的API
获取页面元素及类名操作和自定义属性
☞ document.querySelector("选择器")；
☞ document.querySelectorAll("选择器");
☞ classList.add("类名")
☞ classList.remove("类名");
☞ classList.contains("类名");
☞ classList.toggle("active");
☞ 自定义属性
data-自定义属性名
1. 获取自定义属性 Dom.dataset 返回的是一个对象
Dom.dataset.属性名 或者 Dom.dataset[属性名]
2. 设置自定义属性
Dom.dataset.自定义属性名=值 或者 Dom.dataset[自定义属性名]=值；
文件读取
☞ 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);
1. coords.latitude 维度
2. 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()