H5新增语义化标签-2

骑猪西征

于 2022-05-06 08:13:05 发布

阅读量131

点赞数 1

分类专栏：笔记 html 文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_57936267/article/details/124601763

版权

笔记同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

<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>

<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>

<nav>

nav

</figure>

<ul>

</ul>

</nav>

<main>

<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?

</p>

<footer>article-footer</footer>

</article>

<header>article-header</header>

</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>

骑猪西征

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5新增语义化标签-2

<header>header</header> <section>  <nav>  <figure>  nav </figure> <ul> .
复制链接

扫一扫