HTML5结构元素解析-优快云博客

本文链接：https://blog.youkuaiyun.com/China_chen_p_l/article/details/78902475

hgroup元素

<body>
    <article>
        <header>
            <!--hgroup元素是将标题及其子标题进行分组的元素，
             hgroup元素通常会将h1~h6元素进行分组，
             譬如一个内容区块的标题及其子元素算一组-->
            <hrroup>
                <h1>
                    这是文章标题
                </h1>
                <h2>这是一个子标题</h2>
            </hrroup>
            <p><time datatime="2017-12-2">2017-12-2</time></p>
        </header>
        <div>
            这是内容
        </div>
        <footer>
            这是底部
        </footer>
    </article>
</body>

header元素

<body>
        <!--header元素是一种具有引导和导航作用的结构元素，
        通常用来放置整个页面或页面内的一个内容区块的标题，
        但是也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片-->
        <header>
            <h1>IT最新技术</h1>
            <a href="#">华软</a>
            <nav>
                <ul>
                    <li><a href="#">学习</a></li>
                    <li><a href="#">技术</a></li>
                    <li><a href="#">极客</a></li>
                </ul>
            </nav>
        </header>
        <article>

        </article>
</body>

footer元素

<body>
    <!--footer元素可以作为其上层父级内容区块或是一个根区块的脚注。-->
    <!--footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。-->
    <footer>
        <ul>
            <li><a href="#">版权信息</a></li>
            <li><a href="#">站点地图</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </footer>
</body>

address元素

<body>
        <!--address元素用来在文档中呈现联系信息，包括文档作者或者文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等-->
        <!--address应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息-->
        <address>
            <a href="#">iwen</a>
            <a href="">ime</a>
        </address>
        <footer>
            <div>
                <address>
                    <a href="#">iwen</a>
                    广州大学华软软件学院，信息工程
                    <time datatime="2017-12-2">2017-12-2</time>
                </address>
            </div>
        </footer>
</body>