html5页面结构标签
<style>
header{
height:80px;
background-color:#FCF;
}
nav{
height:30px;
background-color:#FF9;
margin-top:32px;
}
nav ul li{
list-style:none;
float: left;
width:60px;
line-height:30px;
margin-left:1px;
text-align:center;
}
nav ul li a{
text-decoration:none;
display:block;
background-color:#F60;
color:#FFFFFF;
}
nav ul li a:hover{
background-color:#F00;
color:#FFFFFF;
}
#con{
height:900px;
background-color:#9FF;
}
section{
height:900px;
float:left;
width:75%;
background-color:#F9F;
}
aside{
height:900px;
float:left;
border-left:2px solid #FFFFFF;
}
footer{
clear:both;
height:80px;
background-color:#90F;
}
</style>
</head>
<body>
<!-- 页眉 -->
<header>
<p>LOGO</p>
<nav>
<ul>
<li><a href="#">哈哈</a></li>
<li><a href="#">哈哈</a></li>
<li><a href="#">哈哈</a></li>
<li><a href="#">哈哈</a></li>
</ul>
</nav>
</header>
<div id="con">
<section>
<!-- 文章 -->
<figure>
<figcaption style="text-align:center">标题</figcaption>
<p>正文</p>
</figure>
<hr>
<!-- 对话 -->
<p>
<dt>男:</dt>
<dd>今天公交车上的人很多,第一站上来5个人,第二站上来28个人下去3个人
第三站上来14个人下去20个人,第四站上来6个人下去8个人</dd>
<dt>问题:</dt>
<dd>这个男人坐了几站车?</dd>
</p>
<hr>
<!-- 菜单 -->
<menu>
<menuitem>菜单一</menuitem>
<menuitem>菜单二</menuitem>
</menu>
<span contextmenu="menu1">右键大力点击我(仅限FF浏览器支持)</span>
<menu id="menu1" type="context">
<menuitem onclick="alert(111);" icon="1.ico">哈哈</menuitem>
</menu>
<hr>
<!-- 进度条 -->
温度/压力:<meter min="0" max="10" value="5" style="width:180px;"></meter><br>
温度/压力:<meter min="0" max="10" value="2" low="3" style="width:180px;"></meter><br>
温度/压力:<meter min="0" max="10" value="9" high="8" style="width:180px;"></meter><br>
进度:<progress id="pro1" max="100" value="0"></progress>
<script>
setInterval(function (){
var v = document.getElementById("pro1").value;
v = Number(v);
v += 3;
document.getElementById("pro1").value = v;
}, 1000);
</script>
<hr>
<!-- 音
标 -->
<p>
<ruby>仐<rt>tao</rt></ruby>
</p>
<hr>
<!-- 详细信息 -->
<details>
<summary>详细信息描述(chrome浏览器支持)</summary>
<p>哈哈</p>
</details>
<hr>
<!-- 记号 -->
<p>
今天的考试重点是: html5的<mark style="background-color:#0F0">页面结构</mark>标签
</p>
</section>
<aside>侧边栏</aside>
</div>
<footer>
<div style="text-align:center">copyright © xxxxx公司</div>
</footer>
</body>