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 提供了一个新对象, 用于获取当前浏览器定位信息
Windows.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 中若数据发生了修改, 会触发一次
Windows.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
来源: http://www.bubuko.com/infodetail-3096676.html