<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>css3的属性的设置</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
position: relative;
animate:myfirst 5s linear 2s infinite alternate;
-moz-animate:myfirst 5s linear 2s infinite alternate;
-webkit-animate:myfirst 5s linear 2s infinite alternate;
-o-animate:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst{
0% {background: red; left: 0;top: 0;}
25%{background: yellow; left: 200px; top: 0;}
50% {background: red; left: 0;top: 0;}
75%{background: yellow; left: 200px; top: 0;}
100% {background: red; left: 0;top: 0;}
}
@-moz-keyframes myfirst{
}
@-webkit-keyframes myfirst{
}
@-o-keyframes myfirst{
}
.css3{
border-radius: 20px;
box-shadow: x y 模糊程度 #888;
border-image:;
text-shadow:x y 模糊的程度 #888;
word-wrap:break-word;
transition:width 2s linear 2s;
-webkit-transition:width 2s linear 2s;
background:-webkit-linear-gradient(red,blue);
background:linear-gradient(red,blue);
}
@font-face{
font-family: myfirstfont;
src:url();
font-weight: bold;
}
div:hover
{
width:300px;
}
</style>
<style>
</style>
</head>
<body>
<div></div>
<div class="html5">
sessionstorage,localstorage:
sessionStorage用于本地存储一个会话的数据，只有 在同一个会话的页面才能访问并且当会话结束后数据也随之销毁
localstorage:用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期
</div>
<script>
if(window.localstorage){}else{}
localstorage.t1='cdvf';
localstorage.['t2']='cfdv';
localstorage.setItem("t4",'cfdesfv');
localstorage.getItem('t5');
localstorage.length;
localstorage.key(0);
localstorage.clear();
localstorage.removeItem('t1');
</script>
<div class="html5">
html5离线存储适合玩游戏
1,apache的配置
2,index.php引入html 头部引入mianfest
3，在foffice.mainfest中引入如下的内容
apache
4,ie版本不支持，苹果和andirod版本支持
</div>
<div class="html5">
html5的历史管理
1，改变hash值进行管理的方法
window.location.hash=ord;
window.onhashchange=function(){
var number=obj[window.location.hash.substring(1)];
2,history
history.pushstate(number,'',obg++);
window.onpopstate=function(ev){
var number=ev.state||'';
}
<div class="html5">
canvas
getcontext('2d')
1,填充、描边（fillStyle,strokeStyle）
2,绘制矩形（fillRect strokeRect clearRect(x,y,长，宽)
3,绘制路径(beginPath src(x,y,r,0,2M,false))
）
4,绘制文本(filltext('文本'x,y,可选的最大的像素宽度)
stroketext('文本',x,y,可选的最大像素宽度)
)
audio:音频（mp3,ogg,wav）
video:视频(mp4,ogg,webm)
embed:标签定义的嵌入的内容
source:定义多个数据来源
</div>
<div class="html5">
datalist
datatime
output
data
month
time
</div>
}
</div>
<div class="html5">
html5 postmessage跨域
</div>
//a.com/index.html
<iframe src="b.com/index.html" id='ifr' frameborder="0"></iframe>
<script>
window.onload=function(){
var ifr=document.getElementById('ifr');
var targetOrigin='http://b.com';
ifr.contentWindow.postmessage('i am there',targetOrigin);
}
</script>
//b.com/index.html
<script>
window.addEventListener('message',function(event){
if(event.origin='http://a.com'){
alert(event.data);
}
},false)
</script>
</body>
</html>