当前位置: IT培训 > HTML5培训 > 前端开发 > CSS > 前端开发你不得不知的div 、section 、article的区别和使用场景
前端开发你不得不知的div 、section 、article的区别和使用场景 时间:2017-07-31     来源:CSS开发小赢家

本文来讲一讲在前端开发中,div 、section 、article标签的区别和使用场景,希望对于大家能够有所帮助,喜欢的朋友可以关注我们哦!

主要区别,以及适用场合如下:

1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标签。如果只是针对一个块内容做样式化,三者并没有区别。

2、作为语义化标签,section应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一般来说,当元素内容明确地出现在文档大纲中时,section就是适用的。

3、对于article标签来说,无论从结构上还是内容上来说,article本身就是独立的、完整的。简单的方法就是看一段内容脱离了所在的语境之后,是否还是完整的、独立的,如果是,则应该用article标签。

4、div、section、article,语义上从无到有,逐渐增强。div无任何语义,仅仅用作样式化或者脚本化,对于一段主题性的内容,比较适用section,而假设这段内容是可以脱离上下文,作为完整的结构体独立存在的一段内容,那么就适合用article。原则上来说,能使用article的时候,也是可以使用section的。但是视情况而定,假如更适合使用article,那么就不要使用section了。

什么时候使用?

1、div:作为布局以及样式化时使用。

2、section:表示文档中的节,一般是具有标题的。比如:文档大纲、文档章节、博客条目、用户评论部分或者论文中有编号的部分时使用;

通常会带有标题。如果没有标题,那么就不推荐使用section

CSS开发教程

3、article:表示独立的自包含内容,如:一篇文章。文章找那个可以包含标题、内容、脚注

CSS开发教程

标注:

a、<header>:定义文档的页面介绍信息,比如:文章标题、发表时间

b、article和section可以互相嵌套使用

X