H5新特性之语义化标签

语义化标签
H5新增了很多标签，今天我就带大家了解新增的H5语义化标签。在html中我们划分内容区域都是用div，而嵌套过多div标签后我们往往分不清哪一块代码是哪一块的内容，找起来会很不方便，但语义化标签可让人明白此标签有什么意思，不用给每一个div标签其名字。

header元素
用在网页的头部、一个区域块的头部

footer元素
一般用在网页底部

nav元素
导航、导航区域

main元素
主体内容（IE不兼容）可包含多个文章块

section元素
类似于div、secting更偏向划分区域，可划分网页上下板块

article元素
偏向于内容的展示，存放文章和页面主体内容。article内部也可以嵌套header和footer当作文章的题目和结束。

aside元素
在一旁，侧边。在article之外的，与article内容相关的辅助信息。可以存放一些图文和次要信息。

figure元素
表示一块独立的内容

figcaption元素
figure元素的标题（一般放在figure的第一位或者最后一位）

hgroup
标题的一个分组

mark元素
高亮显示，默认背景为黄色（内联元素）

time元素
时间

dialog元素
定义一个类似微信的对话框

网页结构效果图

html代码如下

 <div class="box">
        <header>header元素</header>
        <section>
            <nav>
                <h2>nav元素</h2>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </nav>
            <main>
                <article>
                    <header>article元素 header</header>
                    <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                    <footer>article元素 footer</footer>
                </article>
                <article>
                    <header>article header</header>
                    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
                    <footer>article footer</footer>
                </article>
            </main>
            <aside>aside元素</aside>
        </section>
        <footer>footer元素</footer>
    </div>

css样式代码如下

<style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:1000px;
            height:600px;
            margin:0 auto;
            border:5px solid gray;
        }

        header{
            height:80px;
            background:#000;
            color:#fff;
            text-align: center;
            font-size:20px;
        }
        section{
            height:480px;
            background:#ccc;
        }
        nav{
            width:200px;
            height:480px;
            background:yellow;
            float:left;
        }
        main{
            width:600px;
            height:480px;
            background:white;
            float:left;
        }
        aside{
            width:200px;
            height:480px;
            background: olivedrab;
            float:left;
        }
        article{
            padding:20px;
            background:#ccc;
            margin:10px;
        }
        article header{
            height:40px;
        }
        footer{
            height:40px;
            background: darkcyan;
            text-align: center;
            font-size:20px;
            color:#fff;
        }
    </style>