SOURCE

<div id="container" style="width:500px">

<div id="header" style="background-color:#ffc0cb;">
<h1 style="margin-bottom:0;text-align:center;">静态网页实训</h1></div>

<div id="menu" style="background-color:#808080;height:500px;width:200px;float:left;">
<b><form>
姓名: <input type="text" name="name"><br>
 <input class="a"  type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br/> 
密码: <input type="password" name="name"><br>
加密: <keygen name="security">
</form> </b><br>
  <form action="demo-form.php"id="p2">
  生日 (日期和时间): <input type="datetime-local" name="bdaytime">
	<input type="submit">
  <input type="range" name="points" min="1" max="10">	  
</form>
  <canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#ffc0cb';
ctx.fillRect(0,0,200,150);
</script>
  <nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
  
<ruby>
  漂 <rp>(</rp><rt>Piao</rt><rp>)</rp>
  亮 <rp>(</rp><rt>Liang</rt><rp>)</rp>
</ruby>
</div>
<div id="content" style="background-color:#EEEEEE;height:500px;width:300px;float:right;">
 <video width="300" height="200" controls> <source src="http://data.vod.itc.cn/?rb=1&prot=1&key=jbZhEJhlqlUN-Wj_HEI8BjaVqKNFvDrn&prod=flash&pt=1&new=/244/118/oggXgtJv24awoAcC0o1Cz5.mp4" type="video/mp4">
<source src="movie.mp4" type="video/ogg">
</video>
    下载进度：
<progress value="22" max="100">
</progress>
<P id="p1">你喜欢动物吗？</P>
<form action="">
<select name="cars">
<option value="cat">cat</option>
<option value="dog">dog</option>
<option value="beer" selected>beer</option>
<option value="rabbit">rabbit</option>
</select>
</form>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<form action="demo-form.php">
选择图片: <input type="file" name="img" multiple>
<input type="submit">
</form>
<section id="s1" align="center">奔跑吧~皮卡丘！！！</section>


    
</div>

<div id="footer" style="background-color:#ffc0cb;clear:both;text-align:center;"><p><b><a href="/css/" target="_blank">版权归2318.com</a></b></p>
</div>

</div>

#s1{width:215px;padding:40px;border:5px solid}
#p1{font-size:15px;background-color:pink;}
a:link {text-decoration:none;} 
a{list-style-type:circle;}
#p2{font-size:15px;}