0
点赞
收藏
分享

微信扫一扫

H5新增语义化标签-2

狗啃月亮_Rachel 2022-05-06 阅读 77
<header>header</header>

    <section>
        <!-- 页面中的主体部分 -->
    <nav>
        <!-- 导航栏 -->
       <figure>
           <!-- 用于包裹独立的内容 -->
            nav 
        </figure>

        <ul>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
        </ul>
    </nav>
    
    <main>
        <!-- 主体部分 -->
        <article class="article1">
            <!-- 与上下文无关的独立内容 -->
            <header>article-header</header>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, culpa a molestiae nemo, corporis dicta vero similique iste vitae tenetur optio quod unde adipisci quidem itaque ea. Alias, placeat quam?
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, culpa a molestiae nemo, corporis dicta vero similique iste vitae tenetur optio quod unde adipisci quidem itaque ea. Alias, placeat quam?
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, culpa a molestiae nemo, corporis dicta vero similique iste vitae tenetur optio quod unde adipisci quidem itaque ea. Alias, placeat quam?
            </p>
            <footer>article-footer</footer>
        </article>

        <article class="article2">
            <!-- 与上下文无关的独立内容 -->
            <header>article-header</header>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, culpa a molestiae nemo, corporis dicta vero similique iste vitae tenetur optio quod unde adipisci quidem itaque ea. Alias, placeat quam?
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, culpa a molestiae nemo, corporis dicta vero similique iste vitae tenetur optio quod unde adipisci quidem itaque ea. Alias, placeat quam?
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, culpa a molestiae nemo, corporis dicta vero similique iste vitae tenetur optio quod unde adipisci quidem itaque ea. Alias, placeat quam?
            </p>
            <footer>article-footer</footer>
        </article>
    </main>
    
    <aside>
        <!-- 侧边栏部分 -->
        <figure>aside
            <p class="aside_p">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos atque dignissimos accusamus ullam sint laboriosam! Quasi sint suscipit debitis. Nulla, illo sequi iusto fugit voluptatem modi dolore reprehenderit ut blanditiis.</p>
        </figure>
    </aside>
    </section>

    <footer>footer</footer>

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        html,body{

            height: 100%;

        }

        header,footer{

            height: 50px;

            line-height: 50px;

            text-align: center;

            color: rgb(80, 35, 19);

            background: skyblue;

        }

        section{

            height: calc(100% - 100px);

        }

        section{

            text-align: center;

            background-color: chartreuse;

        }

        nav,aside{

            width: 100px;

            height: 100%;

            background: #ccc;

            float: left;

        }

   

        main{

            float: left;

            width: calc(100% - 200px);

            height: 100%;

        }

        .aside_p{

            size: 10px;

            color: white;

        }

        main .article1{

            height: 60%;

        }

        main .article2{

            height: 40%;

        }

    </style>

</head>

<body>

    <header>header</header>

    <section>

        <!-- 页面中的主体部分 -->

    <nav>

        <!-- 导航栏 -->

       <figure>

           <!-- 用于包裹独立的内容 -->

            nav

        </figure>

        <ul>

            <li>11111</li>

            <li>11111</li>

            <li>11111</li>

            <li>11111</li>

        </ul>

    </nav>

   

    <main>

        <!-- 主体部分 -->

        <article class="article1">

            <!-- 与上下文无关的独立内容 -->

            <header>article-header</header>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, culpa a molestiae nemo, corporis dicta vero similique iste vitae tenetur optio quod unde adipisci quidem itaque ea. Alias, placeat quam?

                Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, culpa a molestiae nemo, corporis dicta vero similique iste vitae tenetur optio quod unde adipisci quidem itaque ea. Alias, placeat quam?

                Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, culpa a molestiae nemo, corporis dicta vero similique iste vitae tenetur optio quod unde adipisci quidem itaque ea. Alias, placeat quam?

            </p>

            <footer>article-footer</footer>

        </article>

        <article class="article2">

            <!-- 与上下文无关的独立内容 -->

            <header>article-header</header>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, culpa a molestiae nemo, corporis dicta vero similique iste vitae tenetur optio quod unde adipisci quidem itaque ea. Alias, placeat quam?

                Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, culpa a molestiae nemo, corporis dicta vero similique iste vitae tenetur optio quod unde adipisci quidem itaque ea. Alias, placeat quam?

                Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, culpa a molestiae nemo, corporis dicta vero similique iste vitae tenetur optio quod unde adipisci quidem itaque ea. Alias, placeat quam?

            </p>

            <footer>article-footer</footer>

        </article>

    </main>

   

    <aside>

        <!-- 侧边栏部分 -->

        <figure>aside

            <p class="aside_p">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos atque dignissimos accusamus ullam sint laboriosam! Quasi sint suscipit debitis. Nulla, illo sequi iusto fugit voluptatem modi dolore reprehenderit ut blanditiis.</p>

        </figure>

    </aside>

    </section>

    <footer>footer</footer>

</body>

举报

相关推荐

0 条评论