重学前端：深入理解header、footer、main、address标签|人间不值得

页面结构

header标签

header标签通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格、搜索表单或相关的LOGO图片。

一个web页面内可以拥有多个header标签，一个header标签中可以包裹多个h1～h6标签，也可以再包含一个或多个header标签或多个footer标签，也可以包括table、form、nav之类的标签。

footer标签

footer标签可以作为其父级内容区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接以及版权信息等。
一个web页面中也不限制只可以用一个footer标签。同时，可以为article元素或section元素添加footer标签。

main标签

main标签表示网页中与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容。

该区域应该为每一个网页中所特有的内容，不能包含整个网站的导航条、版权信息、网站LOGO、公共搜索表单等整个网站内部的共同内容。
每个网页内部只能放置一个main标签。
不能将main标签放置在任何article、aside、footer、header或nav标签内部。
由于main标签不对页面内容进行分区或分块，所以不会对所要描述的网页大纲产生任何影响。

address标签

address标签用来在web页面中呈现诸如作者的网站链接、电子邮箱、真实地址、电话号码等。address应该不只是用来呈现电子邮箱或真实地址，还可以用来展示跟页面相关的联系人的所有联系信息。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>article_demo</title>
    </head>
    <body>
        <header>
            <header>
                <h1>PM 小凯哥博客</h1>
            </header>
            <nav>
                <ul>
                    <li>首页</li>
                    <li>代码</li>
                    <li>产品</li>
                </ul>
            </nav>
        </header>
        <main>
            <article>
                <header>
                    <h1>标题</h1>
                    <p>发布日期：<time pubdate="true">2020-03-09</time></p>
                </header>
                <p>此处是正文内容</p>
                <aside>
                    <!-- aside在article内部，说明aside的内容是与文章相关的，例如参考文献 -->
                    <h1>参考文献</h1>
                    <ul>
                        <li>参考小凯哥博客</li>
                    </ul>
                </aside>
                <footer>
                    <address>
                        <a href="https://xuxinkai.cn">PM 小凯哥</a>
                    </address>
                    <p><small>此处是脚注，例如：PM 小凯哥<xuxinkai.cn>版权所有</small></p>
                </footer>
            </article>
        </main>
        <aside>
            <nav>
                <h2>热门文章</h2>
                <ul>
                    <li>产品经理真牛逼</li>
                    <li>前端真厉害</li>
                    <li>程序员真辛苦</li>
                </ul>
            </nav>
        </aside>
        <aside>
            <h2>友情链接</h2>
            <address>
                <a href="">PM 小凯哥</a>
                <a href="">阮一峰</a>
            </address>
        </aside>
    </body>
</html>

本文内容均基于《CC BY-NC-SA 4.0》协议创作或转载，仅供学习和研究使用，不得用于任何商业用途，您可以转载分享，但同时需保留原文链接。

THE END