html5 鸟瞰
为 HTML5 建立的一些规则：
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
新特性
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
html5 video 元素
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
<video width="320px" height="250px" controls = 'controls'>
<source src='.\colors.mp4' type = 'video/mp4'>
your brower does not support the video tag
<source src='DontPanic.ogg' type = 'video/ogg'>
</video>
video的标签参数
controls width height src preload autoplay loop
【Video + DOM】
<DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<video id = "video" src= 'mov_bbb.mp4' preload= "none" width="300px" height="300px" controls ="controls"> wrong in your page</video>
<p>
<button onclick= "playPause()">开始/暂停</button>
<button onclick = "mkbig()">变大</button>
<button onclick = "mkmid()">变中</button>
<button onclick = "mksmall()">变小</button>
</p>
</body>
<script type="text/javascript">
var video = document.getElementById('video');
function playPause(){
if(video.paused){
video.play();
}else{
video.pause();
}
}
function mkbig(){
video.width=900;
}
function mkmid(){
video.width=500;
}
function mksmall(){
video.width= 320;
}
</script>
</html>
【html5拖拽】
<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>
<div id = "div2" onra ></div>
<div style="border:1px solid red ; width:200px;height:30px;";></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
拖动时触发 ondragstart属性, 事件drag ev.target返回哪个DOM元素触发了事件
指的就是当前的这个拖动的对象
setData(format ,data) 设置被拖放数据的数据类型和值,用format类型data值。
ondragover 在可拖动元素或选取的文本正在拖动到放置目标时触发
ondrop 拖动元素拖拽结束时触发
【canvas 画图】
html5只是提供了一个canvas标签
<canvas id= "" width="" height="" ></canvas>
js: /选中 .getContext(); .fillStyle .fillRect
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
【localstroge/sessionstroge 本地存储方法】
document.write() 方法将数据存到本地localStorge
localStorage.lastname ="smith";
document.write(localStorage.lastname);
sessionStorage.lastname = "smith";
document.write(sessionStorge.lastname);
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits: " + localStorage.pagecount + " time(s).");
sessionStorge 同理;
【html5应用程序缓存】
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
<html manifest="demo.appcache">
【html5的 web worker】
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始 Worker</button>
<button onclick="stopWorker()">停止 Worker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("./worker.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>
---
创建一个 Worker 对象 初始化一个要进行执行的js脚本
onmessage 事件监听器
当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据 postMessage()中的数据
.terminate() 方法 终止释放 worker 资源
worker.js
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
----
用postMessage() 方法向html 页面传回一段消息;
浙公网安备 33010602011771号