前端知识点总结——H51.html5新特性（1）新语义标签（2）增强形式*（3）音频视频（4）Canvas绘图（5）SVG绘图（6）Geolocation（7）DynamicAPI(8)WebWorker(9)WebStorage(10)WebSocket2.增强形式1.新增输入类型H4:text;checkbox;password;radio;submit;reset;File;H5：电子邮件；网址；号码；搜索；颜色；日期；月份；星期2。新表单元素H4:input;button;select;textareaH5:datalist;progress;meter;output3.html5新特性---datalist(数据列表)datalist本身是不可见的datalist提供输入输入建议列表3.1：html5新特性---progress（进度条）左右摇动进度条指定进度值Progressbar3.2:html5新特性---Meter（刻度）Meter：用于标记一个进度条的范围值：不可接受（红色），可接受（黄色），优秀（绿色）=”currentvalue”>3.3:html5newfeature---output输出：输出，语义标签，无任何外观样式，样式相当于span商品单价：3.50采购数量：小计：<output>7.003.4:html5新特性—(表单元素新属性)H4:type;id;value;name;style;readyonly;disabled;checkedH5:(1)placeholderplaceholder(2)autofocus自动获取输入焦点(3)multiple允许在输入框中输入多个值，使用逗号分隔值(4)表单用于将输入域放在表单外(5)requiredRequiredblank(6)maxlength最大字符串长度(7)minlength最小字符串长度(8)min指定最小值(9)max指定maximumvalue(10)pattern指定输入内容符合正则表达式3.5html5新特性--视频和音频(key)Flash被H5替换Flash绘图(AS/Flex)->canvas/svgFlash动画->canvas/svgtimerFlashvideoandaudioPlay->video/audioFlashclientstorage->webstorage3.6:H5新特性-视频播放本身是一个300*150的inline-block元素成员属性：autoplay是否自动播放控件是否显示控件静音是否静音循环是否循环播放海报在播放第一帧广告（图片）前预加载视频加载策略auto：预加载一定长度的视频和元数据metadata：只预加载元素个数（size，duration）,firstframe)none:不加载任何内容js对象属性:currentTime当前播放持续时间durationtotaldurationpaused:当前视频是否处于暂停状态volume(0~1)volumeplaybackRate:播放速率:大于1快速播放小于1慢速播放js成员方法play()播放视频pause()暂停视频播放js事件onplay视频开始播放时，触发事件onpause视频暂停时，触发事件3.7：H5新特性—音频默认为一个内联块元素300*30，但是没有controls属性，则显示：none；成员属性：autoplay是否Autoplaycontrols是否显示控件muted是否静音loop是否循环预加载视频加载策略auto：预加载一定长度的视频和元数据metadata：只预加载元素个数（size，duration，firstframe）none:不加载任何内容js对象属性currentTime当前播放时长durationtotaldurationpaused:当前视频是否处于暂停状态volume(0~1)volumeplaybackRate:播放速率:大于1快放小于1慢放js成员方法play()playvideopause()pause视频播放js事件onplay在视频开始播放时触发事件onpause视频暂停时触发事件3.8html5新特性——canvas绘制（关键点）网页实时趋势图、抢红包、网页游戏、地图应用..(1)SVG绘图二维矢量绘图技术，其中2000年出现，后来被并入h5(2)Canvasdrawing二维位图绘制技术，由H5提出(3)WebGLdrawing3D绘图技术，目前还没有被纳入H5标准Canvas绘图难点：(1)坐标系(2)话多3.9html5新特性-canvas:Canvas是H5提供的绘图基础您的浏览器版本太低，请升级默认的Canvas标签在浏览器中是300*150inine-block，canvas的宽高属性只能用js/properties赋值。不能为它们分配CSS样式。每个画布上只有一个“画笔”对象——使用这个对象来绘制varctx=canvas.getContext("2d");获取画布的画笔对象(1)使用画布绘制一个矩形(rectangle)，矩形定位点在其左上角ctx.lineWidth=1;笔画宽度（边宽）ctx.fillStyle="#999";填充样式ctx.strokeStyle="#000";笔触样式ctx.fillRect(x,y,w,h);填充矩形ctx.strokeRect(x,y,w,h);描边矩形ctx.clearRect(x,y,w,h);清除矩形内的所有图形(2)使用画布绘制文字ctx.textBaseline="alphabetic"文字基线ctx.font="12pxsans-serif";文本大小和字体ctx.fillText(str,x,y);填充一段文字ctx.strokeText(str,x,y)描边一段文字ctx.measureText(str);测量文字的宽度4.Canvas绘图---（重点）路径路径：由多个坐标点组成的任意形状，路径不可见，可以用来“画图”edge","Fill"。复杂图形依赖路径ctx.beginPath();开始新路径ctx.closePath();关闭当前路径ctx.moveTo(x,y);移动到指定点ctx.lineTo(x,y);从当前点到指定点绘制直线ctx.arc(cx,cy,r,start,end);绘制圆弧cx,cy圆心r半径start,end起始角和结束anglearcdegree0~2*Math.PIangle=>radiann*Math.PI/180=>radianctx.stroke();strokectx.fill();fill4.1Canvas绘图---（重点）图像画布属于客户端技术，图片保存在服务端，所以浏览器先下载，然后绘制图片，等待图片下载完成。varp3=newImage();p3.src="x.jpg”;#下载指定图片p3.onload=function(){#当图片下载成功后，触发事件console.log(p3.width);ctx.drawImage(p3,x,y);//drawtheoriginalsizepicturectx.drawImage(p3,x,y,w,h);//pullStretchthepicture}4.2Canvas绘图---（强调）image->deformedcanvas绘图有同样的变形技术，即可用于在绘图过程中对某个图形/图像进行变形：rotate();translate();translatetheoriginctx.旋转（弧度）；以画布原点为轴旋转绘制的图像。ctx.translate(x,y);将画布原点平移到指定位置ctx.save();保存画笔当前所有状态值ctx.restore());恢复画笔上次保存时的所有状态值Composition，每条线都有自己的颜色和方向，可以无限放大，但是细节不够丰富Canvasdrawingsvgdrawingtype2Dbitmap2D矢量图如何画图使用JS代码绘制使用标签绘制事件绑定每个图形不是一个元素，不能直接绑定事件。每个图形都是一个元素，可以直接绑定到事件监控应用程序。游戏、特效贴图SVG诞生于2000年，早期作为XML扩展应用出现。H5标准采用了常见的SVG标签作为标准，但也有一些被舍弃了。svg如何使用本身就是一个300*150的inline-block矩形圆椭圆直线多边形6：HTML5新特性——矩形6.1：HTML5新特性—circle6.2：HTML5新技术--svg（重点）—ellipserx:水平半径ry:垂直半径6.3:html5新技术--svg（重点）—直线6.4：html5新技术--svg（重点）—polyline6.5:html5新技术--svg（重点）—文本文本内容6.6:html5new技术--svg（强调）--image6.7：html5新技术--svg（重点）—gradientobjectbutton1解决办法：新建一个webWoker线程执行1.js程序，让UI继续执行绘制页面内容；10.1：woker线程浏览有缺点浏览器不允许worker线程操作DOM和BOM元素原因：浏览器只允许UI线程操作DOM/BOM，即woker执行的代码不能包含DOM操作/类似jquery的不行。10.2:Worker线程可以发送或接收UI线程数据*Woker发送数据-->UI接收数据1:workerpostMessage(rs);2:UIvarw2=newWorker("01.js");w2.onmessage=function(e){e.data}*UI发送数据-->Worker接收数据1:UIvarw2=newWoker("01.js");w2.postMessage(stringMsg);2：Workeronmessage=function(e){e.data}项目中使用Worker（1）只要js中有DOM/BOM，就不能使用Worker（2）Worker适合执行耗时的JS任务、数据分析与统计11：HTML5新特性——WebStorage存储用户在浏览器中的隐私数据：访问历史；自定义样式，客户端数据存储技术（1）Cookie技术兼容性好，数据不能超过4kb，操作复杂（2）Flash依赖Flash播放器（3）H5WebStorage兼容性差，8MB的(4)IndexedDB可以存储大量数据，不是标准的Session：session（操作过程）浏览器从打开某个网站的第一个网页[sessionstart]开始，中间可能[在会话中]打开多个页面，直到关闭浏览器[会话结束]。整个过程称为“会话”。一个websession的数据可以被该session中的所有页面读取或保存。一旦浏览器关闭，数据就会消失。示例：登录用户ID；nickname#savedatasessionStorage[key]=val;sessionStorage.setItem(key,val);sessionStorage.length//保存数量varkey=sessionStorage.key(i);//根据值返回左键#获取数据varval=sessionStorage[key]varval=sessionStorage.getItem(key);#清空数据sessionStorage.removeItem(key);sessionStorage.clear();(2)localStorage数据保存在磁盘上，数据可以跨会话，即使浏览器关闭，数据也保存下来。#保存数据localStorage[key]=val;localStorage.setItem(key,val);localStorage.length//保存数量varkey=localStorage.key(i);//根据值返回左边的key#获取数据varval=localStorage[key]varval=localStorage.getItem(key);#清除数据localStorage.removeItem(key);localStorage.clear();#如果localStorage中的数据被修改，会触发一个window.onstorage事件，可以监听这个Event，达到监听localStorage数据变化的目的，sessionStorage数据修改不会触发这个事件。12：HTML5的新特性之一——WebSocket——代码不复杂的原理HTTP协议：属于“请求-响应”模型，只有客户端发起请求，服务器才会返回响应消息。没有请求就没有响应。一个请求主体只能得到一个响应。在某些场景下，这种模式无能为力：实时股票走势图方案：长轮询（心跳请求）+AJAX——请求太频繁，服务器压力大，不够频繁，客户不满意。WebSocket协议：属于“广播+接收”，客户端连接到服务器后不会断开，连接是永久的。双方可以随时互相发送数据，发送消息：ws协议适用于：实现股票走势图ws服务器：php/java/node.js监听指定端口，也可以接收消息向对方发送消息。ws客户端：php/java/node.js/html5新特性发起连接请求，保持永久连接，向对方发送消息，接收消息。大师：利用HTML5新特性创建ws客户端（1)连接到ws服务器varsocket=newWebSocket("ws://127.0.0.1:9001");(2)向服务器发送消息socket.send(stringMsg);(3)从服务器接收消息socket.onmessage=function(e){e.data}(4)断开与服务器的连接socket.close();总结端口：apache默认端口80mysql默认端口3306https默认端口443webSocket默认端口9001
