web前端学习：HTML5十个新特性
（一） 语义标签
（二）增强型表单
（三）视频和音频
（四）Canvas绘图
（五）SVG绘图
（六）地理定位
（七）拖放API
（八） WebWorker
（九） WebStorage
（十）WebSocket
（一） 语义标签
（二）增强型表单/表单2.0
1)新的input type
2)新的表单元素
<select><option>....
：数据列表，为input提供输入建议列表
：进度条，展示连接/下载进度
：刻度尺/度量衡，描述数据所处的阶段，红色(危险)=>黄色(警告)=>绿色(优秀)
：输出内容，语义上表示此处的数据是经过计算而输出得到的
3)表单元素的新属性
通用属性：
placeholder：占位提示文字
mutiple：是否允许多个输入
autofocus：自动获得输入焦点
form：指定输入元素所从属的表单，可以实现输入框放在表单外部并能被提交的效果
验证属性(了解即可)：
required：输入框内容不能为空
min：允许输入的数字最小值
max：允许输入的数字最大值
minlength：允许输入的字符串最小长度
maxlength：允许输入的字符串最大长度
pattern：输入框内容必须符合的正则表达式
（三）视频和音频
(1)Canvas绘图：H5原生技术，基于网页画布绘制2D位图绘图技术，善于表现细腻颜色
(2)SVG绘图：H5借鉴技术，基于SVG绘图空间绘制2D矢量图绘图技术，缩放不会失真
(3)WebGL绘图：尚不是H5标准技术，基于HTML5 Canvas提供硬件3D加速渲染；有一个非常强大3D扩展库：three.js
（四）Canvas绘图
H5原生技术，基于网页画布2D位图绘图技术，善于表现细腻颜色，可用于统计图表、页面游戏、地图应用、网页特效等。
使用Canvas的步骤：
Canvas自身是一个300*150的inline-block元素；注意：Canvas画布尺寸不能使用CSS设置——会对整个图像进行扭曲！
使用H5 Canvas API进行绘图：
var ctx = c2.getContext('2d');
//绘制矩形
ctx.fillStyle = '#000' 填充颜色/渐变色对象
ctx.strokeStyle = '#000' 描边颜色/渐变色对象
ctx.lineWidth = 1 描边线宽度
ctx.fillRect(x, y, w, h)： 填充矩形
ctx.strokeRect(x, y, w, h)： 描边矩形
ctx.clearRect(x, y, w, h)： 描边矩形
//绘制文本
ctx.font = '10px sans-serif'
ctx.textBaseline = 'alphabetic/top/bottom'
ctx.fillStyle = '#000'
ctx.strokeStyle = '#000'
ctx.fillText(txt, x, y) 填充文本
ctx.strokeText(txt, x, y) 描边文本
ctx.measureText(txt).width 测量文本基于当前字体设置的宽度
//绘制路径——概念上类似于PS中的钢笔工具
ctx.beginPath()
ctx.moveTo()
ctx.lineTo()
ctx.arc()
ctx.rect()
ctx.ellipse()
ctx.closePath()
-----------------------------
ctx.stroke() 基于现有路径进行描边
ctx.fill() 基于现有路径进行填充
ctx.clip() 基于现有路径进行裁切
//绘制图像
ctx.drawImage(img, x, y) 绘制图像(原始尺寸)
ctx.drawImage(img, x, y, w, h) 绘制图像(指定尺寸)
//绘图上下文变形和状态保持
ctx.rotate() 图像旋转
ctx.translate() 图像平移
ctx.scale() 图像缩放
------------------
ctx.save() 绘图上下文的保存
ctx.restore() 绘图上下文的恢复
2.Chart.js —— 了解
简单且灵活的JS图表绘制工具库，基于Canvas实现。类似于的工具还有ECharts、FreeChart、FusionCharts.....
官网：http://www.chartjs.org/
基本使用方法：
（五）SVG绘图
Scalable Vector Graphic，可缩放向量图
在H5标准之前的使用方法：SVG标签不能直接书写在网页中，只能编写在独立的XML文档中；
网页中进行嵌入
纳入H5标准后的使用方法：SVG标签可以直接书写在网页中。
Canvas与SVG的不同：
(1)Canvas是位图；SVG是矢量图
(2)Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)
(3)Canvas内容不能使用CSS；SVG内容可以使用CSS；
(4) Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定
常用的SVG图形：
(1)矩形
(2)圆形
(3)椭圆
(4)直线（没有fill只有stroke）
(5)折线（fill必须设置透明/stroke必须手工指定）
(6)多边形
(7)文本
(8)图像
扩展小知识：
（六）地理定位—— 了解
通过浏览器获取当前用户的所在地理坐标，以实现“LBS服务”（Location Based Service），如实时导航、周边推荐。
情形1：用户使用手机浏览器——可以根据内置GPS芯片读取数据
情形2：用户使用PC浏览器——可以根据电脑的IP地址进行反向查询(需要很大的IP分配库)
window.navigator.geolocation : {
watchPosition(){},
clearWatch(){},
getCurrentPosition(function(pos){
'定位成功'
定位时间：pos.timestamp
维度：pos.coords.latitude
经度：pos.coords.longitude
海拔：pos.coords.altitude
速度：pos.coods.speed
}, function(err){
'定位失败'
}){},
}
（七）拖放API
H5之前没有拖放API，可以使用“鼠标按下 + 鼠标移动”两个事件来模拟用户拖动事件。
H5之后专门提供了七个鼠标拖动相关事件句柄：
拖动的源对象(source)可能触发的事件：
dragstart：拖动开始
drag：拖动中
dragend：拖动结束
拖动的目标对象(target)可能触发的事件：
dragenter：拖动进入
dragover：拖动悬停
drop：松手释放
dragleave：拖动离开
注意：拖放API事件句柄中所有的事件对象都有一个dataTransfer属性（数据运输对象），用于在源对象和目标对象间传递数据。
源对象：event.dataTransfer.setData(key, value)
目标对象：var value = event.dataTransfer.getData(key)
（八） WebWorker
背景：Chrome浏览器中发起资源请求的有6个线程；但是只有1个线程负责渲染页面——称为UI主线程——浏览器中所有的代码只能由一个线程来执行。
问题：若浏览器加载了一个很耗时的JS文件(可能影响DOM树结构)，浏览器必须等待该文件执行完成才会继续执行后续的代码(HTML/CSS/JS等)——如果一个JS文件要执行10s(可能有很深的循环/递归等科学计算/解密)，会发生什么？——执行耗时JS任务过程中，会暂停页面中一切内容的渲染以及事件的处理。
解决方案：H5新特性——Web Worker
Worker的本质：就是一个执行指定任务的独立线程；且该线程可以与UI主线程进行消息数据传递。使用方法：
HTML文件中：
var w = new Worker('js/x.js')
w.postMessage('发送给Worker线程的消息');
w.onmessage = function(e){
e.data; //来自Worker线程的消息
}
JS文件中：
onmessage = function(e){
var data = e.data; //接收UI线程的消息
//执行耗时任务....
postMessage(result); //给UI线程发送消息
}
注意：Worker任务不允许直接操作DOM树，也不允许使用任何的BOM对象！需要的数据只能由UI主线程来传递，处理的结果也必须交由UI线程来显示。
（九） WebStorage
Web项目存储数据常用的方案：
(1)服务器端存储
1)数据库存储，如商品、用户等核心数据
2)Session/内存存储，如用户的登录信息
(2)客户端存储
3)Cookie存储，如用户偏好、访问历史，浏览器兼容性好但处理麻烦且容量限制
4)H5 WebStorage存储，如用户偏好、访问历史等安全要求的数据，老IE不兼容但易使用且容量大
H5WebStorage存储具体涉及到两个对象：
(1)window.sessionStorage：类数组对象，通过key=>value对存储字符串数据——会话级存储
添加数据：sessionStorage['key'] = 'value'
修改数据：sessionStorage['key'] = 'newValue'
删除数据：delete sessionStorage['key']
获得数据：var v = sessionStorage['key']
(2)window.localStorage：类数组对象，通过key=>value对存储字符串数据——本地/跨会话级/永久存储
添加数据：localStorage['key'] = 'value'
修改数据：localStorage['key'] = 'newValue'
删除数据：delete localStorage['key']
获得数据：var v = localStorage['key']
（十）WebSocket
感谢阅读
喜欢看小编文章的点个订阅或者喜欢！小编每天都会跟大家分享文章，也会给大家提供web前端学习资料。