HTML5_Core.十大新特性

admin 管理员组

文章数量: 1086019

HTML5_CORE

• 1 增强型表单
• • • 1.1 新的input type
    • 1.2 新元素element
    • 1.3 新属性attr
• 2 视频音频
• • • 2.1 视频video
    • 2.2 音频audio
• 3 Canvas绘图
• • • 3.1 绘图概述
    • 3.2 canvas绘图画布
    • 3.3 canvas绘图文本
    • 3.4 canvas绘图路径
    • 3.5 canvas绘图图像
    • 3.6 canvas绘图旋转
    • 3.7 canvas渐变对象(过渡效果)
    • 3.8 canvas制作游戏
• 4 SVG绘图
• • • 4.1 svg与canvas比较
    • 4.2 svg开发流程
    • 4.3 第三方绘图库
    • 4.3.1 echarts直方图
    • 4.3.2 折线图
    • 4.3.3 仪表图
    • 4.3.4 饼图
• 5 地理定位
• • • 5.1 百度地图
• 6 拖放API
• 7 Web Worker
• 8 Web Storage
• • • 8.1 客户端存储技术
    • 8.2 session会话
• 9 Web Socket
• • • 9.1 服务器
    • 9.2 客户端
• 10 语义标签

1 增强型表单

1.1 新的input type

number;email;url;color;date;month;week

1.2 新元素element

1. datalist建议列表
   配合input创建建议列表，为用户提供输入内容的建议(与下拉selection相似，提示类似搜索框)

    <datalist id="list3">  默认情况datalist不可见 
       <option>xx</option>
       <option>yy</option>
    </datalist>
    <input type="text" list="list3"/>
   

2. progress进度条
   显示一个进度条两种形式：
   <progress> 左右晃动进度条
   <progress value=“0.7” /> 具有指定进度值进度条，可以配合定时器实现动态的进度条

3. meter刻度尺
   <meter min=“最小值” max=“最大值” low=“下限” high=“上限”
   optimum=“最佳值” value=“当前值” />
   使用low和high来分区间，
   当前值离最佳值非常远，相隔区间 (红)危险
   当前值离最佳值比较近，相邻区间 (黄)警告
   当前值离最佳值非常近，当前区间 (绿)正常

4. output输出
   语义标签，样式同span

1.3 新属性attr

1. autofocus：自动获取输入焦点

2. placeholder：占位符

3. form：把表单元素放在form外面

     <form id="f5">
     </form>
     <input type="text"  form="f5"/>
   

4. multiple：允许输入多值(但要用逗号分隔)

5. 验证相关
   1）required：必填项，内容不能为空
   2）minlength，maxlength：字符串长度
   3）min，max：最值
   4）pattern：正则表达式，可直接对input内容进行验证

2 视频音频

2.1 视频video

1. Flash
   1）Flash绘图(AS/Flex) -> Canvas+SVG
   https://echarts.baidu/ echarts第三方绘图库
   https://d3js/ d3绘图库
   2）Flash动画(游动) -> Canvas+第三方游戏平台
   https://www.cocos 微信小游戏
   3）Flash视频(音频) -> video/audio (90%)
   4）Flash存储 -> h5 WebStorage

2. 视频使用：<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>
   

3. 视频video常用属性
   controls:false 是否显示播放控件 <video controls>
   autoplay:false 是否自动播放 <video autoplay> 兼容性非常差
   loop:false 是否循环播放
   muted:false 是否静音播放
   poster:"" 在播放第一帧画面之前显示海报
   preload 视频预加载策略：页面加载完成后预加载视频内容
   -auto 预加载一定时长视频和元数据
   -metadata 只预加载元数据(时长;尺寸;第一帧画面)
   -none 不预加载任何数据

4. 视频video的js操作属性
   volume:1 //0~1
   playbackRate:1 回放速度大于1 快放小于1慢播
   paused:false 当前视频是否处于暂停状态
   play() 播放视频
   pause() 暂停播放
   onplay 当视频开始播放时触发事件
   onpause 当视频暂停播放时触发事件

5. video高级特性——样式
   object-fit: fill/contain/cover
   fill默认值将视频拉伸至恰好填满容器；
   contain保持宽高比例，容器留白；
   cover保持宽高比例，至恰好覆盖
   注意:cover;contain 使用比例多；如果创建视频与录制视频工程师 750*1334 iphone6 屏幕(全屏播放)

6. 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”>

7. 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绘图画布

1. 创建画布
   <canvas id=“c3” width=“500” height=“400”>
   注意：画布宽度和高度只能使用属性或js赋值,不能用css样式来赋值(css缩放)
2. 通过 js程序获取画布
   var c3 = document.getElementById(“c3”);
3. 通过 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比较

4.2 svg开发流程

1. 创建画布

   <svg id="s3" width="500" height="400">
   	图形标签
   </svg>
   

2. 画布中添加标签(图形)
   <rect x="" y="" width="" height="" fill="" fill-opacity="" stroke="" stroke-opacity="">

3. 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

4. 动态添加svg矩形
   svg可直接对其上图形绑定事件处理函数
   (1)html字符串拼接

    var html = "<rect></rect>";
    svg.innerHTML = html;
   

   (2)创建对象

   var rect = document.createElementNS("http://www.w3/2000/svg","rect");
   svg.appendChild(rect);
   

5. 动态添加svg圆形
   <circle r="" cx="" cy="">

6. 动态添加svg椭圆
   <ellipse rx="" ry="" cx="" cy="">
   cx,cy 圆心
   rx:水平半径 ry:垂直半径

7. 动态添加svg直线
   <line x1="" y1="" x2="" y2="">
   x1,y1 起点坐标
   x2,y2 终点坐标
   stroke-width=“5” stroke-linecap="round"线段圆角

8. 动态添加svg折线
   一条折线上可以有任意多个连续点
   <polyline points=“50,50 100,50 …”
   stroke="" fill=“transparent”>

9. 动态添加svg文本图像
   svg画布不能使用 span p标签不可以用
   <text font-size="" fill="" stroke="">文本内容
   <image xline:href=" x.png" x="" y="" width="" height=""/>

10. 动态添加svg渐变对象

      <defs>    定义特效对象:
       <linearGradient id="g3" x1="" y1="" x2="" y2="">
         <stop offset="" stop-color="" />
       </linearGradient>
      </defs>
      <ANY fill="url(#g3)"></ANY>
    

11. 动态添加svg滤镜(高斯模糊)

      <defs>
         <filter id="f3">
            <feGaussianBlur stdDeviation="模糊度" />//模糊度越大越模糊
         </filter>
      </defs>
      <ANY filter="url(#f3)"></ANY>
    

    svg关于滤镜的网址：https://developer.mozilla/zh-CN/docs/Web/SVG/Element/filter

群组group可以为内部所有标签设置统一属性
<g stroke-width=“5” stroke-linecap=“round”
stroke=“red”>

4.3 第三方绘图库

https://d3js/ d3开源免费库
https://echarts.baidu/ 百度开源免费库

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/
-百度分配 AccessKey 访问密钥
u70A5pnNrRtRT1XAgwM5jL2YIVj1Gv97
-在自己网站中嵌入百度地图 API

<script src="http://api.map.baidu/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技术提供二个对象存储数据

1. 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

2. 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);        		获取数据 key
   

   localStorage如果数据发生修改,触发一次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等

本文标签： 十大 新特性 HTML5Core