学习布局（21）HTML5新标签

最新推荐文章于 2025-02-25 21:17:34 发布

来自流星

最新推荐文章于 2025-02-25 21:17:34 发布

阅读量228

点赞数

CC 4.0 BY-SA版权

分类专栏：布局之路 css HTML5

本文链接：https://blog.youkuaiyun.com/qq_34579060/article/details/97923510

css 同时被 3 个专栏收录

26 篇文章

订阅专栏

布局之路

18 篇文章

订阅专栏

HTML5

14 篇文章

订阅专栏

本文详细介绍了HTML5中新增的结构元素及其用途，包括header、nav、section、time、article、aside、figure、figcaption、footer等，以及video、audio、embed、mark、progress、canvas等其他新增元素。同时，通过示例展示了如何使用这些元素构建网页的基本结构。

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

HTML5新增结构元素以及含义:

新增结构元素:

<header> 定义页眉
<hgroup> 定义网页标题的组合
<nav> 定义导航
<section> 定义文档中的区段
<time> 定义日期和时间
<article> 定义文章
<aside> 定义侧边栏
<figure> 定义一组媒体对象及文字
<figcaption> 定义figure的标题
<footer> 定义页脚

其他新增元素:

<video> 定义视频
<audio> 定义音频
<embed> 插入各种多媒体
<mark> 定义需要突出显示或者高亮显示的文本
<progress> 显示JS耗费的函数进程
<canvas> 定义图形

使用div实现基础结构：

<div class="wrap">
        <div class="header"></div>
        <div class="nav"></div>
        <div class="con">
            <div class="con-head"></div>
            <div class="arc"></div>
            <div class="con-foot"></div>
        </div>
        <div class="sidebar"></div>
        <div class="footer"></div>
    </div>

使用新增结构标签实现基本结构：

<div class="wrap">
        <header></header>
        <nav></nav>
        <section class="con">
            <header></header>
            <article></article>
            <footer></footer>
        </section>
        <aside></aside>
        <footer></footer>
    </div>

  .wrap {
            width: 500px;
            height: 40px;
            padding: 10px;
        }


        /**
            CSS3选择器: 伪类选择器
            E:root                匹配根元素，对于HTML文档而言就是 HTML元素
            E:nth-child(n)        匹配其父元素的第n个子元素 第一个编号为1
            E:nth-last-child(n)   匹配其父元素的倒数第n个子元素, 第一个编号为1
            E:last-child          匹配父元素的最后一个子元素,等同于 nth-last-child(1)
         */

        .wrap li {
            float: left;
            width: 36px;
            height: 36px;
            margin-right: 5px;
            border: 2px solid black;
            line-height: 36px;
            text-align: center;
            border-radius: 20px;
            color: white;
            background-color: #cccccc;
            font-size: 20px;
        }

        /**
           为第一个li
         */
        li:nth-child(1) {
            background-color: #ff9999;
        }

        /**
          为最后一个li
       */
        li:last-child {
            background-color: #3399ff;
        }

        /**
           为所有偶数的li设置红色边框
         */
        li:nth-child(2n) {
            border: 2px solid red;
        }

<div class="wrap">
        <ul class="clearfix">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>