深入浅析HTML5中的article和section的区别

内容区块是指将HTML页面按逻辑分割后的单位。对于页面网站来说,导航菜单文章正文、文章评论等每一个部分都可称为内容区块。

article元素

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

 
     

标题

发表日期:2018/10/10

  

article的使用方法

  
 

Copyright @ jb51.cc All Rights Reserverd

  

注:article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。例如,一篇博客文章中,针对该文章评论就可以使用嵌套article元素的方式;用来呈现评论的article元素被包含在表示整体内容的article元素里面。
代码如下:

  

article元素使用方法

    

发表日期: 2018/10/10

  
  

标签显示的是article整个文章的主要内容,,下面的section元素里是对该文章评论

  

评论

    
        

发表者:maizi

        

1小时前

      

这篇文章很不错啊,顶一下!

    
        

发表者:小妮

1小时前

    

这篇文章很不错啊,对article解释的很详细

内容分为几个部分,文章标题放在了header元素中,文章正文放在了header元素后面的p元素中,然后section元素把正文与评论进行了区分(是一个分块元素,用来把页面中的内容进行区分),在section元素中嵌入了评论内容评论中每一个人的评论相对来说又是比较独立的、完整的,因此对它们都使用一个article元素,在评论的article元素中,又可以分为标题评论内容部分,分别放在header元素与p元素中。

 页面上的内容进行分块,section元素的作用是对页面上的内容进行分块,或者说对文章进行分段,;

2、一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题内容使用section元素,

3、section元素并非一个普通的容器元素;当一个内容需要被直接定义样式或通过脚本定义行为时,推荐使用p而非section元素;

4、如果article、nav、aside元素都符合某条件,那么就不要用section元素定义;

5、section元素中的内容可以单独存储到数据库中或输出到word文档中。

内容区块是指将HTML页面按逻辑分割后的单位。对于页面网站来说,导航菜单文章正文、文章评论等每一个部分都可称为内容区块。

article元素

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

    

标题

发表日期: 2018/10/10

  

article的使用方法

  

Copyright @ jb51.cc All Rights Reserverd

  

注:article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。例如,一篇博客文章中,针对该文章评论就可以使用嵌套article元素的方式;用来呈现评论的article元素被包含在表示整体内容的article元素里面。

嵌套的代码如下:

section元素的

标题

section区块的主题部分

在HTML5中,你可以将所有页面的从属部分,譬如导航条、菜单、版权说明等包含一个统一的页面中,以便统一使用CSS样式来进行装饰。最后,关于section元素的使用禁忌总结如下:

1)不要将section元素用作设置样式的页面容器,那是p元素的工作。

2)如果article元素、aside元素或nav元素更符合使用条件,不要使用section元素。

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

三、两者的区别:

以上讲述了那么多,两者的区别到底是什么呢?事实上,在HTML5中,article元素可以看成是一种特殊类型的section元素,它比section元素更强调独立性。即section元素强调分段或分块,而article强调独立性。具体来说,如果一块内容相对来说比较独立的、完整的时候,应该使用article元素,但是如果你想将一块内容分成几段的时候,应该使用section元素。另外,在HTML5中,p元素变成了一种容器,当使用CSS样式的时候,可以对这个容器进行一个总体的CSS样式的套用。

总结

以上所述是小编给大家介绍的HTML5中的article和section的区别,希望对大家有所帮助。程序员遇到问题都会上(编程之家jb51.cc)查找问题解答方法!如果觉得站点还不错,随手转发给程序员朋友一下!

相关文章

HTML5不是新事物。自从最初发布(2008年1月)以来,我们一直在使用它的一些功能。后来,我再次仔细查看...
Pointer Events API 是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(...
CSS动画非常的有趣;这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果。其中代表...
clip-path介绍 clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象...
语法 必需。动画时长的百分比。 合法的值: 0-100% from(与 0% 相同) to(与 100% 相同) 定义和用法...
基本代码 html代码: 首先定义一些基本的样式和动画: background-size: auto 100%; 这段代码的意思是让...