HTML5_CORE
1 增强型表单
1.1 新的input type
number;email;url;color;date;month;week
1.2 新元素element
-
datalist建议列表
配合input创建建议列表，为用户提供输入内容的建议(与下拉selection相似，提示类似搜索框)<datalist id="list3"> 默认情况datalist不可见 <option>xx</option> <option>yy</option> </datalist> <input type="text" list="list3"/> -
progress进度条
显示一个进度条两种形式：
<progress> 左右晃动进度条
<progress value=“0.7” /> 具有指定进度值进度条，可以配合定时器实现动态的进度条 -
meter刻度尺
<meter min=“最小值” max=“最大值” low=“下限” high=“上限”
optimum=“最佳值” value=“当前值” />
使用low和high来分区间，
当前值离最佳值非常远，相隔区间 (红)危险
当前值离最佳值比较近，相邻区间 (黄)警告
当前值离最佳值非常近，当前区间 (绿)正常 -
output输出
语义标签，样式同span
1.3 新属性attr
-
autofocus：自动获取输入焦点
-
placeholder：占位符
-
form：把表单元素放在form外面
<form id="f5"> </form> <input type="text" form="f5"/> -
multiple：允许输入多值(但要用逗号分隔)
-
验证相关
1）required：必填项，内容不能为空
2）minlength，maxlength：字符串长度
3）min，max：最值
4）pattern：正则表达式，可直接对input内容进行验证
2 视频音频
2.1 视频video
-
Flash
1）Flash绘图(AS/Flex) -> Canvas+SVG
https://echarts.baidu.com/ echarts第三方绘图库
https://d3js.org.cn/ d3绘图库
2）Flash动画(游动) -> Canvas+第三方游戏平台
https://www.cocos.com 微信小游戏
3）Flash视频(音频) -> video/audio (90%)
4）Flash存储 -> h5 WebStorage -
视频使用：<video src=“x.mp4”>
知识补充:
(1)现在常用视频格式哪些 .mp4 .flv .webm .ogg
(2)如果浏览器需要播放指定格式视频,需要安装对应解码器软件
(3)如果低版本浏览器安装解码器
<video src=“x.mp4” />
问题:我们希望大多数浏览器都可以播放视频
-x.mp4 使用工具软件 “格式工厂” 转换成新的视频格式 x.flv x.webm x.ogg<video> <source src="x.mp4" /> <source src="x.flv" /> <source src="x.webm" /> <source src="x.ogg" /> 您的浏览器版本太低，请升级!!! </video> -
视频video常用属性
controls:false 是否显示播放控件 <video controls>
autoplay:false 是否自动播放 <video autoplay> 兼容性非常差
loop:false 是否循环播放
muted:false 是否静音播放
poster:"" 在播放第一帧画面之前显示海报
preload 视频预加载策略：页面加载完成后预加载视频内容
-auto 预加载一定时长视频和元数据
-metadata 只预加载元数据(时长;尺寸;第一帧画面)
-none 不预加载任何数据 -
视频video的js操作属性
volume:1 //0~1
playbackRate:1 回放速度大于1 快放小于1慢播
paused:false 当前视频是否处于暂停状态
play() 播放视频
pause() 暂停播放
onplay 当视频开始播放时触发事件
onpause 当视频暂停播放时触发事件 -
video高级特性——样式
object-fit: fill/contain/cover
fill默认值将视频拉伸至恰好填满容器；
contain保持宽高比例，容器留白；
cover保持宽高比例，至恰好覆盖
注意:cover;contain 使用比例多；如果创建视频与录制视频工程师 750*1334 iphone6 屏幕(全屏播放) -
video高级特性——特殊属性
#扩展知识: 苹果 IOS/谷歌 Android
(同层播放)点击视频后会自动新建全屏视频，同时播放
IOS <video webkit-playsinline=“true”/>
Android <video playsinline=“true”/>
<video webkit-playsinline=“true” playsinline=“true”/>
(横屏错位)
只有Android系统存在，横置手机后视频错位
<video x5-video-player-fullscreen=“true”> -
video高级特性——特殊事件
-timeupdate 当视频播放时候[时间发生变化]不断触发事件(可以获取当前视频播放时间currentTime)
-ended 当视频播放结束时候
-canplaythrough 当视频加载结束可以播放时触发事件(触发后可以获取视频时长duration)v3.addEventListener("canplaythrough",function(){ console.log("视频总时长:"+v3.duration); })
2.2 音频audio
音频使用：<audio src=“x.mp4”>
考虑兼容性问题同视频文件，使用工具软件 “格式工厂” 转换成新的音频格式
<audio>
<source src="x.mp3" />
<source src="x.wav" />
<source src="x.ogg" />
</audio>
属性方法事件大多数与视频相同
默认情况下音频文件不可见，如要显示可直接添加controls属性
3 Canvas绘图
3.1 绘图概述
网页中绘制图形三种技术
(1)svg 绘图技术:2d矢量图绘制技术 2000出现纳入h5标准，放大不失真，已很少使用
(2)canvas 绘图技术:2d位图绘制技术，色彩明亮但放大失真
(3)webgl 绘图技术: 3d 位图绘制技术，尚未纳入h5标准
3.2 canvas绘图画布
- 创建画布
<canvas id=“c3” width=“500” height=“400”>
注意：画布宽度和高度只能使用属性或js赋值,不能用css样式来赋值(css缩放) - 通过 js程序获取画布
var c3 = document.getElementById(“c3”); - 通过 js程序获取画笔[上下文对象]
var ctx = c3.getContext(“2d”);
注意：一个画笔对象仅对应一个画布对象
-ctx.lineWidth = 1; 描边宽度(空心矩形边框宽度)
-ctx.strokeStyle = “#fff”; 描边样式
-ctx.fillStyle = “#fff”; 填充样式(实心矩形内容样式)
-ctx.strokeRect(x,y,w,h); 描边一个矩形
-ctx.fillRect(x,y,w,h); 填充一个矩形
注意：x y 矩形左上角位置 w h 宽度和高度；矩形定位点在自己左上角
-ctx.clearRect(x,y,w,h); 清除一个矩形范围内所有元素
可以配合定时器实现动态效果
3.3 canvas绘图文本
将文本放在画布上，可以产生动态效果
ctx.textBaseline = “top”; 设置文本基线，基线会与x轴重合，top,alphabetic
ctx.font = “19px SimHei”; 设置文本大小和字体
var str = “abcxyz”; 创建文本对象
ctx.fillText(str,x,y); 绘制填充文本
ctx.strokeText(str,x,y); 绘制空心文本
ctx.measureText(str); 测量文本宽度返回{width:x}
只能先绘制文本对象再测量文本宽度
3.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 结束角度
注意：程序不使用角度->弧度，角度*Math.PI/180 = 弧度
ctx.stroke(); 描边
ctx.fill(); 填充
3.5 canvas绘图图像
canvas属于客户端技术(运在浏览器)但是图片保存服务器中，所以浏览器必须先下载绘制图片，且等待下载完成再绘制.
#图片为什么保存服务器
(1)图片有版权软件项目宝贵资源
(2)图片通常数量巨大
操作流程：
1）创建图片对象 var p3 = new Image();
2）下载图片 p3.src = “x.png”;
3）绑定事件[下载完成] p3.onload = function(){}
-函数内绘制图片
ctx.drawImage(p3,x,y,w,h);拉伸大小
ctx.drawImage(p3,x,y); 原始大小
3.6 canvas绘图旋转
canvas绘图技术可以针对一个图像在绘制过程中进行旋转操作
ctx.rotate(弧度); 旋转画笔对象，旋转轴心为画布原点
ctx.translate(x,y); 将整个画布原点平移到某处
当一个画布上绘制多个元素之前先"保存"，之后"恢复"这种操作使不同元素之间不受影响.
ctx.save(); 保存画笔状态
ctx.restore(); 恢复画笔状态
3.7 canvas渐变对象(过渡效果)
1）创建渐变对象
var g=ctx.createLinearGradient(x1,y1,x2,y2);
2）添加颜色点
g.addColorStop(offset,color);//offset->0~1
3）渐变对象赋值样式(描边；填充)
ctx.fillStyle=g;
ctx.strokeStyle=g;
4）绘制图形
ctx.fillRect();ctx.strokeText();
3.8 canvas制作游戏
4.1:游戏目录结构
game – 游戏所有文件都保存在此处
index.html 唯一html
src 保存游戏中的图片
大鱼眼睛: bigEye0.png bigEye1.png
大鱼身体: bigSwim0.png … bigSwim7.png
大鱼尾巴: bigTail0.png … bigTail7.png
蓝色食物: blue.png
橙色食物: fruit.png
大海背景: background.jpg
js 保存游戏中的程序
main.js main.js游戏入口
commonFunctions.js 公共函数库文件
background.js 游戏背景
mom.js 大鱼
baby.js 小鱼
ane.js 海葵
friut.js 食物
…
4.2:游戏唯一index.html
创建二个画布大小一相同一个在前一个在后 800*600
前面画布:大鱼;小鱼;分数… z-index:1
后面面布:背景;海葵;食物… z-index:0
加载所有 commonFunction.js main.js background.js
复制图片 src
4.3:创建游戏程序入口main.js
创建游戏所有需要用到对象(背景;食物;大鱼;…)
将所有对象画在画布上
4.4:大海背景图
src/background.jpg 绘制第二画布
1:main.js 声明全局变量保存图片
var bgPic;
2:init 创建图片对象下载图片
bgPic = new Image();
bgPic.src = “src/background.jpg”
3:将绘制图片放在函数 background.js
drawBackground(){
ctx2.drawImage(bgPic,0,0)
}
4:创建定时器 100 绘制画布上所有元素
定时器:setInterval(fn,100);
智能定时器:requestAnimationFrame(fn)
兼容性差:解决问题 commontFunctions.js
自定义兼容性很好函数:requestAnimFrame(fn)
main.js gameloop
function gameloop(){
requestAnimFrame(gameloop);
drawBackground();
}
常见错误:
(1) background.jpg:1 404 (Not Found)
原因:图片路径不正确
图片不存在
4.5:海葵
一共50根海葵
海葵基本 高度 200
海葵与海葵之间水平间距 16
始点坐标x+16+random
终点坐标
在js目录创建文件 ane.js
4 SVG绘图
4.1 svg与canvas比较
| canvas | svg | |
|---|---|---|
| 类型 | 2d位图 | 2d矢量 |
| 绘图方式 | 使用js代码绘图 | 使用标签绘图 |
| 事件绑定 | 只能绑定画布 | 每个图形都可以绑定 |
| 应用场景 | 特效，游戏 | 地图 |
4.2 svg开发流程
-
创建画布
<svg id="s3" width="500" height="400"> 图形标签 </svg> -
画布中添加标签(图形)
<rect x="" y="" width="" height="" fill="" fill-opacity="" stroke="" stroke-opacity=""> -
svg绘制图形特性
1:所有图形默认只有填充色(黑色)
2:svg图形的样式可以用元素属性声明，也可以使用css样式声明，但是CSS声明只能使用SVG专用样式,如边框只能用 stroke 而不能用 border
3:图形可以使用js赋值，但不能使用html，只能使用核心dom
r5.width = 300; r5.height=100; error
r5.setAttribute(“width”,300); ok
r5.setAttribute(“height”,100); ok -
动态添加svg矩形
svg可直接对其上图形绑定事件处理函数
(1)html字符串拼接var html = "<rect></rect>"; svg.innerHTML = html;(2)创建对象
var rect = document.createElementNS("http://www.w3.org/2000/svg","rect"); svg.appendChild(rect); -
动态添加svg圆形
<circle r="" cx="" cy=""> -
动态添加svg椭圆
<ellipse rx="" ry="" cx="" cy="">
cx,cy 圆心
rx:水平半径 ry:垂直半径 -
动态添加svg直线
<line x1="" y1="" x2="" y2="">
x1,y1 起点坐标
x2,y2 终点坐标
stroke-width=“5” stroke-linecap="round"线段圆角 -
动态添加svg折线
一条折线上可以有任意多个连续点
<polyline points=“50,50 100,50 …”
stroke="" fill=“transparent”> -
动态添加svg文本图像
svg画布不能使用 span p标签不可以用
<text font-size="" fill="" stroke="">文本内容
<image xline:href=" x.png" x="" y="" width="" height=""/> -
动态添加svg渐变对象
<defs> 定义特效对象: <linearGradient id="g3" x1="" y1="" x2="" y2=""> <stop offset="" stop-color="" /> </linearGradient> </defs> <ANY fill="url(#g3)"></ANY> -
动态添加svg滤镜(高斯模糊)
<defs> <filter id="f3"> <feGaussianBlur stdDeviation="模糊度" />//模糊度越大越模糊 </filter> </defs> <ANY filter="url(#f3)"></ANY>svg关于滤镜的网址：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter
群组group可以为内部所有标签设置统一属性
<g stroke-width=“5” stroke-linecap=“round”
stroke=“red”>
4.3 第三方绘图库
https://d3js.org/ d3开源免费库
https://echarts.baidu.com/ 百度开源免费库
4.3.1 echarts直方图
1）下载并且在程序引入 echarts.js 文件
2）创建图形容器 <div id=“main” style=“width;height”>
3）通过js 程序获取容器并且创建echarts对象
var main = document.getElementById(“main”);
var mychart = echarts.init(main)
4）创建配置项
var option = {
title:{text:"echart入门示例"},
xAxis:{data:["衬衫","袜子","雪纺衫"]},
yAxis:{},
series:[{type:"bar",data:[100,1,3]}]//数据源，bar表示直方图
}
5）将配置项添加echarts对象中
mychart.setOption(option);
4.3.2 折线图
series:[{type:“line”}]
4.3.3 仪表图
series:[{
type:"gauge",
detail:{formatter:'{value}%'}
data:[{value:32,name:"任务完成率"}]
}]
4.3.4 饼图
series:[{
type:"pie",
radius:"50%", 半径
center:["50%","50%"], 圆心[水平,垂直]
data:[{value:325,name:"邮件营销"},{value:129,name:"搜索"}]
}]
5 地理定位
geolocation:地理定位使用js获取当前浏览器所处地理坐标
(经度;纬度;海拔;速度)数据,用于实例 LBS Location Base Service
基于位置服务:饿了么,滴滴打车…
手机浏览器如何获取定位信息
(1)首选手机GPS芯片与网络连接定位精度在米
(2)次选手机通基站
HTML5中提供一个新对象，用于获取当前浏览器定位信息
window.navigator.geolocation{
getCurrentPostion:fn 获取当前定位
watchPostion:fn 监听位置变化
clearPostion:fn 取消监听
}
国内三家地理定位服务商
(1)百度地图
(2)高德
(3)腾讯地图
5.1 百度地图
-注册百度开发者帐户 (手机)
http://lbsyun.baidu.com/
-百度分配 AccessKey 访问密钥
u70A5pnNrRtRT1XAgwM5jL2YIVj1Gv97
-在自己网站中嵌入百度地图 API
<script src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
<div id="container"></div>
<script>
1:创建地图对象
var map = new BMap.Map("container")
2:创建坐标点
var point = new BMap.Point(经度,纬度);
3:初始化地图并且指定地图显示级别 1-19
map.centerAndZoom(point,15)
// 导航控件
map.addControl(new BMap.NavigationControl());
//缩放控件
map.addControl(new BMap.ScaleControl());
//地图类型控件
map.addControl(new BMap.MapTypeControl());
</script>
6 拖放API
Drag & Drop 拖动和释放
HTML5为拖放操作的两个对象提供7个事件
1）拖动源对象(会动)
dragstart 拖动开始
drag 拖动中
dragend 拖动结束
整个过程:dragstart1+dragn+dragend1
2）拖动目标对象(不会动)
dragenter 拖动进入
dragover 拖动悬停
dragleave 拖动离开
drop 拖动释放
整个过程1:dragenter1+dragovern+dragleave1
整个过程2:dragenter1+dragovern+drop*1
注意：dragover事件有默认行为悬停结束后立即
触发离开事件，不会触发drop释放事件
解决问题:阻止dragover事件默认行为，e.preventDefault()
7 Web Worker
程序:指可以被CPU执行代码存储磁盘中 1.js 1.html
进程:指程序被OS调用内存中并且分配执行空间
线程:线程是进程内部执行单位
chrome浏览器线程模型
一个chrome进程内至少有6个线程，可以向web服务器发起请求 – 资源请求线程
还有一个线程负责将所有资源绘制浏览器上并且执行 js程序 --UI主线程
<button>
<script src=“1.js”>
<button>
现象:js扩行过程中，按钮1可见按钮2不可见
原因:浏览器同一个线程执行js 的绘制按钮
解决方法:创建一个新线程由它执行耗时js任务,UI线程负责网页渲染.
<button></button>
<script>
new Worker("1.js");
#以上代码完成二个任务
#(1)创建Worker对象
#(2)创建新线程执行1.js
</script>
<button></button>
注意事项1:Worker不能通过本地路径运行,报错
Failed to construct ‘Worker’
解决问题:必须在网络情况下运行 http://127…
注意事项2:浏览器不允许Worker执行任何DOM/BOM对象.
原因:浏览器只允许UI主线程操作DOM/BOM,类似的JQUERY程序不能在Worker执行.
web Worker–数据传递
1）Worker线程可以发送消息给UI线程
–Worker发送消息
postMessage(stringMsg)
–UI 接收消息
var w = new Worker(“1.js”);
w.onmessage = function(e){e.data}
2）UI线程可以发送消息给Worker线程
–UI发送消息
var w = new Worker(“1.js”);
w.postMessage(stringMsg)
–Worker 接收
onmessage = function(e){e.data}
8 Web Storage
8.1 客户端存储技术
在浏览器中存储当前用户专有数据:购物车,定制样式
在客户端存储数据可以使用技术
(1)cookie技术:浏览器兼容性好,不能超过4kb,操作复杂(F12->application->storage->cookies)
(2)Flash存储:依赖于Flash播放器
(3)H5 WebStorage:不能超过8MB,操作简单
(4)IndexDB:可存储大量数据，还不是标准技术
8.2 session会话
操作过程：浏览器打开某一个网站第一个页面(会话开始)中间可能打开多个网页(会话中)直到关闭浏览器(会话结束)
整个过程称为"浏览器与 web服务器一次会话"
WebStorage技术提供二个对象存储数据
-
sessionStorage
将数据保存sessionStorage，会话开始保存数据,同一个会话中。其它网页可以获取sessionStorage数据,一旦关闭浏览器(会话结束)， sessionStorage数据清空，对象失效
作用:同一个会话中所有页面共享数据//sessionStorage方法
-sessionStorage[key] = value; 保存数据
-sessionStorage.setItem(key,value); 保存数据
-var value = sessionStorage[key]; 获取数据value
-var value = sessionStorage.getItem(key); 获取数据 value
-sessionStorage.removeItem(key); 删除指定key/value
-sessionStorage.clear(); 清除数据
-sessionStorage.length; 数据个数
-var key = sessionStorage.key(i); 获取数据，返回第i个key -
localStorage
本地存储(跨会话级别存储)–永久保存
作用:购物车//localStorage方法 - localStorage [key] = value; 保存数据 - localStorage.setItem(key,value); 保存/修改数据 -var value = localStorage [key]; 获取数据value -var value = localStorage.getItem(key); 获取数据 value - localStorage.removeItem(key); 删除指定key/value - localStorage.clear(); 清除数据 - localStorage.length; 数据个数 -var key = localStorage.key(i); 获取数据 keylocalStorage如果数据发生修改,触发一次window.onstorage事件,可以监听此事件,实现监听localStorage数据改变的目标，不能监听 sessionStorage
9 Web Socket
http网络协议:
协议网络工作标准依靠软件实例(node.js服务器/浏览器)
http:工作模型:请求-响应,只有客户端先发起请求,服务器才会返回响应消息,没有请求就没有响应
http作用:传输网页中资源(html;css;js;img;avi;mp3…)
webSocket协议:属于"广播-收听"
客户端连接到服务器上就不再断开, 永久连接,双方都可以随时向对方发送消息.
ws:适合:股票走势图,在线聊天室
9.1 服务器
-ws 服务器[java/php/node.js]
(需要下载第三方模块 [ws])
1）指定监听端口 9001
var server = new ws.Server({port:9001});
2）接收客户请求
server.on(“connection”,(socket)=>{})
3）向对方发送消息
socket.send();
4）接收对方消息
socket.on(“message”,(msg)=>{})
socket.on(“close”,()=>{})
9.2 客户端
html5中新对象 WebSocket 发请求 发消息 接收消息
–创建webSocket对象[创建对象;发请求建立连接]
var socket = new WebSocket(“ws://127.0.0.1:9001”);
–向服务器发送消息
socket.send(stringMsg);
–接收服器消息
socket.onmessage = function(e){e.data}
–关闭连接
socket.close();
10 语义标签
header footer aside section等