zoukankan      html  css  js  c++  java
  • 八(第二篇)、主体结构元素——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>
  • 相关阅读:
    晶体三极管及其放大电路之共集电极电路
    晶体三极管及其基本放大电路之共发射极电路
    晶体三极管及其基本放大电路概述
    晶体二极管及其基本应用电路
    印刷数字的识别
    pyqt5之简单窗口的创建
    cadence布线完成后的补充操作
    cadence钻孔文件及光绘文件的生成
    cadence电源和地平面的处理
    cadence电路板布线
  • 原文地址:https://www.cnblogs.com/gyqqqqq/p/10513095.html
Copyright © 2011-2022 走看看