HTML5新增的几个布局结构元素

最新推荐文章于 2025-05-19 21:07:15 发布

原创

最新推荐文章于 2025-05-19 21:07:15 发布 · 3.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5新增的几个布局结构元素 #footer #header

本文介绍了HTML5中新增的布局结构元素，包括header、footer、nav、article、section、aside、time、progress和meter。header和footer分别用于定义页面头部和底部，nav用于创建导航栏，article和section用于组织内容，aside常用于侧边栏，time用于表示日期和时间，progress和meter则用于创建进度条和度量指示器。

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

HTML5新增的几个布局结构元素

1.header元素：一般用于网页的头部，定义头部的区域块，也可以定义一块内容，所定义的内容是一块独立的。

<header>
    <h1>中国最大的搜索引擎</h1>
    <a href="http://www.baidu.com">百度</a>
    <nav>
        <ul>
            <li><a href="#">谷歌</a></li>
            <li><a href="#">火狐</a></li>
            <li><a href="#">360</a></li>
        </ul>
    </nav>
</header>

2.footer元素：与header元素基本一致，但是footer元素一般定义网页的底部内容

<footer>
    <ul>
        <li>关于我们</li>
        <li>联系客服</li>
        <li>合作招商</li>
        <li>隐私政策</li>
    </ul>
</footer>

3.nav元素：可以用来定义导航栏，目录，超链接等；并不是需要把所有的连接组都放进nav元素中，只需要将主要的，基本的连接组放进nav元素即可

4.Article元素：用于定义一个独立的内容区块:可以是一篇博客，一篇文章或者是独立的插件；可以嵌套使用，也可以表示插件。类似于div元素

<article>
    <header&

最低0.47元/天解锁文章

200万优质内容无限畅学