HTML5 定义附栏

    ■知识点

    aside表示附栏，用来标识所处内容之外的内容。aside内容应该与所处的附近内容相关。例如，当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边广告、导航条，以及其他类似的有别于主要内容的部分。 

    aside元素主要有以下两种用法。

    作为主体内容的附属信息部分，包含在article中，aside内容可以是与当前内容有关的参考资料、名词解释等。

    作为页面或站点辅助功能部分，在article之外使用。最典型的形式是侧边栏，其中的内容可以 是友情链接，最新文章列表、最新评论列表、历史存档、日历等。

    ■实例设计

【示例1】下面的示例设计一篇文章，文章标题放在header中，在header后面将所有关于文章的部分放在了一个article中，将文章正文放在一个p元素中。该文章包含一个名词注释的附属部分，因此在正文下面放置了一个aside元素，用来存放名词解释的内容。

<header〉

    <hl>HTML5</hl>

</header>

<article>

    <hl>HTML5历史</hl>

    <p>HTML5草案的前身名为Web Applications 1.0，于2004年被WHATWG提出，于2007年被 W3C接纳，并成立了新的HTML工作团队。HTML5的第一份正式草案已于2008年1月22日公布。2014 年10月28日，W3C的HTML工作组正式发布了HTML5的官方推荐标准。</p>

    <aside>

        <hl>名词解释</hl>

        <dl>

            <dt>WHATWG</dt>

            <dd>Web Hypertext Application Technology Working Group, HTML 工作开发 组的简称，目前与W3C组织同时研发HTML5。</dd>

        </dl>

        <dl>

            <dt>W3C</dt>

            <dd>World Wide Web Consortium,万维网联盟，万维网联盟是国际著名的标准化组织。1994年成立后，至今己发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。</dd>

        </dl>

    </aside>

</article>

这个aside被放置在一个article内部，因此引擎将这个aside内容理解为是与article内容相关联的。 

【示例2】下面的代码使用aside元素为个人博客添加一个友情链接的辅助版块。

<aside>

    <nav>

        <h2> 友情链接</h2>

        <ul>

            <li> <a href="#">网站 l</a></li>

            <li> <a href="#">网站 2</a></li>

            <li> <a href="#">网站 3</a></li>

        </ul>

    </nav>

</aside>

    友情链接在博客网站中比较常见，一般放在左右两侧的边栏中，因此可以使用aside来实现，但是这个版块又具有导航作用，因此嵌套了一个nav元素，该侧边栏的标题是“友情链接”，放在了h2元素中，在标题之后使用了一个ul列表，用来存放具体的导航链接列表。