HTML5新特性之标签使用：header、nav、aside、main、footer......

最新推荐文章于 2025-03-07 18:01:13 发布

bkLion

最新推荐文章于 2025-03-07 18:01:13 发布

阅读量1.5w

点赞数 23

分类专栏：前端

本文链接：https://blog.csdn.net/H_W_1212/article/details/104554528

版权

前端专栏收录该内容

13 篇文章

订阅专栏

本文主要介绍HTML5中的新标签，如header、nav、aside、main和footer的使用和语义理解，通过实例展示它们在网页布局中的作用。同时，强调了CSS样式中浮动和块、内联标签的使用注意事项，旨在帮助学习者更好地理解和应用HTML5新特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关注重工黑大帅，学习不迷路

一、概念理解

header	一般放置在页面的顶部或者页面中某个区块元素的顶部，包含整个页面或某个区块的标题等信息
nav	页面导航
aside	侧边栏区域
main	注内容区
footer	页脚
artical	一段独立的内容
section	通常包含一个明确的主题
figure	带有标题的图片或其它文件
figcaption	经常和figure连用，图片或其它文件的文字说明
time	表示时间
strong	着重强调
b	加粗效果
i	文字倾斜

二、效果图显示

在这里插入图片描述

三、实际应用

1.应用效果图

在这里插入图片描述

2.上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="网页布局，浮动">
    <meta name="description" content="这是一个精美的网页布局">
    <meta http-equiv="refresh" content="20">
    <title>网页布局练习</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style:none;
        display: inline-block;
    }
    a{
        text-decoration: none;
    }
    .clears {
        clear: both;
        height: 0;
        line-height: 0;
        font-size: 0;
        overflow: hidden;
    }
    body {
        margin: 0 auto;
    }
    .total {
        width: 1920px;
        height: 825px;
        background-color:darkgrey;
        padding-top: 50px;
    }
    .all{
        widht: 1900px;
        height: 740px;
        background-color:aquamarine;
        margin-left:50px;
        margin-right: 50px;
        padding-top: 40px;

    }
    .header {
        height: 50px;
        width: 1300px;
        background-color: aqua;
        color: white;
        margin: 20px auto 30px;
        text-align: center;
        line-height: 50px;
        font-size: 30px;
        cursor: pointer;
        animation: banner_big 1s infinite alternate;
        animation: Ani 0.4s  0.2s both;
    }
    @keyframes banner_big{
        0%{
            opacity: 0;
            transform: scale(1,1);
        }
        100%{
            opacity: 1;
            transform: scale(1.5,1.5);
        }
    }
    @keyframes Ani{
        0%{
            opacity: 0;
            transform: scale(0.3,0.3)  rotateZ(-205deg);
        }
        80%{
            opacity: 1;
            transform: scale(1.2,1.2)   rotateZ(0deg);
        }
        100%{
            opacity: 1;
            transform: scale(1,1) rotateZ(0);
        }
    }
    .nav {
        background-color:darkgray;
        height: 60px;
        width: 1300px;
        margin-bottom: 40px;
        margin-left: auto;
        margin-right: auto;
        line-height: 30px;
    }
    .menue{
        width: 1300px;
        height: 60px;
        display: inline-block;
    }
    .menue,ul>li{
        vertical-align: middle;
    }
    li{
        display: inline-block;
        width: 250px;
        height: 50px;
        margin-top: 5px;
        text-align: center;
        margin-left: 5px;
        line-height: 50px;
        font-size: 25px;
        background-color:dimgrey;
    }
    a:link{
        color:greenyellow;
    }
    a:hover{
        color: darkorange;
    }
    .message{
        font-size: 25px;
        text-align: center;
        background-color: deepskyblue;
        margin-bottom: 15px;
    }
    p.date{
        text-align: center;
        font-size: 25px;
        margin-top: 15px;
        background-color: lightcoral;
    }
    .m1{
        float: left;
    }
    .m2{
        float: left;
        position: relative;
        left:20px;
    }
    .m1,.m2,.m3{
        margin-top: 20px;
        margin-left: 27px;
        font-size: 25px;
        background-color:goldenrod;
        text-align: center;
    }
    .m1 a:link,.m2 a:link,.m3 a:link{
        color:red;
    }
    .m1 a:hover,.m2 a:hover,.m3 a:hover{
        color: blue;
    }
    .m3{
        float: left;
        position: relative;
        left:40px;
    }
    .caffe{
        width: 150px;
        height: 150px;
        margin-top: 20px;
        margin-left: 120px;
        border-radius: 90px;
    }
    .word{
        font-size: 25px;
        margin-left: 145px;
        margin-top: 15px;

    }
    .word a:link{
        color:gold;
        font-weight: bolder;
        background-color: lightgoldenrodyellow;
    }
    .word a:hover{
        color:red;
    }
    .aside {
        height: 370px;
        background-color: bisque;
        width: 400px;
        float: left;
        margin-left: 260px;
    }
    .main {
        height: 360px;
        background-color:lightcoral;
        width: 885px;
        float: left;
        line-height: 35px;
        position: relative;
        left: 15px;
        margin-bottom: 20px;
        font-size: 25px;
        padding-top: 10px;
    }
    .main p a:link{
        color: blue;
        size: 15px;
    }
    .main p a:hover{
        color: red;
        size: 15px;
    }
    .footer {
        height: 80px;
        background-color:lightgoldenrodyellow;
        width: 1300px;
        margin-top: 15px;
        float: left;
        text-align: center;
        margin-left: 260px;
        line-height: 80px;
        background-color: darkcyan;
        font-size: 25px;
    }

</style>
<body>
<div class="total">
    <div class="all">
        <!--页面标题-->
        <header class="header">HTML5新标签学习</header>
        <!--页面导航-->
        <nav class="nav">
            <ul class="menue">
                <li><a href="#">header标签</a></li>
                <li><a href="#">nav标签</a></li>
                <li><a href="#">aside标签</a></li>
                <li><a href="#">main标签</a></li>
                <li><a href="#">footer标签</a></li>
            </ul>
        </nav>
        <!--侧栏区-->
        <aside class="aside">
            <section>
                <h5 class="message">公告</h5>
                <time><p class="date">发布时间：2020/2/27</p></time>
            </section>
            <article>
                <div class="m1"><a href="#">HTML5</a></div>
                <div class="m2"><a href="#">CSS3</a></div>
                <div class="m3"><a href="#">NODEJS</a></div>
                <figure>
                    <a href="#" target="_blank"><img src="images/caffe.jpg"  class="caffe" alt="美式咖啡"></a>
                    <figcaption class="word"><a href="#" target="_blank">美式咖啡</a></figcaption>
                </figure>
            </article>
        </aside>
        <!--主内容区-->
        <main class="main">
            <article>
                <header>
                    <p align="center">自我介绍</p>
                </header>
                <span>
                    &ensp;&ensp;&ensp;&ensp;各位亲爱的同学们，大家好。我叫<b>重工黑大帅</b>，我的父母希望我从小就树立
                    远大抱负，能够像大志鹤一样在天空中自由的<i>翱翔</i>。我来自有着“<strong>牡丹之乡</strong>”之称的垫江县...
                </span>
                <footer>
                    <p align="right"><a href="#" target="_blank">评论：(10)</a>&ensp;<a href="#" target="_blank">点赞：(10)</a></p>
                </footer>
            </article>
            <article>
                <header>
                    <p align="center">人生职业规划</p>
                </header>
                <span>
                    &ensp;&ensp;&ensp;&ensp;大一到大三成为<em>初级程序员</em>；<br>
                    &ensp;&ensp;&ensp;&ensp;大三到毕业期间</i><strong>考研成功上岸</strong>；<br>
                    &ensp;&ensp;&ensp;&ensp;........
                </span>
                <footer>
                    <p align="right"><a href="#" target="_blank">评论：(10)</a>&ensp;<a href="#" target="_blank">点赞：(10)</a></p>
                </footer>
            </article>
        </main>
        <!--页脚-->
        <footer class="footer">&copy;版权归重工黑大帅所有</footer>
        <div class="clears"></div>
    </div>
</div>
</body>
</html>