1.用于绘画的canvas元素
2.用于媒介回放的video和audio元素
video,audio标签
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放 |
preload | load;auto - 当页面加载后载入整个视频meta - 当页面加载后只载入元数据none - 当页面加载后不载入视频 | 如果出现该属性,则视频在页面加载时进行加载,并预备播放如果使用 "autoplay",则忽略该属性 |
src | 要播放的视频的 URL | |
height | px | 设置视频播放器的高度 |
width | px | 设置视频播放器的宽度 |
video、audio-方法、属性以及事件
方法 | 属性 | 事件 |
---|---|---|
play() | currentSrc | play |
pause() | currentTime | pause |
load() | videoWidth | progress |
canPlayType | videoHeight | error |
duration | timeupdate | |
ended | ended | |
error | abort:在退出时运行的脚本 | |
paused | empty | |
muted | emptied | |
seeking | waiting | |
volume | loadedmetadata | |
height | ||
width |
3.对本地离线存储的更好的支持
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本
1.什么是应用程序缓存(Application Cache)?
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问
优势:
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
4.新的特殊内容元素,比如 article,footer,header,nav,section
5.新的表单控件,比如 calendar,date,time,email,url,search
6.拖放:抓取对象以后拖到另一个位置
1.使元素可拖动,把draggable属性设置为true
2.拖动什么-ondragstart 和setData()
3.放到何处-ondragover
4.进行放置 - ondrop
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
7.SVG:可伸缩矢量图形
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
8.SVG的优势
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
9.Canvas 与SVG的比较 Canvas:
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG:
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用
I
10.地理定位 (Geolocation API)
11.Web存储
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个session的数据存储,用户关闭浏览器窗口后,数据会被删除
cookie-不适合大量数据的存储
三者之间的区别:
1、数据有效期不同
sessionStorage:仅在当前浏览器窗口关闭之前有效;
localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭
2、数据功能不能
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下
3、存储大小限制也不同
cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。
sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
4、作用域不同
sessionStorage:不在不同的浏览器窗口中共享,即使是同一个页面;
localstorage:在所有同源窗口中都是共享的;
cookie:也是在所有同源窗口中都是共享的;
5、web Storage(sessionStorage,localstorage)支持事件通知机制,可以将数据更新的通知发送给监听者
6、web Storage的api接口使用更方便
sessionStorage与localStorage的用法一致:
window.sessionStorage.clear(all);
window.sessionStorage.removeItem(key);
window.sessionStorage.setItem(key, value);
window.sessionStorage.getItem(key)
cookie用法:
$.cookie(key);
$.cookie(key,value);
12.Web Workers
运行在后台的JavaScript,不会影响页面的性能
Web Workets无法访问windowd对象,document对象,parent对象
Web Workers 的使用
```
// workers.js
var i=0;
function timedCount()
{
i=i+1;
postMessage(i); //用于向HTML页面传回一段消息
setTimeout("timedCount()",500);
}
timedCount();
```
```
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined") //检测是否存在worker
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js"); //创建Web Worker
}
w.onmessage = function (event) { //事件监听器: 当web worker 传递消息时,会执行事件监听器中的代码
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate(); //终止web worker
}
</script>
</body>
</html>
```
13.服务器发送事件
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新
1.Server-Sent事件 - 单向消息传递
2.Server-Sent事件指的时网页自动获取来自服务器的更新
3.EventSource 对象用于接收服务器发送事件通知
```
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
```
1.创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
2.每接收到一次更新,就会发生 onmessage 事件
3.当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中
服务器端
1.把报头 "Content-Type" 设置为 "text/event-stream"
2.规定不对页面进行缓存
3.输出发送日期(始终以 "data: " 开头)
4.向网页刷新输出数据