下面是传统的html的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding:0;}
.header {width: 960px; height: 100px; margin: 0 auto; background: #f00; }
.layout {width: 960px; background: #eee;margin: 0 auto; overflow: hidden;}
.left {width: 250px; min-height: 400px; background: #0f0; float: left; }
.right {background: #f0f ; overflow: hidden;}
.footer {width: 960px; height: 100px; background: #000; margin: 0 auto; color:#fff;}
</style>
</head>
<body>
<div class="header"></div>
<div class="layout">
<div class="left">我是左栏</div>
<div class="right">我是右栏</div>
</div>
<div class="footer">我是尾部</div>
</body>
</html>
与传统的html代码相比，html5新增的几个标签可以代换传统的标签。
header、aside、article、footer...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding:0;}
header {width: 960px; height: 100px; margin: 0 auto; background: #f00; }
.layout {width: 960px; background: #eee;margin: 0 auto; overflow: hidden;}
aside {width: 250px; min-height: 400px; background: #0f0; float: left; }
article {background: #f0f ; overflow: hidden;}
footer {width: 960px; height: 100px; background: #000; margin: 0 auto; color:#fff;}
</style>
</head>
<body>
<header></header>
<div class="layout">
<aside>我是左栏</aside>
<article>我是右栏</article>
</div>
<footer>我是尾部</footer>
</body>
</html>
section、nav这两个标签的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding:0;}
header {width: 960px; height: 100px; margin: 0 auto; background: #f00; }
nav{ height: 60px; background: #000;color: #fff;}
.layout {width: 960px; background: #eee;margin: 0 auto; overflow: hidden;}
aside {width: 250px; min-height: 300px; background: #0f0; float: left; }
article {background: #f0f ; overflow: hidden;}
section {width: 200px;height: 200px; background: #0f6; float: left; margin-right: 20px; margin-bottom: 20px;}
footer {width: 960px; height: 100px; background: #000; margin: 0 auto; color:#fff;}
</style>
</head>
<body>
<header></header>
<nav>导航条</nav>
<div class="layout">
<aside>我是左栏</aside>
<article>
<section></section>
<section></section>
<section></section>
</article>
</div>
<footer>我是尾部</footer>
</body>
</html>
传统的插入图片并且下面给个标题的方法是，用<dl><dt><dd>这三个标签。
<section>
<dl>
<dt><img src="images/2.jpg" alt=""></dt>
<dd>北京</dd>
</dl>
</section>
效果如下：
这里用<figcaption>也可以实现同样的效果。
<section>
<figure>
<img src="images/2.jpg" alt=""/>
<figcaption>北京</figcaption>
</figure>
</section>
换句话说<mark>的作用的是高亮。
网友评论