html5结构元素
HTML5结构元素：
HTML 5中新增了section、article、nav、aside、header和footer等结构元素。运用这些结构元素，可以让网页的整体布局更加直观和明确、更富有语义化。
nav
nav元素表示页面中导航链接的部分。描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。
HTML 5中代码用法：
<nav></nav>
HTML 5中代码示例：
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
header
header元素表示页面中一个内容区块或整个页面的标题。它是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块标题，但也可以包含其他内容，如数据表格、搜索表单或相关的logo图片。]
HTML 5中代码用法：
<header>...</header>
HTML 5中代码示例：
<header id=”divcss5”>头部内容区</header>
<header class=”divcss5”>头部内容区</header>
header元素就像DIV标签元素一样可以多次使用，不同地方可以使用id或class设置不同样式。
footer
footer元素表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息。如在父级内容快中添加注释，或者在网页中添加版权信息等。脚注信息有很多种形式，如作者、相关阅读链接及版权信息等。
HTML 5中代码用法：
<footer>...</footer>
HTML 5中代码示例：
<footer id=”divcss5”>头部内容区</footer>
<footer class=”divcss5”>头部内容区</footer>
footer元素与header元素用法相似。
article
article元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或报纸中的一篇文章。当article元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的article元素可嵌套在代表博客文章的元素中。
HTML 5中代码用法：
<article>...</article>
HTML 5中代码示例：
<article>
<header>
<h1>看电影</h1>
<p>发表日期:<time pubdate="pubdate">2020年3月4号</time></p>
</header>
<footer>
<p>公众号</p>
</footer>
</article>
section
网页中要显示的主体内容通常被放置在section结构元素中，每个section元素都应该有一个标题，用于表明该section的主要内容。section元素用于对网站或应用程序中页面上的内容进行分区。
article和section区别：
article元素代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。例如：博客中的一篇文章，论坛中的一个帖子或者一个浏览者的评论等。因为article元素是一段独立的内容，所以article元素通常包含头部（header元素）、底部（footer底部元素）。section元素用于对网站或者应用程序中页面上的内容进行分块。一个section元素通常由内容以及标题组成。
HTML 5中代码用法
<section>...</section>
HTML 5中代码示例：
<section>
<h1>成语接龙</h1>
<p>游戏即将开始，请做好准备！</p>
</section>
aside
aside结构元素可以有多种形式，其中最常见的形式是侧边栏。表示article元素的内容之外的、与article元素的内容相关的辅助信息。它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。
aside元素主要有以下两种使用方法：
HTML 5中代码示例一：
被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。
<article>
<h1>…</h1>
<p>…</p>
<aside>…</aside>
</article>
HTML 5中代码示例二：
在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。
<aside>
<h2>…</h2>
<ul>
<li>…</li>
<li>…</li>
</ul>
<h2>…</h2>
<ul>
<li>…</li>
<li>…</li>
</ul>
</aside>
hgroup
hgroup元素用于对整个页面或页面中一个内容区块的标题进行组合。通常用来设置标题，通常放在header中。例如，在一个区段中有连续的h系列的标签元素，则可用hgroup将他们括起来。hgroup只是对标题进行组合，而对标题的样式没有影响。
HTML 5中代码用法：
<hgroup>...</hgroup>
HTML 5中代码示例：
<html>
<head>
<meta charset="utf-8" />
<title>水果</title>
</head>
<body bgcolor="bisque">
<hgroup>
<h1>芒果</h1>
<h2>草莓</h2>
<h3>苹果</h3>
</hgroup>
</body>
</html>
figure
figure元素一般表示文档主体流内容中的一个独立单元。它用来表示网站制作页面上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。
HTML 5中代码示例：
<figure>
<img src="1.jpg" alt=""/>
<img src="2.jpg" alt=""/>
<img src="3.jpg" alt=""/>
<figcaption>
一组图片
</figcaption>
</figure>
figcaption
figcaption标签一般是充当figure标签中的第一个或最后一个子元素来为figure元素定义标题或者说是其相关解释。在使用figcaption时，它最好是figure块的第一个或者最后一个元素。
HTML 5中代码示例：
HTML 5中代码示例：
登录后复制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html中figure标签和figcaption标签介绍</title>
</head>
<body bgcolor="bisque">
<p>这是figure标签和figcaption标签的介绍</p>
<figure>
<figcaption>figure和figcaption标签示例</figcaption>
<p>时间：2020/3/4</p>
<p>代码实例</p>
</figure>
</body>
</html>
注意：一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。
3291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
