三十六：HTML5之HTML5标签变化之新增的结构标签和简单的使用示例

 

一：HTML5新增的10个结构标签

　　article：标记定义一篇文章

　　header：标记定义一个页面或者区域的头部

　　nav：标记定义导航链接

　　section：标记定义一个区域

　　aside：标记定义页面内容部分的侧边栏，常与section配合使用、

　　hgroup：标记定义文件中一个区块的相关信息

　　figure：标记定义一组媒体内容及它们的标题

　　figcaption：标记定义figure元素的标题

　　footer：标记定义一个页面或一个区域的底部

　　dialog：标记定义一个对话框（会话框）类似微信

 

二：简单的使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--头部-->
    <header>
        <div>LOGO</div>
        <nav>
            <a href="#">菜单一</a>
            <a href="#">菜单二</a>
            <a href="#">菜单三</a>
        </nav>
    </header>

    <!-- 文章 -->
    <section>
        <hgroup>
            <h1>文章标题</h1>
            <h3>作者</h3>
            <h4>文章标题</h4>
        </hgroup>
        <aside>
            <a href="#se1">Section1</a>
            <a href="#se2">Section2</a>
            <a href="#se3">Section3</a>
        </aside>
        <article>
            Section1
            文章第一段，文章第一段，文章第一段，文章第一段，文章第一段，
            Section2
            文章第二段，文章第二段，文章第二段，文章第二段，文章第二段，
            Section3
            文章第三段，文章第三段，文章第三段，文章第三段，文章第三段，
        </article>
    </section>

    <!-- 视频 -->
    <section>
        <figure>
            <div class="video">...</div>
        </figure>
    </section>

    <!-- 评论 -->
    <section>
        <dialog>
            <dt>对话一</dt>
            <dd>回复一</dd>
            <dt>对话二</dt>
            <dd>回复二</dd>
        </dialog>
        <dialog>
            <dt>对话一</dt>
            <dd>回复一</dd>
            <dt>对话二</dt>
            <dd>回复二</dd>
        </dialog>
    </section>

    <!-- 页脚 -->
    <footer>Copyright</footer>
</body>
</html>

 

posted @ 2021-01-16 14:53  向前走。  阅读(360)  评论(0)  编辑  收藏  举报