HTML标签-----article、aside、figure、nav和section

article

<article> 标签定义独立的内容

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div>article标签</div>
        <article>
            <h1>Internet Explorer 9</h1>
            <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
        </article>
    </body>

</html>

aside

<aside> 标签定义 <article> 标签外的内容，aside 的内容应该与附近的内容相关

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <p>My family and I visited The Epcot center this summer.</p>
        <aside>
            <h4>Epcot Center</h4>
            <p>The Epcot Center is a theme park in Disney World, Florida.</p>
        </aside>
    </body>

</html>

figure

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等），figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。</p>
        <figure>
            <p>黄浦江上的的卢浦大桥</p>
            <p>拍摄者：W3School 项目组，拍摄时间：2010 年 10 月</p>
            <img src="img/bridge.jpg" width="350" height="250" />
        </figure>

    </body>

</html>

nav

<nav> 标签定义导航链接的部分

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <nav>
            <a href="#">Java</a>
            <a href="#">C#</a>
            <a href="#">JavaScript</a>
        </nav>
    </body>

</html>

section

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <section>
            <h1>Java</h1>
            <p>
                Java是一门语言!
            </p>
        </section>
        <section>
            <h1>C#</h1>
            <p>
                C#是一门语言！
            </p>
        </section>
        <p>
            C#是一门语言！
        </p>
    </body>

</html>