HTML5新增非主体结构元素

最新推荐文章于 2021-06-17 12:31:53 发布

小x雨

最新推荐文章于 2021-06-17 12:31:53 发布

阅读量558

点赞数 1

分类专栏：学到的知识文章标签： html5

本文链接：https://blog.csdn.net/wang362011532/article/details/51972017

版权

学到的知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

header 元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据表格、搜索表单或相关的 logo 图片

<header>
    <h1>学习</h1>
    <a href="www.baidu.com" target="_blank">百度</a>
    <nav>
        <ul>
            <li>学习</li>
            <li>学习</li>
            <li>学习</li>
        </ul>
    </nav>
</header>

footer 元素可以作为其上层父级内容区块或是一个根区块的脚注。footer 通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

<footer>
    <ul>
        <li><a href="#">学习</a></li>
        <li><a href="#">学习</a></li>
        <li><a href="#">学习</a></li>
    </ul>
</footer>
<article>
    <footer>
        <a href="#">学习</a>
    </footer>
</article>
<section>
    <footer>
        <a href="#">学习</a>
    </footer>
</section>
<article>
    <header>
        <!--hgroup 在同级，但是有父子关系-->
        <hgroup>
            <h1>标题</h1>
            <h2>标题2</h2>
        </hgroup>

        <p>简介</p>
    </header>
    <div>这是内容</div>
    <footer>这是底部</footer>
</article>

address 元素和网页编排规则

address 元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address 应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。

<footer>
    <address>
        <a href="#">小雨</a>
        <a href="#">地址</a>
        <a href="#">2016-11-11</a>
    </address>
</footer>

显示编排内容区域块
隐示编排内容区域块
标题分级
不同区域块可以使用相同级的标题

<body>
<header>
    <h1>大标题</h1>
</header>
<article>
    <hgroup>
        <h1>文字标题</h1>
        <h2>文字子标题</h2>
        <p>内容</p>
    </hgroup>
    <section>
        <div>
            <article>
                <h1>文字标题</h1>
                <p>内容</p>
            </article>
        </div>
    </section>
</article>
<footer>
    <h1>注脚</h1>
</footer>
</body>