HTML5结构元素

Posted 2021-04-04 YOURJOY

当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放

主体结构元素

• article：代表文档、页面或应用程序中独立的、完整的、可以被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容，一个article元素通常有它自己的标题（一般放一个header元素在里面），有时它还有自己的脚注。

• section：section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素。当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而不是section。使用禁忌总结如下：

  不要将section元素用作设置样式的页面容器，那是div元素的工作。

  如果article元素，aside元素或nav元素更符合使用条件，不要使用section元素。

  不要为没有标题的内容区块使用section元素。

• nav：是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其它部分。一个页面中可有多个nav元素。menu元素代替nav元素，menu元素是用在一系列发出命令的菜单上，是一种交互性元素，更确切地说是用在web应用程序中的。适用于以下场合：传统导航条，侧边栏导航条，页内导航，翻页操作。

• aside：用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。主要以下两种使用办法：

  被包含在article元素中作为主要内容的附属部分，其中可以是与当前文章相关的参考资料、名词解释等。

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

• time：代表24小时中的某个时刻或某个日期，它表示时间时允许带时差。time元素是一个微格式。微格式是利用html的class属性来对网页添加附加信息的方法。编码时机器读到的部分在datetime属性里。而元素的开始标记于结束标记的中间部分是显示在网页上的。datetime属性中日期与时间之间要用“T”分隔。时间加上“Z”文字表示给机器编码时使用UTC标准时间；如果加上了时差，表示向机器编码另一时区时间；如果是本地编码时间，则不需要添加时差。pubdate属性是一个可选的、bool值的属性，可以用到article元素中的time元素上，意思是time元素代表了文章（article元素的内容）或整个网页的发布日期。

  例：<time datetime="2015-10-1T09:00Z">国庆节是10月1日</time>

非主体结构元素

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

• hgroup：将标题及妻子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，比如一个内容区块的标题及其子标题算一组。

• footer：作为其父级内容区块或是一个根区块的脚注，通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

• ---

  
  

  
  

  但是HTML5中的这些主体元素和div有什么区别呢？

在HTML5中，规定开发过程中更加注重语义化和代码的结构标准。section标签是用于表示段或区间，示例用法就是表示文档中的一段；article标签是用于表示独立的内容，标签包含的所有内容为一个完整的个体；div标签是无语义标签，用于展示css样式。article可以单独存在，因为它本身表示一个独立的整体；section标签最少出现两对的时候才使用，因为是段或区间，假如所有内容只有一段，那应该使用article标签，当多于一段的时候就以section标签划分，所以内容最少要有两段才使用section标签；div就是用来展示css样式的，别的时候尽量不用，在html5已经不需要再使用div+css的开发结构了，所以尽量少用。