八(第二篇)、主体结构元素——nav元素、aside元素

nav元素

  nav元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。

并不是所有的链接组都要被放进nav元素,只需要将主要的、基本的链接组放进nav元素即可。

  nav元素的应用场景:

  • 传统的导航条
  • 侧边栏导航
  • 页内导航
  • 翻页操作

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nav元素</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">主页</a></li>
            <li><a href="#">开发文档</a></li>
        </ul>
    </nav>

<article>
    <header>
        <h1>HTML5与CSS3的历史</h1>
        <nav>
            <ul>
                <li><a href="#">HTML5历史</a></li>
                <li><a href="#">CSS3历史</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h1>HTML5历史</h1>
        <p>.....</p>
    </section>
    <section>
        <h1>CSS3历史</h1>
        <p>.....</p>
    </section>
    <footer>
        <a href="#">删除</a>
    </footer>
</article>

<footer>
    <p><small>版权声明:</small></p>
</footer>

</body>
</html>

aside元素

  aside元素用来表示当前页面或文章的附属信息部分,他可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,

以及其他类似的有区别于主要内容的部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aside元素</title>
</head>
<body>
    <header>
        <h1>js入门</h1>
    </header>

<article>
    <h1>语法</h1>
    <p>文章的征文</p>
    <aside>
        <h1>名词解释</h1>
        <p>语法:。。。。。</p>
    </aside>
</article>

<aside>
    <nav>
        <h2>评论</h2>
        <ul>
            <li><a href="#">2019-3-11</a></li>
            <li><a href="#">大牛:嘿,bro!</a></li>
        </ul>
    </nav>
</aside>

</body>
</html>
原文地址:https://www.cnblogs.com/gyqqqqq/p/10513095.html