前端知识点总结——H5
1.html5新特性
(1)新的语义标签
(2)增强型表单*
(3)音频和视频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖动API
(8)Web Worker
(9)Web Storage
(10)Web Socket
2.增强型表单
1.新input type
H4:text;checkbox;password;radio;submit;reset;File;
H5:email;url;number;search;color;date;month;week
2.新的表单元素
H4:input;button;select;textarea
H5:datalist;progress;meter;output
3.html5新特性—datalist(数据列表)
<datalist id=”list3”> datalist本身不可见
<option>xxx</option>
<option>yyy</option>
</datalist>
<input type=”text” list=”list3”/>
datalist为input提供输入建议列表
3.1: html5新特性—progress(进度条)
左右晃动进度条
具有指定进度值进度条
3.2: html5新特性—meter(刻度尺)
Meter：用于标示一个值所值的范围:不可接受(红色),可以接受(黄色),非常优秀(绿)
薪水:
<meter min=”最小值” max=”最大值” low=”下限” high=”上限”
最佳值=”” value=”当前值”>
3.3: html5新特性—output
output:输出，语义标签,没有任何外观样式，样式等同于span
商品单价: 3.50
购买数量:
小计:7.00
3.4:html5新特性—(表单元素新属性)
H4:type;id;value;name;style;readyonly;disabled;checked
H5:
(1) placeholder 占位符
(2) autofocus 自动获取输入焦点
(3) multiple 允许输入框中输入多个值，用逗号分值
(4) form 用于把输入域放置在表单外部
3.5 html5新特性–视频与音频 (重点)
Flash被H5取代
Flash绘图(AS/Flex) -> canvas/svg
Flash动画 -> canvas/svg 定时器
Flash视频和音频播放 -> video/audio
Flash 客户端存储 -> webstorage
3.6:H5新特性—视频播放
<video src=”x.mp4”></video>
<video>
<source src=”x.mp4”></source>
<source src=”x.ogg”></source>
<source src=”x.webm”></source>
您的浏览器版本太低，请升级
</video>
它本身是一个300*150的inline-block元素
成员属性:
autoplay 是否自动播放
controls 是否显示控件
muted 是否静音
loop 是否循环播放
poster 在播放第一帧画面之前广告(图片)
preload 视频加载策略
auto: 预加载一定时长视频和元数据
metadata: 仅预加载元素数(尺寸，时长，第一帧画面)
none: 不加载任何内容
js对象属性:
currentTime 当前播放时长
duration 总时长
paused: 当前视频是否处理暂停状态
volume（0~1） 音量
playbackRate: 回放速率: 大于1快播 小于1慢放
js 成员方法
play() 播放视频
pause() 暂停视频播放
js 事件
onplay 当视频开始播放触发事件
onpause 当视频暂停播放触发事件
3.7:H5新特性—音频
<audio src=”x.mp3”></audio>
<audio>
<source src=”x.mp3” />
<source src=”x.wav” />
</audio>
它默认300*30的inline-block元素，但是没有controls属性，
则display:none;
成员属性:
autoplay 是否自动播放
controls 是否显示控件
muted 是否静音
loop 是否循环播放
preload 视频加载策略
auto: 预加载一定时长视频和元数据
metadata: 仅预加载元素数(尺寸，时长，第一帧画面)
none: 不加载任何内容
js对象属性
currentTime 当前播放时长
duration 总时长
paused: 当前视频是否处理暂停状态
volume（0~1） 音量
playbackRate: 回放速率: 大于1快播 小于1慢放
js 成员方法
play() 播放视频
pause() 暂停视频播放
js 事件
onplay 当视频开始播放触发事件
onpause 当视频暂停播放触发事件
3.8 html5 新特性—canvas绘图 (重点)
网页中的实时走势图,抢红包,网页游戏,地图应用…
(1)SVG 绘图 2D矢量绘图技术，2000年出现,后纳入h5
(2)Canvas绘图 2D位图绘图技术，H5提出
(3)WebGL绘图 3D绘图技术，尚未纳入H5标准
Canvas绘图难点所在:
(1)坐标系
(2)单词比较多
3.9 html5 新特性—canvas
Canvas画布:画布是H5提供的绘图基础
<canvas width=”500” height=”400”>
您的浏览器版本太低，请升级
</canvas>
Canvas标签在浏览器中默认是300*150的inine-block,画布宽度高度属性只能用js/属性来赋值.
不能用CSS样式赋值.
每个画布上有且只有一个”画笔”对象—使用该对象来绘图
var ctx = canvas.getContext(“2d”); 得到画布的画笔对象
(1)使用canvas绘制矩形(长方形)
矩形定位点在自己左上角
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)使用canvas绘制文本
ctx.textBaseline = “alphabetic” 文本基线
ctx.font = “12px sans-serif”; 文本大小和字体
ctx.fillText(str,x,y); 填充一段文本
ctx.strokeText(str,x,y) 描边一段文本
ctx.measureText(str); 测量文本宽度
4.canvas绘制—(重点)路径
path:由多个坐标点组成任意形状，路径不可见，可用于
“描边”,”填充”.
复杂图形依靠路径
ctx.beginPath(); 开始一条新路径
ctx.closePath(); 闭合当前路径
ctx.moveTo(x,y); 移动到指定点
ctx.lineTo(x,y); 从当前点到指定点画直线
ctx.arc(cx,cy,r,start,end); 绘制圆拱型
cx,cy 圆心
r 半径
start,end 开始角度和结束角度
圆弧度 0~2Math.PI
角度=>弧度 nMath.PI/180=>弧度
ctx.stroke(); 描边
ctx.fill(); 填充
4.1canvas绘制—(重点)图像
canvas 属于客户端技术，图片保存服务器，所以浏览器先下载，再绘制图片，且等待图处下载完成.
var p3 = new Image();
p3.src = “x.jpg”; #下载指定图片
p3.onload = function(){ #当图片下载成功后触发事件
console.log(p3.width);
ctx.drawImage(p3,x,y); //绘制原始大小图片
ctx.drawImage(p3,x,y,w,h); //拉伸图片
}
4.2canvas绘制—(重点)图像->变形
canvas绘图中有变形技术同，可以针对某一个图形/图像在绘制过程中进行变形:rotate();translate();平移原点
ctx.rotate(弧度); 旋转绘制图像以画布原点为轴心.
ctx.translate(x,y); 将画布原点平移到指定位置
ctx.save(); 保存画笔当前所有状态值
ctx.restore()); 恢复画笔上一次保存时所有状态值
5.svg绘制—(重点)
位图:由一个一个像素点组成，每个点各有自己颜色，色彩细腻，但放大会失真.
矢量图:由一条一条线条组成，每个线条有自己颜色和方向，可以无限缩放，但细节不够丰富
canvas绘图 svg绘图
类型 2D位图 2D矢量图
如何绘制图 使用JS代码绘图 使用标签绘图
事件绑定 每个图形不是一个元素，无法直接绑定事件. 每个图形都是元素，可以直接绑定事件监听
应用场合 游戏,特效 地图
SVG诞生于2000年，早期作为XML扩展应用出现，H5标准把常用
SVG标签采纳为标准，但有些被废弃.
svg使用方式
本身是一个300*150的inline-block
椭圆
6:HTML5新特性—矩形
<rect width=”” height=”” x=”” y=”” fill=”” fill-opacity=””
stroke=”” storke-opacity=””></rect>
6.1:HTML5新特性—圆形
<circle r=”” cx=”” cy=”” ></circle>
6.2:html5新技术–svg (重点)—椭圆
<ecllipse rx=”” ry=”” cx=”” cy=”” />
rx:水平半径
ry:垂直半径
6.3:html5新技术–svg (重点)—直线
<line x1=”” y1=”” x2=”” y2=”” stroke=”” stroke-width=””..></line>
6.4:html5新技术–svg (重点)—折线
<polyline points=”x,y x,y x,y ...” ></polyline>
6.5:html5新技术–svg (重点)—文本
<text text-size=”” fill=””...>文本内容</text>
6.6:html5新技术–svg (重点)—图像
<image xlink:href=”x.jpg” x y width height></image>
6.7:html5新技术–svg (重点)—渐变对象
<defs>
<linearGradient id=”r2” x1=”0%” y1=”0%” x2=”100%” y2=”0%”>
<stop offset=”0%” stop-color=”green”>
<stop offset=”50%” stop-color=”yellow”>
<stop offset=”100%” stop-color=”red”>
</defs>
<rect width=”400” height=”200” fill=”url(#r2)”
7.:html5新特性–地理定位(实现需要联网)
Geolocation:地理定位,使用js获得当前浏览器所在地理坐标(经度，纬度，海拨，速度)数据，用于实现LBS应用(Location Base Service),如饿了么，高德导航…
获取地理定位类型
(1)浏览器自带对象geolocation[实现不了]
(2)百度地图,腾讯地图[准确度高]
手机浏览器如何获取定位信息
(1) 首选手机中GPS芯片与卫星通信，定位精度在米
(2) 次选手机通信基站进行定位，定位精度在公里
PC浏览器如何获取定位信息
(3) IP地理解析反向查找…
html5提供了一个新对象，用于获取当前浏览器定位信息
window.navigator.geolocation{};
getCurrentPosition:fn获取定位
百度地图:
(1)百度地图开发者 http://lbsyun.baidu.com/
(2)注册百度开发者帐户 手机
(3)创建一个网站:为网站申请访问密钥 AccessKey
网站名称[abc123]
[....]
(4) AccessKey
(5)开放示例
//加载百度API指定密钥
<script src="http://api.map.baidu.com/api?
v=2.0&ak=申请密钥">
</script>
var map = new BMap.Map("container");
// 创建地图实例
var point = new BMap.Point(116.404, 39.915);
// 创建点坐标
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别
8:html5新特性—拖动API（拖动上传图片）
Drag & Drop :拖动和释入
HTML5为拖动行为提供7个事件，分为两组
拖动的源动(会动)可以触发3个事件
dragstart 拖动开始
drag 拖动中
dragend 拖动结束
拖动的目标对象(不动)可以触发4个事件
dragenter 拖动进入
dragover 拖动悬停在上方
dragleave 拖动离开
drop 拖动释放
9:上传文件—(重点)
上传文件web项目通常使用功能:上传头像,邮件附件,上传商品图片,上传docx文档,喜玛拉雅，斗鱼...
上传文件类型：指定任意类型/指定特定类型(jpg/png/gif)
上传文件方式:
(1)表单同步提交 --简单,用户感受差
(2)ajax上传 --复杂,用户感受好(拖动,预览图片)
(3)第三方js工具库—剪切
10: Web Worker–代码3行,重点理论理解
程序:一组代码(硬盘)
进程:操作系统将程序代码调用(内存中)准备执行
线程:进程内部执行代码序列
chrome 在线程模型:多个线程用于请求资源，运算js代码/渲染页面内容--1(UI)线程
<button>按钮1</button>
<script src="1.js"></script>
<button>按钮2</button>
解决方案:
创建一个新的web Woker线程执行1.js程序,让UI继续执行绘制页面内容;
10.1: Woker线程有缺点
浏览器不允行worker线程操作DOM、BOM元素
原因:浏览器只允许UI线程操作DOM/BOM，也就是woker
执行的代码中不能包含DOM操作/类似jquery也不行.
10.2:Worker线程可以发送或者接收UI线程数据
*Woker发送数据-->UI接收数据
1:worker
postMessage(rs);
2:UI
var w2 = new Worker("01.js");
w2.onmessage = function(e){e.data}
*UI发送数据-->Worker接收数据
1:UI
var w2 = new Woker("01.js");
w2.postMessage(stringMsg);
2:Worker
onmessage = function(e){e.data}
项目中使用Worker
(1)只要js中有DOM/BOM不能使用Worker
(2)Worker适合于执行耗时JS任务,数据分析数据统计
11:HTML5新特性–WebStorage
在浏览器中存储当用户的专用数据:访问历史;定制样式,
在客户端存储数据技术
(1)Cookie技术 兼容性好,数据不能超4kb,操作复杂
(2)Flash 依赖Flash播放器
(3)H5 WebStorage 兼容性差,数据8MB,操作简单
(4)IndexedDB 可存储大量数据，不是标准
Session:会话 (操作过程)
浏览器从打开某一个网站第一个网页开始[会话开始],中间可能打开多个页面[会话中]直到关闭浏览器[会话结束],整个过程称为一次"会话"
WebStorage提供二个对象:
(1)sessionStorage:类数组对象
在浏览器进程序中分配一内存,存储一次web会话数据,可供此次会话中所有页面读取或者保存，一旦浏览器关闭数据消失.
示例:登录用户编号;昵称
#保存数据
sessionStorage[key]=val;
sessionStorage.setItem(key,val);
sessionStorage.length //保存数量
var key = sessionStorage.key(i); //依据数值返回左侧key
#获取数据
var val = sessionStorage[key]
var val = sessionStorage.getItem(key);
#清除数据
sessionStorage.removeItem(key);
sessionStorage.clear();
(2)localStorage
数据保存磁盘上，数据可以跨会话，即使浏览器关闭，数据也保存。
#保存数据
localStorage [key]=val;
localStorage.setItem(key,val);
localStorage.length //保存数量
var key = localStorage.key(i); //依据数值返回左侧key
#获取数据
var val = localStorage [key]
var val = localStorage.getItem(key);
#清除数据
localStorage.removeItem(key);
localStorage.clear();
#localStorage中若数据发生了修改，会触发一次
window.onstorage事件,可以监听此事件，实现监视
localStorage数据改变目的,sessionStorage数据修改不会
触发此事件.
12:HTML5 新特性之一–WebSocket–代码不复杂原理
HTTP协议:属于"请求-响应"模型，只有客户端发起请求，服务器才会返回响应消息，没有请求就没有响应,一个请示主体，只能得到一个响应，
有一些场景，此种模型力不从心：实时股票走势图
解决方案:长轮询(心跳请求)+AJAX --请求过于频繁，服务器压力大,不够频繁，客户不满意.
WebSocket协议: 属于"广播+接收", 客户端连到服务器就不再断开,
永久连接,双方随时向对方发送数据,发送消息:ws协议适合于:实走股票走势图
ws服务器:php/java/node.js 监听指定端口,向对方发送消息也可以接收消息.
ws客户端:php/java/node.js/html5新特性 主动发起连接请求，保持永久连接，向对方发送消息，并且接收消息.
掌握:使用HTML5新特性创建ws客户端
(1)连接ws服务器
var socket = new WebSocket("ws://127.0.0.1:9001");
(2)向服务器发送消息
socket.send(stringMsg);
(3)接收服务器返回消息
socket.onmessage = function(e){e.data}
(4)断开与服务器连接
socket.close();
小结端口:
apache 默认端口 80
mysql 默认端口 3306
https 默认端口 443
webSocket 默认端口 9001