HTML5结构元素总结

HTML5结构元素：

HTML 5中新增了section、article、nav、aside、header和footer等结构元素。运用这些结构元素，可以让网页的整体布局更加直观和明确、更富有语义化。

nav

nav元素表示页面中导航链接的部分。描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。

HTML 5中代码用法：

HTML 5中代码示例：

  

    
Home
    
About
    
Contact
  
 

header

header元素表示页面中一个内容区块或整个页面的标题。它是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块标题，但也可以包含其他内容，如数据表格、搜索表单或相关的logo图片。

HTML 5中代码用法：

...

HTML 5中代码示例：

头部内容区
 

头部内容区

header元素就像DIV标签元素一样可以多次使用，不同地方可以使用id或class设置不同样式。

footer

footer元素表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息。如在父级内容快中添加注释，或者在网页中添加版权信息等。脚注信息有很多种形式，如作者、相关阅读链接及版权信息等。

HTML 5中代码用法：

...

HTML 5中代码示例：

头部内容区
 

头部内容区

footer元素与header元素用法相似。

article

article元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或报纸中的一篇文章。当article元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的article元素可嵌套在代表博客文章的元素中。

HTML 5中代码用法：

...

HTML 5中代码示例：

  

    
看电影
    
发表日期:2020年3月4号
  
  

    
公众号
  

section

网页中要显示的主体内容通常被放置在section结构元素中，每个section元素都应该有一个标题，用于表明该section的主要内容。section元素用于对网站或应用程序中页面上的内容进行分区。

article和section区别：
article元素代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。例如：博客中的一篇文章，论坛中的一个帖子或者一个浏览者的评论等。因为article元素是一段独立的内容，所以article元素通常包含头部（header元素）、底部（footer底部元素）。section元素用于对网站或者应用程序中页面上的内容进行分块。一个section元素通常由内容以及标题组成。

HTML 5中代码用法：

...

HTML 5中代码示例：

  
成语接龙
  
游戏即将开始，请做好准备！

aside

aside结构元素可以有多种形式，其中最常见的形式是侧边栏。表示article元素的内容之外的、与article元素的内容相关的辅助信息。它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。

aside元素主要有以下两种使用方法：

HTML 5中代码示例一：
被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。

  
…
  
…
  
…

HTML 5中代码示例二：
在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。

  
…
  

    
…
    
…
  
  
…
  

    
…
    
…
  

hgroup

hgroup元素用于对整个页面或页面中一个内容区块的标题进行组合。通常用来设置标题，通常放在header中。例如，在一个区段中有连续的h系列的标签元素，则可用hgroup将他们括起来。hgroup只是对标题进行组合，而对标题的样式没有影响。

HTML 5中代码用法：

...

HTML 5中代码示例：

芒果
草莓
苹果

figure

figure元素一般表示文档主体流内容中的一个独立单元。它用来表示网站制作页面上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。

HTML 5中代码示例：

    
    
    
    

       一组图片
    
  

figcaption

figcaption标签一般是充当figure标签中的第一个或最后一个子元素来为figure元素定义标题或者说是其相关解释。在使用figcaption时，它最好是figure块的第一个或者最后一个元素。

HTML 5中代码示例：

这是figure标签和figcaption标签的介绍

figure和figcaption标签示例
时间：2020/3/4
代码实例

注意：一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。