html5新增主体结构元素有哪些?

html5新增元素：article元素，aside元素,nav元素,section元素,footer元素,header元素,figure元素,figcaption元素

article元素

代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。

该元素可嵌套使用；

可用来表示插件。

aside元素

用来表示当前页面或者文章的附属信息部分

可包含于当前页面或蛀牙内容相关的引用、侧边栏、广告、导航条

以及其他类似的有区别于主要内容的部分

nav元素

可以用作页面导航的连接组

其中的导航元素连接到其他页面或当前页面的其他部分

并非所有链接组都要放进nav元素，只需将主要的、基本的放进即可

应用场景：传统导航条、侧边栏导航、页内导航、翻页导航

h5中不要用menu元素代替nav元素，menu元素使用在发出命令的菜单上，是一个交互元素

section元素

用于对网站或应用程序中页面上的内容进行分块

一个section元素通常由内容及标题组成

但当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。

section元素强调分段或分块，一块内容分为几段或几块；

article元素强调独立性，一块内容独立完整;

没有标题内容区域块，不要用section

header元素

<header> 标签定义文档的页眉（介绍信息）

<header> 元素应该作为介绍内容或者导航链接栏的容器。

在一个文档中，可以定义多个 <header> 元素。

footer元素

标签定义文档或节的页脚。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

可以在一个文档中使用多个 <footer> 元素。

figure元素

用作文档中插图的图像，标签规定独立的流内容（图像、图表、照片、代码等等）。

figure 元素的内容应该与主内容相关

figcaption元素

<figure>标签内部还可以添加<figcaption>图题，其包含了对图片的完整说明。

相对figure元素可以看做<p>标签

怎么使用

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

链接: https://fly63.com/article/detial/1741