• 八(第二篇)、主体结构元素——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>
  • 相关阅读:
    JavaScript进阶-BOM和DOM
    JavaScript基础
    CSS2-属性
    CSS1-选择器
    HTML-常用标签
    判断回文
    课堂作业
    动手动脑
    原码反码补码
    Java第一次考试作业
  • 原文地址:https://www.cnblogs.com/gyqqqqq/p/10513095.html
Copyright © 2020-2023  润新知