前端知识点总结——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~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使用方式
<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

原文地址：https://blog.51cto.com/14392904/2410738

时间： 2024-11-03 08:12:55

前端知识点总结——H5的相关文章

前端知识点总结1

前端知识点总结 WendySays 关注 2016.10.14 17:10* 字数 1074 阅读 759评论 3喜欢 8 知识框架 知识框架图,每个部分有很多书推荐https://github.com/JacksonTian/fks Paste_Image.png 浏览器工作原理 How browsers work 浏览器工作原理相关的译文 浏览器渲染浏览器的渲染原理简介 看到这个标题大家一定会想到这篇神文<How Browsers Work>,这篇文章把浏览器的很多细节讲得很细,而且也被翻

前端知识点总结（转载）

转自--- https://github.com/hawx1993/Front-end-Interview-questions/blob/master/README.md 本文旨在加深对前端知识点的理解,资料来源于网络,由本人(博客:http://segmentfault.com/u/trigkit4) 收集整理. 一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势. 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端开发的? 5.未来三到五

python学习第六十五天：前端知识点总结

前端知识点串讲 1 HTML 1.1 组成 HTML标签: 单 双 HTML标签属性 class id 1.2 HTML标签 # 页面结构标签 html body head # HEAD 头部标签 meta title style link script # 格式标签 p h1~6 pre br hr # 文本标签 em strong sub sup del ins i # 列表 ul ol li dl dt dd # 表格 table thead tbody tfoot tr td th ca

中级前端知识点提要

中级前端知识点提要 标签(空格分隔): JavaScript HTML 基础 1 Restful API Representational State Transfer(表现层状态转移). URL定位资源,用HTTP动词(GET POST PUT DELETE)描述操作. 资源.统一接口.URI.无状态. 应该将API的版本号放入URL:URL中只能有名词而不能有动词:API应该提供参数. 2 CommonJS/AMD/CMD/ES6 Module 2.1 CommonJS 是Node.js模块

前端知识点总结——HTML

前端知识点总结--HTML HTML:HTML4.01 指的就是网页技术HTML5:HTML4.01的升级版本 1.web的基础知识 web与Internet1.Internet:全球性的计算机互联网络,因特网,互联网,交互网2.提供服务 前端学习圈:767273102 ,从最基础的HTML+CSS+JavaScript.jQuery,Ajax,node,angular等到移动端HTML5的项目实战的资料都有整理 访问网站:www(world wide web)服务 Email:电子邮件服务 B

前端知识点总结——jQuery

前端知识点总结--JQ 1.什么是jQuery: jQuery: 第三方的极简化的DOM操作的函数库第三方: 下载极简化: 是DOM操作的终极简化: 4个方面: 1\. DOM: 增删改查 2\. 事件绑定: 3\. 动画效果: 4\. Ajax DOM操作: 学习jQuery还是在学DOM,只不过API简化了函数库: jQuery中都是函数,用函数来解决一切问题为什么使用: DOM操作的终极简化 解决了大部分浏览器兼容性问题凡是jQuery让用的,都没有兼容性问题 2.如何使用: 下载: 版本

前端知识点总结——AJAX

前端知识点总结--Ajax 1.ajax 1.URL的作用 用于表示任意一个资源的位置(互联网上) 2.详解 格式: <scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frag> scheme:方案\协议,以哪种方式到服务获取资源,协议不区分大小写, 常见的协议:http,https,ftp ssh:安全的远程登录 SMTP

前端知识点总结——Angular

前端知识点总结--Angular 一.Angular概述 基于命令行的开发方式? ①hot reload ②编译工作 ③集成了webpack打包工具 .... angular.cn 中文angular.io 正式官网angular.cn/guide/styleguide 风格指南 1.what? angular是一个Google推出的js框架,是以模块为基本单位,模块又可以包含组件.指令.过滤器.. 1.1 版本问题 angular angular2.0以后所有的版本统称为angular (当前

你可能不知道的前端知识点

新建了一个 repo:justjavac/the-front-end-knowledge-you-may-dont-know 发掘被我们忽略的前端知识点.所有的讨论以 issues 的形式进行,任何人都可以在 issues 区围观讨论. 本 repo 的目的在于搜集.讨论,最终的内容会整理成文章.PPT.PDF 发布在 小密圈. 须知 #1 索引 #2 缘起 前一阵有人在微信群里面遇到了一个问题: 当输入框在最底部的时候,弹起的虚拟键盘会把输入框挡住. 于是我发给他一个 API:Element.