下面懒鸟飞分享个本节课的知识点的实例代码，你可以直接复制到html网页中，看看各知识点的效果。代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5测试</title>
<style>
*{ margin:0 0;}
a{
text-decoration: none;
color:#666;
}
a:hover{
color:#333;}
li{list-style-type: none;}
/*----页面头部header----*/
header{ height:150px; background:#abcdef;}
nav{ border:0px solid #F00; line-height:30px; height:30px; background: #F90; margin:100px 0px 0px 0px;}
nav ul{}
nav ul li{
border:0px solid #F00;
float:left;
margin:0px 10px 0px 0px;
font-weight:bold;}
/*------页面中间div----*/
div{ border:0px solid red; overflow:hidden; margin:10px 0px 0px 0px;}
section{
height:700px;
background: #abcdef;
width:70%;
float:left;}
article{
background-color:#F93;
width:30%;
text-align:center;
margin:10px auto 10px auto;
padding:10px 0px 10px 0px;}
aside{
height:700px;
background:#abcdef;
width:29%;
float: right;
}
/*--------页面底部footer---------*/
footer{
height:100px;
background:#09C;
margin:10px 0px 0px 0px;
}
</style>
</head>
<body>
<!--头部header-->
<header>
<p>这是header板块</p>
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">新闻中心</a></li>
<li><a href="">图片中心</a></li>
<li><a href="">联系我们</a></li>
</ul>
</nav>
</header>
<!--/头部header-->
<!--主体部分-->
<div >
<section>
<p>这是section板块</p>
<article>
<h2>春晓</h2>
<p>
春眠不觉晓，<br />
处处闻啼鸟，<br />
夜来风雨中，<br />
花落知多少。
</p>
</article>
<hr />
<article>
<h2>春晓</h2>
<p>
春眠不觉晓，<br />
处处闻啼鸟，<br />
夜来风雨中，<br />
花落知多少。
</p>
</article>
<hr />
<figure>
<figcaption>UFO</figcaption>
<p>不明飞行物 Unkown flying object .</p>
</figure>
<figure>
<dt>DDS</dt>
<dd>大吊丝</dd>
</figure>
<hr />
<dialog> <!--用来显示对话-->
<dt>小明：今天天气真好</dt>
<dd>小红：是啊，真好</dd>
</dialog>
<hr />
<menu>
<li>点击</li>
<li>右键单击</li>
</menu>
<hr />
<div contextmenu="candan">右键单击试试</div> <!--定义右键菜单项-->
<menu type="context" id="candan">
<menuitem label="菜单一" onclick="alert('这是菜单一');" icon="http://www.baidu.com/img/bdlogo.gif" ></menuitem>
<menuitem label="菜单1" onclick="alert('这是菜单1');" icon="http://d.lanrentuku.com/down/gif/gif-0145.gif"></menuitem>
</menu>
<hr />
<div style='display:inline' contextmenu="mymenu">右击我试试</div>
<menu type="context" id="mymenu">
<menuitem label="菜单1" onclick="alert('这是菜单1');" icon="http://d.lanrentuku.com/down/gif/gif-0145.gif"></menuitem>
<menuitem label="菜单2" onclick="alert('这是菜单2');" icon="http://d.lanrentuku.com/down/gif/gif-0161.gif"></menuitem>
<menu label="菜单3">
<menuitem label="菜单3-1" icon="http://up.2cto.com/2012/0407/20120407090812492.gif" onclick="alert('这是菜单3-1');">
</menuitem>
<menu label="菜单3-2" >
<menuitem label="菜单3-2-1" icon="http://up.2cto.com/2012/0407/20120407090813196.gif" onclick="alert('这是菜单3-2-1');">
</menuitem>
</menu>
</menu>
</menu>
<hr />
<meter min="0" max="10" value="5" low="3" high="7"> <!--状态条，显示温度气压--></meter>
<progress max="100" value="0" id="pro"><!--加载、进度条,可用js控制--></progress>
<script>
var pro=document.getElementById("pro");
setInterval(function(){ <!--注意setInterval();区分大小写，这个名称写对，名称会变成浅绿色，不成功只是黑色-->
pro.value+=1;
},10);
</script>
<hr />
<details>
<dt>这是一个问题</dt>
<dd>To be or Not to be.</dd>
</details>
<hr />
<ruby> <!--给生僻字做注释-->
夼 <rp>(</rp><rt>kuang</rt><rp>)</rp> <!--<rt>在字的上方注释拼音,<rp>用来注释括号-->
</ruby>
<hr />
<mark>这是mark标签用法</mark>，mark主要用黄色选中样式来突出重点文字。
</section>
<aside>
<p>这是aside板块</p>
<hgroup>
<h3>侧边栏标题列表测试</h3>
<h3>侧边栏标题列表测试</h3>
<h3>侧边栏标题列表测试</h3>
<h3>侧边栏标题列表测试</h3>
<h3>侧边栏标题列表测试</h3>
</hgroup>
</aside>
</div>
<!--主体部分-->
<!--底部footer-->
<footer>
<p>这是footer板块</p>
<small>底部测试</small>
<small>底部测试</small>
<small>底部测试</small>
<small>底部测试</small>
</footer>
<!--/底部footer-->
</body>
</html>
淘宝店
