h5新增语义化标签

H5新增语义化标签

前言

语义化顾名思义就是有意义的标签,以前做页面布局大都是使用div来做布局,现在学习了h5就可以用这些语义化标签来做布局,不用再为div起有语义的名字,方便了开发者。下面就对这些语义化标签作个详细说明。

语义化标签

  • header
  • nav
  • footer
  • section
  • artice
  • aside
  • figure
  • figcaption

header:
以前对页面的头部布局都是用div来做,h5新增的header标签就是用来做页面头部的主要用于定义内容的展示区域,一个页面中可以有多个header标签。

nav:导航标签
主要用于页面的导航链接,以前都是用ul无序列表来做,现在可以用nav标签来做。

footer:
用于对页面的底部布局,以前大都是给div 的class取名为footer,现在可以直接使用footer标签了,页面中可以使用多个footer标签。

section:
用来定义页面的某个区段,可以包含一组内容和标题

artice:
定义独立的内容 比如文章、博客帖子、新闻故事

aside:
定义页面的侧边栏,内容应与页面的主区域内容相关

figure和figcaption
规定独立的流内容(图像、图标、照片等)
figcaption 标签定义figure的标题, 应该被放在figure的第一个子元素或最后一个子元素的位置
h5新增语义化标签
h5新增语义化标签