12、html5新增标签

下面是传统的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>的作用的是高亮。

12、html5新增标签

section、nav这两个标签的例子

推荐阅读更多精彩内容