HTML5结构元素

主体结构元素

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元素的内容)或整个网页的发布日期。

国庆节是10月1日

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

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

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180426G1N6LI00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券