HTML5 新特性
一.语义化标签
HTML5提供了很多语义化标签
<header>
页眉内容<nav>
导航<section>
表示文档的一个区域,通过是否含一个标题作为子节点来辨识<aside>
与文档无关的内容<footer>
页脚内容<article>
表示文档、页面、应用或网站中的独立结构<address>
地址信息
语义化标签的优点:- 在丢失样式的时候,仍然会显示出清晰的结构
- 方便搜索引擎检索,有利于SEO
- 方便其他设备解析(如屏幕阅读器,移动设备)
- 增强代码的可读性,方便开发与维护,有利于团队协作
二.表单增强
HTML5提供了更多的input输入类型,可以更好进行输入控制与验证。新增了一些form表单标签以属性。
新增的input类型:
- color 颜色
- number 数字
- range 范围
- url URL输入
- datetime 日期(UTC)
- datetime-local 日期(无时区)
- date 日期
- month 月
- week 周
- time 时间
- email 邮件
- tel 电话
- search 搜索
新增的表单标签
<datalist>
用户在输入时可以看到的可选项列表<progress>
展示进度条<meter>
刻度值,温度,分数,重量等<keygen>
用于验证,生成一个公钥与私钥<output>
展示输出结果
新增的属性
- placeholder input默认展示是的文本
- required 输入内容是否可以为空
- pattern 用一个正则表达式验证输入的值
- min/max 设置最大最小值
- step 数字间隔
<input type="number" min="0" max="10" step = ‘1’>
- width/height
<input type="image" width="100px" height="100px" >
- autofoucs 页面加载成功时,域自动获得焦点
- multiple input标签可以选择多个值
三. 拖放API
拖拽: drag
释放: drop
事件
- 被拖拽的源对象可以触发的事件:
- ondragstart: 源对象开始被拖动
- ondrag: 源对象被拖动过程中
- ondragend:源对象被释放
- 拖拽的目标对象触发的事件:
- ondragenter 拖拽源对象进入目标对象
- ondragover 拖拽源对象悬停在目标对象上方
- ondragleave 拖拽源对象离开目标对象
- ondrop 拖拽源对象在目标对象上释放
数据传输
HTML5提供了一些方法可以在拖拽源对象与目标对象之间传递数据
- e.datatransfer() 数据传输对象
- e.datatransfer().setData(K,V) 源对象上保存数据 K,V都是字符串
- e.datatransfer().getData(K,V) 目标对象上读取数据
三.音频和视频
html5提供了视频和音频标签用来播放视频和音频。
视频
-
支持的视频格式:ogg,MPEG 4,WebM 三种格式。由于版权原因,不同浏览器支持的格式不同。
-
video标签的使用十分简单。
<video src="./video/video.mp4" controls></video> //多浏览器支持的方案 <video controls> <source src="./video.video.ogg"> <source src="./video.video.mp4"> 你的浏览器不支持HTML视频播放功能 </video>
-
可以通过附加属性来实现更好的交互效果。
autoplay 自动播放
controls 默认播放控件
loop 循环播放
width/height 宽高
音频
- 支持的音频格式: mp3,ogg,wav.不同的浏览器支持的格式不同
- audio标签的使用也十分简单
<audio src="./audio/audio.mp3"></audio> //支持多数浏览器的方案 <audio controls> <source src="./src/a.mp3"> <source src="./src/b.ogg"> <source src="./src/c.wav"> </audio>
- 可以通过附加属性来实现更好的交互效果。
- autoplay 自动播放
controls 默认播放控件
loop 循环播放
width/height 宽高
API
-
方法
addTextTrack() 向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频类型
load() 重新加载音频/视频元素
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频
requestFullScreen() 全屏
cancelFullScreen() 取消全屏 -
属性
audioTracks 返回表示可用音轨的 AudioTrackList 对象
autoplay 设置或返回是否在加载完成后随即播放音频/视频
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller 返回表示音频/视频当前媒体控制器的 MediaController 对象
controls 设置或返回音频/视频是否显示控件(比如播放/暂停等)
crossOrigin 设置或返回音频/视频的 CORS 设置
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置(以秒计)
defaultMuted 设置或返回音频/视频默认是否静音
defaultPlaybackRate 设置或返回音频/视频的默认播放速度
duration 返回当前音频/视频的长度(以秒计)
ended 返回音频/视频的播放是否已结束
error 返回表示音频/视频错误状态的 MediaError 对象
loop 设置或返回音频/视频是否应在结束时重新播放
mediaGroup 设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)
muted 设置或返回音频/视频是否静音
networkState 返回音频/视频的当前网络状态
paused 设置或返回音频/视频是否暂停
playbackRate 设置或返回音频/视频播放的速度
played 返回表示音频/视频已播放部分的 TimeRanges 对象
preload 设置或返回音频/视频是否应该在页面加载后进行加载
readyState 返回音频/视频当前的就绪状态
seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking 返回用户是否正在音频/视频中进行查找
src 设置或返回音频/视频元素的当前来源
startDate 返回表示当前时间偏移的 Date 对象
textTracks 返回表示可用文本轨道的 TextTrackList 对象
videoTracks 返回表示可用视频轨道的 VideoTrackList 对象
volume 设置或返回音频/视频的音量 -
事件
abort 当音频/视频的加载已放弃时
canplay 当浏览器可以播放音频/视频时
canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange 当音频/视频的时长已更改时
emptied 当目前的播放列表为空时
ended 当目前的播放列表已结束时
error 当在音频/视频加载期间发生错误时
loadeddata 当浏览器已加载音频/视频的当前帧时
loadedmetadata 当浏览器已加载音频/视频的元数据时
loadstart 当浏览器开始查找音频/视频时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
progress 当浏览器正在下载音频/视频时
ratechange 当音频/视频的播放速度已更改时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
seeking 当用户开始移动/跳跃到音频/视频中的新位置时
stalled 当浏览器尝试获取媒体数据,但数据不可用时
suspend 当浏览器刻意不获取媒体数据时
timeupdate 当目前的播放位置已更改时
volumechange 当音量已更改时
waiting 当视频由于需要缓冲下一帧而停止 -
常用的方法
var video = $('video')[0];
//播放
$('button').eq(0).click(function(){
video.play();
});
//暂停
$('button').eq(1).click(function(){
video.pause();
});
//快进10s
$("button").eq(2).click(function () {
v.currentTime += 10;
});
//后退10s
$("button").eq(3).click(function () {
v.currentTime -= 10;
});
//二倍速
$("button").eq(4).click(function () {
v.playbackRate = 2;
});
//音量
$("button").eq(5).click(function () {
if(v.volume>=1){
v.volume = 1;
}else{
v.volume += 0.1;
}
});
//静音
$("button").eq(6).click(function () {
if(v.muted){
v.muted = false;//开音
}else {
v.muted = true;
}
});
//全屏
$("button").eq(7).click(function () {
//有兼容性问题. 在js中使用驼峰命名法来设置
v.webkitRequestFullScreen();s
});
四.Canvas
Canvas 画布,用于图形的绘制。通过脚本(javascript)来实现。
- Canvas 容器
<canvas id="cvs" width="100" height="100">
- 脚本
var cvs = document.querySelector('#cvs');
var ctx = cvs.getContext('2d')
ctx.beginPath();
ctx.lineWidth="5"; // 线宽
ctx.strokeStyle="red"; // 红色路径
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke(); //绘制
五.SVG绘图
- 什么是SVG
SVG 是可伸缩矢量模型。
SVG用于定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG是万维网联盟的标准 - 优点
SVG 图像可通过文本编辑器来创建和修改;
SVG 图像可被搜索、索引、脚本化或压缩;
SVG 是可伸缩的;
SVG 图像可在任何的分辨率下被高质量地打印;
SVG 可在图像质量不下降的情况下被放大; - SVG 示例
<svg xmls="http://www.w3.org/2000/svg" version="1.1" height="500px" width="500px">
<circle cx="200" cy="100" r="100" stroke="#afeedd"
stroke-width="5" fill="#f0ddff" />
</svg>
stroke 和 stroke-width 属性控制如何显示形状的轮廓,fill 属性设置形状内的颜色;
- Canvas 与 SVG的区别与联系
- SVG适用于描述XML中的2D图形的语言
- Canvas随时随地绘制2D图形(使用javaScript)
- SVG是基于XML的,意味这可以操作DOM,渲染速度较慢
- 在SVG中每个形状都被当做是一个对象,如果SVG发生改变,页面就会发生重绘
- Canvas是一像素一像素地渲染,如果改变某一个位置,整个画布会重绘。
- Canvas
依赖分辨率
不支持事件处理器
能够以.png或.jpg格式保存结果图像
文字呈现功能比较简单
最合适图像密集的游戏 - SVG
不依赖分辨率
支持事件处理器
复杂度会减慢搞渲染速度
适合大型渲染区域的应用程序
不适合游戏应用
六.地理API
通过geolocation.getCurrentLocation() 获取位置信息,以实现LBS服务
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var longtitude = position.coords.longitude,
latitude = position.coords.latitude;
showObject(position.coords,0);
},function (error) {
switch (error.code) {
case '1':
alert("位置服务被拒绝");
break;
case '2':
alert("暂时获取不到位置信息");
break;
case '3':
alert("获取信息超时")
break;
default :
alert("未知错误")
break;
}
},{
enableHighAccuracy: true,
maximumAge: 100,
accuracy:100
})
} else {
alert("你的浏览器不支持使用HTML5获取位置信息")
}
}
function showObject(obj,k) {
if(!obj) return ;
for(var i in obj) {
if(typeof obj[i] !== "object" || obj[i] === null) {
for(var j=0;j<k;j++) {
document.write('      ');
}
document.write(i + " : " + obj[i] + "<br/>");
} else {
document.write(i + " : " + obj[i] + "<br/>");
showObject(obj[i],k+1);
}
}
}
getLocation();
七.WebStorage
- WebStorage 是HTML5提供的持久化解决方案,意于解决本来不该由cookie解决的本地存储问题。
- WebStorage提供了两种API,localStorage和sessionStorage。localstorage 用于永久性的数据存储,数据一直存在,除非手动清除。
sessionstorage 用于临时性的数据存储,只在会话期间有效,关闭浏览器后会自动删除 - API
localStorage sessionStorage 两个全局对象两个对象有相同的API- length 键值对的数量
- key根据index 获取键名
- getItem 根据key获取value
- setItem 添加键值对
- removeItem 根据key删除键值对
- clear 清空storage
- 事件
HTML5 规定了一个storage事件,在WebStorage发生变化时触发。
window.addEventListener('storage',function(e){
console.log(e.key+' is changed form '+e.oldValue+' to '+e.newValue+' by '+e.url );
console.log(e.storageArea ==localStorage);
})
相比于Cookie
- 容量上,Webstorage 有大概5M的大小,虽然存储图片,视频不够,但绝大多数操作足够了。
- 安全性:Webstorage 并不会在HTTP Header中附加数据,所以相对来说安全。
- Webstorage 不会在每次请求中都发送数据,可以节省不必要的流量。
注意点
- 浏览器兼容性,HTML5几乎被大多数浏览器兼容,IE7,IE6可以使用IE user data 实现。
- WebStoage 中键值对都是字符串的形式,其他类型的数据可以使用JSON对象的stringfiy和parse方法进行转换。
八.WebWorker
WebWorker 是HTML5提供的一个javascript多线程解决方案。可以通过传递一个javascript 文件给WebWoker,从而实现多线程执行。
使用方法
Web Worker的基本原理是,在当前文件中使用Worker类加载一个javascript文件来开辟一个新线程。同时提供了数据交换的接口:postMessage和onMessage。
worker = new Worker(url);
worker.postMessage(data);
worker.onmessage(function(data){
console.log(data)
})
worker.terminate(); //终止执行
//worker.js
onmessage = function(data) {
console.log(data);
}
postMessage(data);
Worker可以用来做什么
- 利用Worker可以在前端执行一些复杂的大量运算而不会影响页面的展示。
- 可以通过importScripts(url) 加载另外的脚本文件
- 可以使用setTimeout setInterval
- 可以使用XMLHTTPRequest来发送请求
- 可以访问navigator的部分属性。
局限性
- 不能跨域加载JS
- worker内代码不能访问DOM
- 兼容性与差异,FireFox支持在Worker中创建新的worker ,chrome中不行
九.WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
websocket 出现的原因
为了实现推送技术,很多网站采用了AJAX轮询的技术.轮询值得是以特定的事件间隔,有浏览器向服务器发送HTTP请求,服务器返回最新的数据给浏览器.这种模式有明显的的缺点.浏览器需要不断地发送求,HTTP请求可能包含较长的头部,真正有效的数据可能只占一小部分,会浪费较多的带宽资源.
使用WebSocket ,服务器与浏览器的连接只需要进行一次握手,就可以进行数据的相互传送.
API
var socket = new WebSocket(url,[protocol]);
- 属性
- socket.readyState
只读属性 readyState 表示连接状态,可以是以下值:
0 - 表示连接尚未建立。
1 - 表示连接已建立,可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。 - Socket.bufferedAmount
只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。
- socket.readyState
- 事件
- Socket.onopen 连接建立时触发
- Socket.onmessage 客户端接收服务端数据时触发
- Socket.onerror 通信发生错误时触发
- Socket.onclose 连接关闭时触发
- 方法
- Socket.send() 使用连接发送数据
- Socket.close() 关闭连接
参考链接
- https://www.jianshu.com/p/132b58273e27
- https://www.cnblogs.com/binguo666/p/10928907.html
- https://www.cnblogs.com/dolphinX/p/3348469.html
- https://www.cnblogs.com/feng_013/archive/2011/09/20/2175007.html