前端复习之HTML5
HTML5 Day01：
*概念：
*HTML5之后，声明不在出现版本信息
*HTML5永远不可能离开JavaScript。
*HTML5在移动端支持好于PC端
*HTML新表单：
*input新类型：
1 *email类型 - 验证是否包含“@” 2 *url类型 - 验证是否包含"http://" 3 *tel类型 - 只在移动端显示 4 *number类型 5 *range类型 6 *date类型 7 *color类型
*表单新元素：
1 *datalist元素 - 类似于select元素 2 *datalist元素 - 预定义数据内容（option） 3 *使用<input>元素的list属性 4 *prograss元素 - 进度条 5 *max - 设置最大值 6 *value - 设置当前进度 7 *meter元素 - 刻度 8 *min、max - 最小最大值 9 *value - 设置当前值 10 *low - 设置低预警 11 *output元素
*表单新属性：
1 *placeholder - 提供默认提示内容 2 *multiple - 允许输入多个值，多个值之间使用"," 3 *autofocus - 自动获取焦点 4 *form - 允许表单元素定义在表单之外
*表单新验证
*验证属性：
1 *required属性 2 *验证当前元素值是否为空 3 *pattern属性 4 *使用正则表达式验证当前元素是否匹配 5 *注意 - 并不能验证当前元素值是否为空 6 *min和max属性 7 *验证当前元素最小值或最大值 8 *一般适用于number、range 9 *minlength和maxlength属性 10 *minlength - 验证当前元素值的最小长度 11 *输入值时，允许输入小于指定值 12 *提交表单时，验证元素值最小长度 13 *注意 14 *minlength并不是HTML5新属性 15 *maxlength - 验证当前元素值的最大长度 16 *输入值时，长度不能大于指定值 17 *validity属性 18 *表单验证HTML5提供一种有效状态 19 *有效状态通过validityState对象获取到 20 *validityState对象可通过.validity属性而得到
*验证（有效）状态：
1 *validityState对象提供了一系列的有效状态 2 *通过这些有效状态，进行判断 3 *注意 4 *所有验证状态必须配合上述的验证属性使用 5 *验证状态 6 *valid 7 *作用 - 判断当前元素值是否正确 8 *注意 9 *该状态返回true，表示正确 10 *valueMissing 11 *作用 - 判断当前元素值是否为空 12 *用法 - 配合required属性使用 13 *typeMismatch 14 *作用 - 判断当前元素值的类型是否匹配 15 *用法 - 配合email、number、url等 16 *patterMismatch 17 *作用 - 判断当前元素值是否与指定正则表达式 18 匹配 19 *用法 - 配合pattern属性使用 20 *tooLong 21 *作用 - 判断当前元素值得长度是否正确 22 *用法 - 配合maxlength属性 23 *注意 24 *使用maxlength属性后，实际不可能出现长度大于maxlength的值 25 *toolLong很难出现这种情况 26 *rangeUnderflow 27 *作用 - 判断当前元素值是否小于min属性 28 *用法 - 配合min属性 29 *注意 - 并不能与max属性值进行比较 30 *stepMismatch 31 *作用 - 判断当前元素值是否与step设置相符 32 *用法 - 配合step使用 33 *注意 - 并不能与min或max属性值进行比较 34 *customError 35 *用法 - 配合setCustomValidity（）方法 36 *setCustomValidity（）方法 37 *作用 - 设置自定义的错误提示内容 38 *问题 - 使用该方法设置错误信息 39 *当输入正确时，调用该方法将信息设置为空("") 40 *不能使用上述有效状态的任何一种判断输入是否正确（所以状态）
HTML5 Day02：
*音频处理
*视频处理
*Flash技术处理HTML页面中的视频内容
*包含音频、动画、网页游戏等
*特点：
*浏览器原生不支持
*性能不好
*智能移动端不支持
*HTML5 - 目前用于替代Flash技术的最好选择
*几乎所有浏览器原生支持<vedio>元素
*性能更好
*支持智能移动端
*视频处理
1 *<vedio>元素 2 *如果当前浏览器不支持<video>元素 3 在<video>元素内编写提示内容 4 *属性 5 *src - 引入视频文件的路径 6 *autoplay - 自动播放视频 7 *使用<source>元素 8 <vedio> 9 <source src="一种视频格式"/> 10 <source src="一种视频格式"/> 11 <source src="一种视频格式"/> 12 </vedio>
1 *<video>支持的视频格式 2 *MP4格式 - 目前比较主流 3 *OGG格式 - 多用于移动端 4 *WebM格式 - 目前唯一支持超高清格式 - 2015 5 *HTML页面中支持超高清格式(HTML5) 6 *由Google公司推出的 7 *<video>元素的属性 8 *src - 引入视频文件的路径 9 *autoplay - 自动播放视频 10 *controls - 提供控制面板 11 *loop - 表示循环播放 12 *poster - 设置播放之前显示的图片 13 *width和height - 设置显示视频的宽度和高度 14 *preload - 预加载 15 *auto - 自动加载 16 *none - 不加载 17 *metadata - 只加载视频的基本信息（不含视频）
1 *高级内容 2 *方法 3 *play() - 播放视频 4 *pause() - 暂停视频 5 *load() - 加载视频 6 *canPlayType() - 判断当前浏览器是否支持指定视频格式 7 *事件 8 *play - 当前视频播放时被触发 9 *pause - 当视频暂停时被触发 10 *ended - 当视频结束时被触发 11 *error - 当视频错误时被触发 12 *canplay - 不考虑整体情况下，只要能播放，就播放 13 *canplaythrough - 考虑整体情况下，只要能播放就播放 14 *progress - 表示视频加载的进度 15 *属性 - 用于判断 16 *paused - 表示判断当前视频是否暂停 17 *返回值Boolean值，true暂停，false播放 18 *ended - 表示判断当前视频是否播放完毕 19 *返回值Boolean值，true表示完毕 20 *duration - 表示当前视频的时长 21 *currentTime - 表示当前视频播放的位置
*音频处理
1 *<audio> 2 *第一种 - 只支持一种音频格式 3 <audio src="路劲" controls></audio> 4 auto /play/controls 5 *第二种 - 同时引入多个音频格式 6 <audio> 7 <source src="一种音频格式"/> 8 <source src="一种音频格式"/> 9 <source src="一种音频格式"/> 10 </audio> 11 *<audio>元素支持音频格式 12 *MP3 - 目前最主流（mpeg音频解码器） 13 *OGG - ogg 14 *WAV wav
*Canvas(画布)
*基本内容
1 *简单来说，HTML5提供的新元素<canvas> 2 *Canvas在HTML页面提供画布的功能 3 *在画布中绘制各种图形 4 *Canvas绘制的图形与HTML页面无关 5 *无法通过DOM获取绘制的图形 6 *无法weight绘制的图形绑定DOM事件 7 *只能用Canvas提供的API 8 *Canvas用途 9 *在HTML页面中绘制图表（例如柱状图，饼状图） 10 *网页游戏 - Flash技术 11 *使用HTML5中的Canvas
1 *如何使用Canvas 2 *在HTML页面中定义<canvas>元素 3 *在JavaScript代码中 4 *获取<canvas>元素 5 *使用width和height属性 - 没有问题 6 *使用CSS样式 7 *通过style属性设置 - 绘制图形被拉伸 8 *通过style元素设置 - 按比例放大 9 *创建画布对象 10 *getContext("2d")方法 11 *参数必须是"2d"或"3d"(目前只绘制2d效果) 12 *使用Canvas提供的API
1 *绘制图形 2 *绘制矩形 3 *fillRect(x,y,width,height) 4 *x和y - 绘制矩形的左上角的坐标值 5 width和height - 矩形的宽度和高度 6 *strokeRect(x,y,width,height) - 空心矩形 7 *clearRect(x,y,width,height) - 清除指定区域的矩形 8 *设置颜色 9 *fillstyle - 设置填充颜色 10 *strokeStyle - 设置描边颜色 11 *globalAlpha - 设置透明度（0-1） 12 *渐变效果 13 * 线型渐变 14 createLinearGradient(x1,y1,x2,y2) 15 *x1和y1 - 基准线的起点坐标 16 *x2和y2 - 基准线的终点坐标 17 *扇形（射线）渐变 18 createRadiaGradient(x1,y1,r1,x2,y2,r2) 19 *x1,y1，r1 - 第一个基准圆的元素坐标值，半径 20 *x2,y2,r2 - 第二个基准圆的元素坐标值，半径 21 *设置渐变颜色 22 addColorStop(position，color) 23 *position - 设置渐变颜色的位置（0-1） 24 *color - 设置渐变颜色
HTML5 Day03：
*Canvas
*绘制图形
1 *方法 2 *fillText(text,x,t) - 实心文字 3 *text - 绘制的文字内容 4 *x和y - 绘制的坐标值 5 *strokeText(text,x,t) - 空心文字 6 *属性 7 *font - 类似于CSS中的font属性 8 *textAlign - 设置文字的水平方向对齐 9 *left - 左对齐 10 *center - 水平居中 11 *right - 右对齐 12 *textBaseline - 设置文字的垂直方向对齐 13 *top - 顶部对齐 14 *middle - （垂直）居中对齐 15 *bottom - 底部对齐 16 *hanging - 悬挂基线 17 *alphaetic - 字母基线 18 *注意 19 *无论是水平方向还是垂直方向对齐，基准线对齐并不是文字对齐
1 *阴影效果 2 *shadowColor - 设置阴影颜色 3 *shadowOffsetX - 设置水平方向阴影（0-没有阴影，负值-阴影向左，正值-阴影向右） 4 *shadowOffsetY - 设置垂直方向阴影 5 *shadowBlur - 设置阴影的模糊程度
1 *创建路劲 2 *（标识）方法 3 *beginPath() - 表示开始创建路径（必要） 4 *closePath() - 表示结束创建路径 5 *设置方法 6 *Rect(x,y,width,height) - 设置矩形形状 7 *x和y - 设置矩形的左上角坐标值 8 *width和height - 设置矩形的宽度和高度 9 *arc(x,y,radius,startAngle,endAngle,direction) -设置圆形形状 10 *x和y - 设置圆形的圆心坐标 11 *radius - 设置圆形的半径 12 *direction - 按照顺时针或逆时针绘制 13 *startAngle和endAngle - 设置圆形的起始和终点位置 14 *绘制方法 15 *stroke() - 绘制轮廓 16 *fill() - 绘制填充
1 *绘制线条（直线和折线） 2 *moveTo(x,y) - 设置这条线的起点坐标值 3 *lineTo(x,y) - 设置这条线的终点（折点）坐标值
1 *设置线条 2 *lineWidth - 设置线条的宽度 3 *默认值1px 4 *lineCap - 设置线条端点的形状 5 *butt - 默认值-平直 6 *round - 圆角 7 *square - 正方向键帽 8 *lineJoin - 设置两条线的交点 9 *round - 圆角 10 *miter - 尖角（默认） 11 *bevel - 斜角 12 *miterLimit - 配合lineJoin使用 13 *lineJoin设置为miter时，该属性值设置尖角的延伸范围
*Canvas处理图片
1 *绘制图片 2 *drawImage(img,x,y) - 按照图片原大小加载 3 *img - 当前加载（绘制）的图片 4 *x和y - 绘制图片的坐标值（左上角） 5 *drawImage(img,x,y,width,height) - 按照指定大小加载图片 6 *加载图片 7 *img - 当前加载（绘制）的图片 8 *x和y - 绘制图片的坐标值（左上角） 9 *width、height - 图片宽高 10 *注意 11 *必须保证图片加载（onload）完毕后，再来绘制 12 *平铺图片 13 *createPattern(image,type) 14 *type - 平铺方式 15 *repeat、no-repeat、repeat-x、repeat-y 16 *注意 17 *必须加载先（onload()） 18 *切割图片 19 *clip() - 切割（按创建路径方法使用） 20 *方法-context.beginPath();context.rect()或arc();context.clip(); 21 *画布方法 22 *scale() - 缩放 23 *x - 表示水平方向的缩放 24 *y - 表示垂直方向的缩放 25 *参数的取值 26 *1：不缩放 27 *<1：缩小 28 *>1：放大 29 *translate(x,y) - 重新定位（x,y） 30 *x和y：新的坐标 31 *rotate(旋转角度) - 旋转当前画布 32 *公式：degrees*Math.PI/180 33 *save() - 保存当前的画布属性、状态 34 *restore（） - 回复画布属性、状态
*Chart.js - Canvas的js库
1 *Chart.js - Canvas的js库 2 *作用 - 提供各种图表 3 *如何使用 4 *在HTML页面中映入Chart.js文件 5 *在HTML页面中定义<canvas>元素 6 *在JavaScript代码中 7 *获取<canvas>元素 8 *创建画布对象 - var context=canvas.getContext("2d") 9 *通过画布对象，创建Chart对象var chart=new Chart(context) 10 *利用Chart对象调用API方法 11 var data=[];chart.Pie(data); 12 *提供6种图表 13 *柱状图 - Bar(data,options) 14 *饼状图 - new Chart(ctx).Pie(data,options) 15 *曲线图 - Line() 16 *环形图 - Doughnut() 17 *雷达图 - Radar() 18 *极地区域图 - PolarArea()
HTML Day04：
*SVG
1 *基本内容 2 *svg并不属于HTML5专有内容-HTML5提供有关svg原生的内容 3 *svg简单说就是矢量图 4 *后缀名“.svg” 5 *svg使用的是XML语法 6 *概念 7 *svg是一种使用XML技术描述二维图形的语言 8 *svg特点 9 *svg绘制图形可以被搜索引擎抓取 10 *svg在图片质量不下降的情况下，被放大
1 *svg与canvas区别 2 *svg 3 - 不依赖分辨率 4 - 支持事件处理器 5 - 最适合带有大型渲染区域的应用程序 6 - 不适合游戏 7 *canvas 8 - 依赖分辨率 9 - 不支持事件处理器 10 - 能够以“.png”或“.jpg”格式保存结果图形 11 - 最适合图形密集型游戏 12 *用途 13 *网页中的一些小的图标 14 *网页中的动态特效
1 *绘制图形 2 *矩形元素 3 <rect x="" y="" width="" height =""/> 4 *圆形元素 5 <circle cx="" cy="" r=""/> 6 *椭圆元素 7 <ellipse cx="" cy="" rx="" ry=""/> 8 *直线元素 9 <line x1="" y1="" x2="" y2=""/> 10 *折线元素 11 <polyline points="起点x，起点Y 折点x，折点y 终点x,终点y" /> 12 *points - 设置起点折点终点，xy之间“，”，多点之间用“ ” 13 *折线的特点 - 默认将折线中的区域（起点到终点）， 14 默认提供黑色（改变fill="white" 15 *多边形元素 16 <polygon points= />
1 *特效元素 2 *渐变 3 *线型渐变 - <linearGradient>定义在<defs>元素中 4 *offset - 渐变颜色的位置 5 *stop-color 渐变颜色 6 *stop-opacity - 设置渐变颜色的透明度 7 <svg><defs> <linearGradient x1="%"y1=""x2=""y2=""> 8 <stop offset="%"stop-color="red"/> 9 <stop offset=""stop-color="green"/> 10 <stop offset=""stop-color="blue"/> 11 <linearGradient/></defs></svg> 12 *放射性渐变 - <radialGradient> 13 *滤镜 - 高斯模糊 14 *滤镜使用<filter>元素 15 *<feGaussianBlur>元素 - 高斯模糊 16 *in="SourceGraphic" 17 *stdDeviation - 设置模糊程度 18 *注意 - 定义在<defs>元素中
*TWO.js
1 *基本内容 2 *js库介绍 3 *three.js - 专门用于绘制三维图形 4 *two.js - 专门用于绘制二维图形 5 *two.js支持的格式 6 *svg - 默认 7 *Canvas - 8 *WebGL - 专门用于绘制图像 9 *如何使用js库 10 *在HTML页面中引入two.js文件 11 *在HTML页面中定义容器(<div>) 12 *在JavaScript代码中 13 *获取HTML中的容器 14 *创建two对象，讲该对象添加到容器中 15 new Two(params).appendTo(Element); 16 *使用two.js提供的API方法进行绘制 17 *利用two.js提供的方法设置图像 18 *利用update()方法进行绘制 19 *创建two对象 20 *构造器 - new Two (params) 21 *params参数 - 设置当前对象信息 22 *type - 设置当前使用格式 23 *svg - 默认值 24 *canvas 25 *webgl 26 *width和height - 宽高 27 *fullscreen - 设置是否全屏 28 *boolean值，true - 全屏 29 *设置样式 30 *fill 31 *stroke 32 *linewidth 33 *方法 34 *makeLine() - 线条 35 *makeCircle() - 36 *makeEllipse() - 椭圆 37 *makePolygon() - 多边形 38 *makeStar() - 星 39 *makeRectangle() - 矩形 40 *分组操作 41 *var group=two.makeGropu(objects); 42 *动画方法 43 *update() - 更新动画 44 *play() - 添加动画（循环） 45 *pause() - 删除动画 46 *设置绘制图形的样式 47 *调用Two对象的绘制方法绘制图形时，返回该图形对象 48 *通过该图形对象，设置相关属性值
1 *实际开发中 2 *多用svg 3 *不失真 4 *可被搜索 5 *页面优化 - 减少外部链接 6 *<a href= ""> 7 *<img src=""> 8 *Canvas - HTML绘制图形 9 *实际运行中，是以图片方式出现（。png） 10 *不能被搜索引擎抓取 11 *放大后失真 12 *游戏版本 13 *480*680 14 *1024*768 15 *svg内容 16 *内容量大 17 *静态绘制图形 18 *动态动画效果 19 *专门提供事件 20 *网上关于svg的资料很少（没有书籍） 21 *svg的规范（w3c英文） 22 *svg或canvas在页面中定义 23 *是只能定义一个元素，还是可以多个元素？ 24 *在一个HTML页面中可以定义多个<svg>或<canvas>元素 25 *svg还是canvas都是允许同时定义（绘制）多个图形 26 *在实际中开发中的使用 27 *使用率不高 28 *svg图片一般都是由UI设计师完成 29 *svg即使是由我们自己来设计 30 *目前网络上很多专门提供现成的svg图片的网站 31 *使用js库
HTML5 Day05:
*Geolocation(地理定位)
1 *基站定位 2 *地理定位 - 地球经度纬度的相交点 3 *实现地理定位的方式 4 *GPS - 美国的，依靠卫星定位 5 *北斗定位 - 纯国产，惯性定位和卫星技术 6 *基站定位 - 移动运营商创建基站（提供信号源） 7 *基于互联网 - IP地址（PC端和移动端） 8 *目前很多浏览器都具有定位功能 9 *HTML5中地理定位 10 *地理定位功能并不是属于HTML5转悠内容 11 *由Google公司提供 12 *Google Map产品 13 *中国 - 国内不能使用Google公司所有服务和产品 14 *百度地图和高德地图 15 *百度地图 16 *地址 - http://developer.baidu.com/map/ 17 *如何使用百度地图 18 *在HTML页面中 19 *引入百度地图的js 20 <script type="text/javascript" 21 src="http://api.map.baidu.com/apiv=2.0&ak=ShVq3Rof0jD6GhFyTBkSqxegqC2jhbBX"> 22 </script> 23 *定义显示地图的容器 24 <div id="" style=""></div> 25 *在JavaScript代码中 26 *创建百度地图的Map对象 27 var map =new BMap.Map(容器id); 28 *进行地图的初始化 29 map.centerAndZoom(); 30 *百度地图的组件 31 *核心类 - Map类 32 *构造器 - BMap.Map(容器ID)； 33 *方法 34 *centerAndZoom() - 初始化方法 35 *addControl() - 添加控件 36 *addOverlay() - 添加标注 37 *Control类 - 控件类 38 *ScaleControl类 - 表示地图的比例尺 39 *构造器 - 创建比例尺对象 40 *NavigationControl类 - 表示移动缩放控件 41 *构造器 - 创建移动缩放控件 42 *Overlay类 - 遮盖物类 43 *Maker类 - 表示地图的一个标注 44 *构造器 - Maker(point) 45 *Point类 - 标注类
*拖放（拖拽）API
1 * 实现拖拽效果 2 * 要拖拽的文件 - 源元素 3 * 拖拽到哪去 - 目标元素 4 * 目前实现拖拽效果 5 * 使用原生DOM就能实现 - 最麻烦 6 * 使用jQuery的插件 - 拖拽效果 7 * HTML5中提供的拖拽功能 8 * HTML5拖拽 9 * 源元素事件 10 * dragstart - 当鼠标开始拖放时被触放 11 * drag - 当鼠标拖放过程中，类似于mousemove事件 12 * dragend - 当鼠标结束拖放时被触放 13 * 目标元素事件 14 * dragenter - 当鼠标拖放进入到目标元素内被触发 15 * dragover - 当鼠标到达目标元素被触发 16 * drop - 当鼠标实现拖放效果被触发 17 * 默认情况下，该事件没有被触发 18 * 原因 - html页面默认情况下，不允许拖放 19 * 解决 - 阻止页面的默认行为 20 * 事件对象event.preventDefault()方法 21 * dragleave - 当鼠标拖放离开目标元素被触发 22 * dataTransfer对象 23 * 作用 - 类似于window系统的剪切板的功能 24 * 功能 25 * 可以将源元素的信息（数据），存储在这里 26 * 将存储在该对象的源元素信息，提供给目标元素 27 * 方法 28 * setData() - 设置（源元素）数据 29 * 在源元素事件中使用 30 * getData() - 获取设置的数据 31 * 在目标元素事件中使用 32 * clearData() - 清除（设置的数据） 33 * 所有的数据内容，存储在浏览器内存中 34 * setDragImage() 35 * 作用 - 修改拖放过程中，鼠标跟随的图片效果 36 * 用法 - drag、dragstart等事件 37 * 注意 - 实际操作中，该方法几乎不用
HTML5 DAY06：
* Web Worker
1 * 基本内容 2 * 单线程与多线程 3 * Worker可以模拟多线程的效果 4 * 定义 - 运行在后台的JavaScript 5 * 注意 - 不能访问页面和使用DOM 6 * 在Worker中只能使用JavaScript中的ECMA 7 * 目前主流浏览器都支持Worker，除IE8之前 8 * Worker提供API 9 * 检测当前浏览器是否支持Worker 10 if(typeof(Worker)!=='undefined'){ 11 说明当前浏览器支持Web Worker 12 }else{ 13 说明当前浏览器不支持Web Worker 14 } 15 * 创建WebWorker对象 16 new Worker(worker文件) 17 * Worker对象 18 * onmessage事件 19 * postMessage()方法 20 * terminate()方法
* Web存储API
1 * 基本内容 2 * 数据仓库 - 用于存储数据 3 * HTML5存储系统 4 * localStorage(本地存储) - 替代 Cookie 5 * sessionStorage(会话存储) - 替代Session（类似于内存） 6 * sessionStorage 7 * setItem(key,value)方法 8 * 作用 - 设置数据(新增数据) 9 * 参数 - 10 * key - 作为存储数据的标识（唯一，不可重复） 11 * vakue - 存储的数据内容（number|string） 12 * getItem(key)方法 13 * 作用 - 获取参数（读取数据） 14 * 参数 15 * key - 根据key获取对应的数据内容 16 * 返回值 - key对应的value 17 * key（index）方法 18 * remove(key)方法 19 * 作用 - 删除数据 20 * 参数 21 * key - 根据key删除指定数据内容 22 * clear()方法 23 * 作用 - 将存储系统的所有数据删除（清空） 24 * length属性 25 * 作用 - 返回当前存储系统的数据个数 26 *localStorage 27 * 28 * 对于数据的操作 29 * 新增 - setItem() 30 * 查询 - getItem() 31 * length属性 32 * key(index) 33 * 删除 34 * key(index) - key 35 * getItem() - value 36 * setItem(key,新value) 37 * sessionStorage与localStorage 38 * sessionStorage存储系统存储数据的特点 39 * 当浏览器窗口关闭时，数据全部丢书 40 * 当再次打开浏览器窗口时，数据不能使用 41 * localStorage存储 42 * 当浏览器窗口关闭时，数据依旧使用 43 * 当再次打开浏览器窗口时，数据继续使用 44 * 数据只能由用户删除
* Web Socket
1 * 基本内容 2 * socket - 是一种网络协议 3 * 网络协议 - SERVER&HTTP课程中的http 4 * Websocket 5 * 表示在HTML5页面中允许支持socket协议 6 * 浏览器-服务器 7 * 使用的网络协议 - http协议 8 * http协议的问题 9 *短连接 10 *无状态
