前端知识点总结——H5

摘要：前端知识点总结新特性新的语义标签增强型表单音频和视频绘图绘图地理定位拖动增强型表单新新的表单元素新特性数据列表本身不可见为提供输入建议列表新特性进度条左右晃动进度条具有指定进度值进度条新特性刻度尺用于标示一个值所值的范围不

(1)新的语义标签
(2)增强型表单*
(3)音频和视频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖动API
(8)Web Worker
(9)Web Storage
(10)Web Socket

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

 
datalist为input提供输入建议列表

左右晃动进度条
具有指定进度值进度条

Meter：用于标示一个值所值的范围:不可接受(红色),可以接受(黄色),非常优秀(绿)
薪水:
最佳值=”” value=”当前值”>

output:输出，语义标签,没有任何外观样式，样式等同于span
商品单价: 3.50
购买数量:
小计:

7.00

H4:type;id;value;name;style;readyonly;disabled;checked
H5:
(1) placeholder 占位符
(2) autofocus 自动获取输入焦点
(3) multiple 允许输入框中输入多个值，用逗号分值
(4) form 用于把输入域放置在表单外部

 Flash被H5取代
 Flash绘图(AS/Flex)   ->    canvas/svg
 Flash动画            ->    canvas/svg 定时器
 Flash视频和音频播放   ->    video/audio
 Flash 客户端存储      ->    webstorage

它本身是一个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 当视频暂停播放触发事件

它默认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 当视频暂停播放触发事件

网页中的实时走势图,抢红包,网页游戏,地图应用..
(1)SVG 绘图 2D矢量绘图技术，2000年出现,后纳入h5
(2)Canvas绘图 2D位图绘图技术，H5提出
(3)WebGL绘图 3D绘图技术，尚未纳入H5标准

Canvas绘图难点所在:
(1)坐标系
(2)单词比较多

 Canvas画布:画布是H5提供的绘图基础
   
      您的浏览器版本太低，请升级
   

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); 测量文本宽度

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~2*Math.PI
角度=>弧度 n*Math.PI/180=>弧度
ctx.stroke(); 描边
ctx.fill(); 填充

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); //拉伸图片
}

canvas绘图中有变形技术同，可以针对某一个图形/图像在绘制过程中进行变形:rotate();translate();平移原点
ctx.rotate(弧度); 旋转绘制图像以画布原点为轴心.
ctx.translate(x,y); 将画布原点平移到指定位置
ctx.save(); 保存画笔当前所有状态值
ctx.restore()); 恢复画笔上一次保存时所有状态值

位图:由一个一个像素点组成，每个点各有自己颜色，色彩细腻，但放大会失真.
矢量图:由一条一条线条组成，每个线条有自己颜色和方向，可以无限缩放，但细节不够丰富

canvas绘图    svg绘图

类型 2D位图 2D矢量图
如何绘制图 使用JS代码绘图 使用标签绘图
事件绑定 每个图形不是一个元素，无法直接绑定事件. 每个图形都是元素，可以直接绑定事件监听
应用场合 游戏,特效 地图

SVG诞生于2000年，早期作为XML扩展应用出现，H5标准把常用
SVG标签采纳为标准，但有些被废弃.
svg使用方式
本身是一个300*150的inline-block
矩形
圆形
椭圆
直线
多边形

  
  rx:水平半径
  ry:垂直半径

文本内容

   
     
      
      
      
   
   
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指定密钥
 
 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)线程
按钮1

按钮2
解决方案:
   创建一个新的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