标签：
header标签,aside标签,footer标签
<!doctype html>
<html>
<head>
<style>
/*
*{border:1px solid red;height:20px}
所有的html5结构标签本质上来说就是一个div标签，只不过有意义
*/
/*页面头部 header*/
header{height:150px;background:#ABCDEF}
nav{height:30px;background:#FF9900;margin-top:100px}
nav ul li{width:100px;height:30px;float:left;line-height:30px}
/*页面中间 div */
div{margin-top:10px;height:1100px}
section{height:1100px;background:#ABCDEF;width:70%;float:left}
article{background:#ff9900;width:500px;margin:0 auto;text-align:center}
aside{height:700px;background:#ABCDEF;width:28%;float:right}
/*页面底部 footer*/
footer{height:100px;background:#ABCDEF;clear:both;margin-top:10px}
</style>
</head>
<body>
<header>
<p>这是一个header标签</p>
<nav>
<ul>
<li>首页</li>
<li>企业</li>
<li>论坛</li>
<li>商城</li>
<li>社区</li>
</ul>
</nav>
</header>
<div>
<section>
<p>这是一个section标签</p>
<article>
<h2>春晓</h2>
<p>
春眠不觉晓，<br/>
处处蚊子咬。<br/>
打上敌敌畏，<br/>
不知死多少。<br/>
</p>
</article>
<hr/>
<article>
<h2>上学歌</h2>
<p>
太阳当空照，<br/>
花儿对我笑，<br/>
小鸟说早早早，<br/>
你为什么背上小书包？<br/>
</p>
</article>
<hr/>
<article>
<h2>上学歌</h2>
<p>
我要炸学校，<br/>
老师不知道，<br/>
一拉线，赶快跑，<br/>
轰的一声学校炸没了！<br/>
</p>
</article>
<hr/>
<figure>
<figcaption>UFO</figcaption>
<p>不明飞行物 Unknown Flying Object</p>
</figure>
<figure>
<dt>DDs</dt>
<dd>大屌丝</dd>
</figure>
<hr/>
<dialog>
<dt>唐僧：悟空，你又调皮了，为师都告诉你了不要到处乱丢垃圾的。。。</dt>
<dd>悟空：。。。。。。</dd>
<dt>唐僧：砸到花花草草是不对滴</dt>
<dd>悟空：。。。。。。</dd>
</dialog>
<hr/>
<menu>
<li>点击</li>
<li>右键单击</li>
</menu>
<hr/>
<span contextmenu="candan">右键点击我试试</span>
<menu type="context" id="candan">
<menuitem label="菜单一" onclick="alert(‘我很寂寞‘)" icon="http://www.baidu.com/img/bd_logo.png"></menuitem>
</menu>
<hr/>
<meter min="0" max="10" value="5" low="3" high="7"></meter>
<progress max="100" value="0" id="pro"></progress>
<script>
var pro =document.getElementById{‘pro‘};
setInterval(function(){
pro.value+=1;
},100);
</script>
<hr/>
<details>
<dt>这是一个问题</dt>
<dd>yes</dd>
<dt>这是一个问题</dt>
<dd>yes</dd>
<dt>这是一个问题</dt>
<dd>yes</dd>
</details>
<hr/>
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp><ruby>
<hr/>
女人<mark>最喜欢</mark>做的事情就是逛街。。。。。。
</section>
<aside>
<p>这是一个aside标签</p>
<hgroup>
<h3>女生宿舍为何频频被盗？</h3>
<h3>两百头母猪为何半夜惨死？</h3>
<h3>还是道德沦丧</h3>
</hgroup>
</aside>
</div>
<footer>
<p>这是一个footer标签</p>
<hr/>
<small>法律条约</small>
<small>联系我们</small>
<small>准备跳转</small>
</footer>
</body>
</html>
太阳系
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>太阳系</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000" style="background:#000000">您的浏览器不支持canvas标签！请换一个浏览器</canvas>
<script>
//设置2d绘图环境
var cxt=document.getElementById(‘canvas‘).getContext(‘2d‘);
//轨道
function drawTrack(){
for(var i=0;i<8;i++){
cxt.beginPath();
cxt.arc(500,500,(i+1)*50,0,360,false);
cxt.closePath();
//设置笔触颜色
cxt.strokeStyle="#fff";
cxt.stroke();
}
}
drawTrack();
//星球
function Star(x,y,radius,cycle,sColor,eColor){
//画出星球需要那些属性
//星球的坐标点
this.x=x;
this.y=y;
//星球的半径
this.radius=radius;
//公转周期
this.cycle=cycle;
//星球的颜色（开始色，结束色）
this.sColor=sColor;
this.eColor=eColor;
//新建一个渐变颜色空对象
this.color=null;
//设置一个计时器
this.time=0;
this.draw=function(){
//保存之前的画布内容
cxt.save();
//重置0，0坐标点
cxt.translate(500,500);
//设置旋转角度
cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
//画星球
cxt.beginPath();
cxt.arc(this.x,this.y,this.radius,0,360,false);
cxt.closePath();
//设置星球的填充颜色
//心渐渐变对象
this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
//设置渐变效果
this.color.addColorStop(0,this.sColor);//渐变开始点和颜色
this.color.addColorStop(1,this.eColor);//渐变结束点和颜色
cxt.fillStyle=this.color;//将渐变对象复制给填充画笔
//填充星球
cxt.fill();
//恢复之前保存的画布内容
cxt.restore();
//执行完毕之后时间加1
this.time+=1;
}
}
//创建一个太阳对象的构造函数
function Sun(){
Star.call(this,0,0,20,0,"#f00","#f90");
}
//创建一个水星的对象构造方法
function Mercury(){
Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40");
}
//创建一个金星的对象构造方法
function Venus(){
Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");
}
//创建一个地球的对象构造方法
function Earth(){
Star.call(this,0,-150,10,365.224,"#78D1E8","#050C12");
}
//创建一个火星的对象构造方法
function Mars(){
Star.call(this,0,-200,10,686.98,"#CEC986","#76422D");
}
//创建一个木星的对象构造方法
function Jupites(){
Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222");
}
//创建一个土星的对象构造方法
function Satum(){
Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533");
}
//创建一个天王星的对象构造方法
function Uranus(){
Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A");
}
//创建一个海王星的对象构造方法
function Neptune(){
Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73");
}
var sun=new Sun();
var mercury=new Mercury();
var venus=new Venus();
var earth=new Earth();
var mars=new Mars();
var jupites=new Jupites();
var satum=new Satum();
var uranus=new Uranus();
var neptune=new Neptune();
function move(){
//清除画布
cxt.clearRect(0,0,1000,1000);
//画出轨道
drawTrack();
//画出各个星球
sun.draw();
mercury.draw();
venus.draw();
earth.draw();
mars.draw();
jupites.draw();
satum.draw();
uranus.draw();
neptune.draw();
}
//是各个星球进行运动
setInterval(move,10);
</script>
</body>
</html>
时钟
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>时钟</title>
</head>
<body>
<canvas id="clock" width="500" height="500">您的浏览器不支持canvas标签！请换一个浏览器</canvas>
<script>
var clock=document.getElementById(‘clock‘);
var cxt=clock.getContext(‘2d‘);
function drawClock(){
//清除画布
cxt.clearRect(0,0,500,500);
var now=new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();
//小时必须获取浮点类型（小时+分数转化成的小时）
hour=hour+min/60;
//问题是时间格式,将24小时的进制转换为12小时的进制
hour=hour>12?hour-10:hour;
//表盘
cxt.lineWidth=10;
cxt.strokeStyle="blue";
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);
cxt.closePath();
cxt.stroke();
//刻度
//时刻度
for(var i=0;i<12;i++){
cxt.save();
cxt.lineWidth="7"
cxt.strokeStyle="black";
//先设置0，0点
cxt.translate(250,250);
//在设置旋转角度
cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度;
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//分刻度
for(var i=0;i<60;i++){
cxt.save();
cxt.lineWidth="3"
cxt.strokeStyle="black";
//先设置0，0点
cxt.translate(250,250);
//在设置旋转角度
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//时针
cxt.save();
//设置时针风格
cxt.lineWidth=7;
cxt.strokeStyle="black"
//设置异次元空间的0，0点
cxt.translate(250,250);
//在设置旋转角度
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
//设置分针风格
cxt.lineWidth=5;
cxt.strokeStyle="black"
//设置异次元空间的0，0点
cxt.translate(250,250);
//在设置旋转角度
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
//设置分针风格
cxt.lineWidth=3;
cxt.strokeStyle="red"
//设置异次元空间的0，0点
cxt.translate(250,250);
//在设置旋转角度
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//画出时针、分针和秒针的交叉点
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
//设置填充样式
cxt.fillStyle="gray";
cxt.fill();
//设置笔触样式(秒针已设置)
cxt.stroke();
//设置秒针前端的小圆点
cxt.beginPath();
cxt.arc(0,-150,5,0,360,false);
//设置填充样式
cxt.fillStyle="gray";
cxt.fill();
//设置笔触样式(秒针已设置)
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//使用setInterval（代码，毫秒时间） 让时钟动起来
drawClock();
setInterval(drawClock,1000);
</script>
</body>
</html>
标签：
原文地址：http://my.oschina.net/u/1994482/blog/468379
