前端知识点总结——H5

灰太狼 2022-01-10 02:37 319阅读 0赞

# **前端知识点总结——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 用于把输入域放置在表单外部

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

前端学习交流圈：767273102 ，里面都是学习前端的从最基础的HTML+CSS+JS炫酷特效，游戏，插件封装，设计模式到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。2019最新技术，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!

## 3.7:H5新特性—音频 ##

它默认300\*30的inline-block元素，但是没有controls属性，  
则display:none;  
成员属性:  
autoplay 是否自动播放  
controls 是否显示控件  
muted 是否静音  
loop 是否循环播放  
preload 视频加载策略

**auto: 预加载一定时长视频和元数据**

metadata:    仅预加载元素数(尺寸，时长，第一帧画面)
      none:        不加载任何内容

**js对象属性**

currentTime  当前播放时长
    duration     总时长
    paused:     当前视频是否处理暂停状态
    volume（0~1）  音量

## 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使用方式  
本身是一个300\*150的inline-block  
矩形  
圆形  
椭圆  
直线  
多边形

## 6:HTML5新特性—矩形 ##

## 6.1:HTML5新特性—圆形 ##

## 6.2:html5新技术–svg (重点)—椭圆 ##

<ecllipse  rx=”” ry=””  cx=”” cy=””  />
      rx:水平半径
      ry:垂直半径

## 6.3:html5新技术–svg (重点)—直线 ##

## 6.4:html5新技术–svg (重点)—折线 ##

## 6.5:html5新技术–svg (重点)—文本 ##

## 6.6:html5新技术–svg (重点)—图像 ##

## 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/][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数据修改不会
      触发此事件.
    前端学习交流圈：767273102 ，里面都是学习前端的从最基础的HTML+CSS+JS炫酷特效，游戏，插件封装，设计模式到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。2019最新技术，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!

## 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

[http_lbsyun.baidu.com]: http://lbsyun.baidu.com/