HTML5新增的几个容器模块 -云博客

HTML5新增的几个容器模块

# 前端 2024-05-05 15:23 0 35 来源：云博客

H5新增的几个容器块元素：
1、header:用户表示页面或某个区域的头部
2、nav:用于表示导航栏
3、aside:用于表示跟周围主题相关的附加信息
4、article:用于表示一个整体的一部分主题

5、section:表示右边的侧边栏
6、footer:用于表示页面或某个区域的脚注

现在这里来教大家怎么使用

<!DOCTYPE html> <html lang="en">

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>  <style> * { margin: 0; padding: 0; }

.box { width: 80%; text-align: center; font-size: 30px; margin: 10px auto; }

header { width: 100%; height: 100px; outline: 1px solid red; line-height: 100px; }

.box1 { width: 100%; position: relative; height: 550px; }

nav { width: 70%; height: 50px; outline: 1px solid black; position: absolute; left: 0px; top: 0px; line-height: 50px; }

aside { width: 30%; height: 50px; outline: 1px solid blue; position: absolute; right: 0px; top: 0px; line-height: 50px; }

article { width: 70%; height: 500px; outline: 1px pink solid; position: absolute; left: 0px; top: 50px; line-height: 500px; }

section { width: 30%; height: 500px; outline: 1px yellow solid; position: absolute; right: 0px; top: 50px; line-height: 500px; }

footer { width: 100%; height: 100px; outline: 1px solid rebeccapurple; line-height: 100px; } </style> </head>

<body> <div class="box"> <header>我是网页的头部</header> <div class="box1"> <nav> 我是左边的导航栏</nav> <aside>我是右边的导航栏</aside> <article>我是主体内容</article> <section>我是右边的侧边栏</section> </div> <footer>我是底部</footer> </div> </body>

</html>