前端知识点总结——H5

前端知识点总结——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 <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(进度条)

<progress></progress> 左右晃动进度条
<progress value=”0.5” /> 具有指定进度值进度条

3.2: html5新特性---meter(刻度尺)

Meter：用于标示一个值所值的范围:不可接受(红色),可以接受(黄色),非常优秀(绿)
薪水:
<meter min=”最小值” max=”最大值” low=”下限” high=”上限”
最佳值=”” value=”当前值”>

3.3: html5新特性---output

output:输出，语义标签,没有任何外观样式，样式等同于span
商品单价: 3.50
购买数量: <input type=”number” value=”1”>
小计:<output>7.00</output>

3.4:html5新特性—(表单元素新属性)

H4:type;id;value;name;style;readyonly;disabled;checked
H5:
(1) placeholder 占位符
(2) autofocus 自动获取输入焦点
(3) multiple 允许输入框中输入多个值，用逗号分值
(4) form 用于把输入域放置在表单外部
<form id=”f3”></form>
<input type=”text” form=”f3” />
(5) required 必填空
(6) maxlength 字符串最大长度
(7) minlength 字符串最小长度
(8) min 指定数值最小值
(9) max 指定数值最大值
(10) pattern 指定输入内容符合正则表达式

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~2*Math.PI
角度=>弧度 n*Math.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使用方式
<svg></svg> 本身是一个300*150的inline-block
<rect></rect> 矩形
<circle></circle> 圆形
<elipse></elipse> 椭圆
<line></line> 直线
<polyline></polyline>多边形

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