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

在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。内容区块是指将HTML页面按逻辑分割后 的单位。例如对于书籍来说,章、节可以称为内容区块;对于博客网站来说,导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。
      在HTML5中新增的主体结构元素中有两个元素分别article元素与section元素,这两个元素是什么意思?通常用于哪些内容区块?何时用article元素?何时用section元素?两者之间的区别是什么?
      一、article元素
      article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论 或独立的插件,或其他任何独立的内容。除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里面),有时还有自己的脚 注。
      现在,让我们以博客为例来看一段关于article元素的代码示例,代码如下:
<article>
      <header>
            <h1>article元素使用方法</h1>
            <p>发表日期:<time pubdate="pubdate">2010/10/10</time></p>
      </header>
      <p>article元素是什么?怎样使用article元素?……</p>
      <footer>
            <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>
      </footer>
</article>
      这个示例是一篇讲述article元素使用方法,在header元素中嵌入了文章的标题部分,在标题下部的p元素中,嵌入了一大段该博客文章的正文,在结 尾处的footer元素中,嵌入了文章的著作权,作为脚注。整个示例的内容相对比较独立、完整,因此,对这部分内容使用了article元素。
      article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。例如,一篇博客文章中,针对该文章的评论就可以使用嵌套article元素的方式;用来呈现评论的article元素被包含在表示整体内容的article元素里面。
       接着,让我们来看一个关于article元素嵌套的代码示例,代码如下:
<article>
      <header>
            <h1>article元素使用方法</h1>
            <p>发表日期:<time pubdate="pubdate">2010/10/10</time></p>
      </header>
      <p>article元素是什么?怎样使用article元素?……</p>
      <section>
            <h2>评论</h2>
            <article>
                  <header>
                        <h3>发表者:shenmiweiyi</h3>
                        <p><time pubdate datetime="2011-12-23T:21-26:00">1小时前</time></p>
                  </header>
                  <p>这篇文章很不错啊,顶一下!</p>
            </article>
            <article>
                  <header>
                        <h3>发表者:神秘唯一</h3>
                        <p><time pubdate datetime="2011-12-23T:21-26:00">1小时前</time></p>
                  </header>
                  <p>这篇文章很不错啊,对article解释的很详细</p>
            </article>
      </section>
</article>
      这个示例中的内容比上述代码更加完整了,它添加了文章读者的评论内容,示例内容分为几个部分,文章标题放在了header元素中,文章正文放在了 header元素后面的p元素中,然后section元素把正文与评论进行了区分(是一个分块元素,用来把页面中的内容进行区分),在section元素 中嵌入了评论的内容,评论中每一个人的评论相对来说又是比较独立的、完整的,因此对它们都使用一个article元素,在评论的article元素中,又 可以分为标题与评论内容部分,分别放在header元素与p元素中。
      另外,article元素也可以用来表示插件,它的作用是使插件看起来好像内嵌在页面中一样。代码如下:
<article>
      <h1>一个插件</h1>
      <object>
            <param name="allowFullScreen" vlaue="true">
            <embed src="#" width="600" height="395"></embed>
      </object>
</article>
      二、section元素
      section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容 器元素;当一个内容需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素。section元素中的内容可以单独存储到数据库中 或输出到word文档中。
<section>
      <h1>section元素使用方法</h1>
      <p>什么时候用section元素?怎样合理使用section元素?</p>
</section>
      通常不推荐为那些没有标题的内容使用section元素,可以使用HTML5轮廓工具来检查页面中是否有标题 的section,如果使用该工具进行检查后,发现某个section的说明中有"untitiled section"(没有标题的section)文章,这个section就有可能使用不当。
      section元素的作用是对页面上的内容进行分块,或者说对文章进行分段,请不要与有着自己的完整的、独立的内容”的article元素混淆。
      下面,我们来看article元素与section元素结合使用的示例,希望能够帮助你更好地理解article元素与section元素的区别。
<article>
      <h1>article元素与section元素的使用方法</h1>
      <p>何时使用article元素?何时使用section元素…..</p>
      <section>
            <h2>article元素使用方法</h2>
            <p>article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。</p>
      </section>
      <section>
            <h2>section元素使用方法</h2>
            <p> section元素用于对网站或应用程序中页面上的内容进行分块。</p>
      </section>
</article>
      上述代码中的内容首先是一段独立的、完整的内容,因此使用article元素。该文章分为3段,每一段都有一个独立的标题,因此使用了两个section 元素。请记住,对文章分段的工作也是使用section元素完成的。可能有人会问,为什么没有对第一段使用section元素,这里其实是可以使用 section元素的,但是由于其结构比较清晰,分析器可以识别第一段内容在一个section元素里,所有也可以将第一个section元素省略,但是 第一个section元素里还要包含于section元素或子article元素,那么就必须写明第一个section元素。
      在HTML5中,你可以将所有页面的从属部分,譬如导航条、菜单、版权说明等包含一个统一的页面中,以便统一使用CSS样式来进行装饰。最后,关于section元素的使用禁忌总结如下:
      1)不要将section元素用作设置样式的页面容器,那是div元素的工作。
      2)如果article元素、aside元素或nav元素更符合使用条件,不要使用section元素。
      3)不要为没有标题的内容区块使用section元素。
      三、两者的区别:
      以上讲述了那么多,两者的区别到底是什么呢?事实上,在HTML5中,article元素可以看成是一种特殊类型的section元素,它比 section元素更强调独立性。即section元素强调分段或分块,而article强调独立性。具体来说,如果一块内容相对来说比较独立的、完整的 时候,应该使用article元素,但是如果你想将一块内容分成几段的时候,应该使用section元素。另外,在HTML5中,div元素变成了一种容器,当使用CSS样式的时候,可以对这个容器进行一个总体的CSS样式的套用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249317.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IPV6 简单总结

1. 转帖别人的内容 来源&#xff1a;https://www.2cto.com/net/201112/114937.html 2. 本地用IPV6单播地址 (包括链路本地单播地址 和 站点本地单播地址) 2.1 链路本地单播地址 规定了链路本地和站点本地两种类型的本地使用单播地址。链路本地地址用在单链路上&#xff0c; 而…

源码分析

https://blog.csdn.net/taifei/article/details/73546836

面向对象第一单元总结

一、对面向对象的理解 有位同学给java的面向对象做了一个形象生动的类比&#xff0c;我觉得很有道理&#xff0c;大概按我的理解如下&#xff1a; 结构的形成看图之前&#xff0c;我们要先明白&#xff0c;世界上是先有了实体&#xff0c;才有了一步步抽象至以上的体系结构&…

理解HTML语义化

1、什么是HTML语义化&#xff1f; <基本上都是围绕着几个主要的标签&#xff0c;像标题&#xff08;H1~H6&#xff09;、列表&#xff08;li&#xff09;、强调&#xff08;strong em&#xff09;等等> 根据内容的结构化&#xff08;内容语义化&#xff09;&#xff0c;…

maven上传命令

mvn deploy:deploy-file -DgroupIdcom.oracle -DartifactIdojdbc8 -Dversion12.2.0.1 -Dpackagingjar -DfileC:\Users\Admin\Desktop\ojdbc8.jar -Durlhttp://116.247.107.83:8081/repository/maven-releases/ -DrepositoryIdmy-nexus-releases

cocos2dx 开启控制台

打开 SimulatorWin.cpp 把这句启用&#xff1a; #define SIMULATOR_WITH_CONSOLE_AND_MENU 1 这句本来因为#define隐藏了转载于:https://www.cnblogs.com/mingfuqishi/p/9774301.html

网页编排规则

所谓大纲&#xff0c;简单来说就是文档中各内容区块的结构编排。可以分为显式编排和隐式编排2种方式。 显式编排&#xff1a;明确使用section元素创建文档结构&#xff0c;在每个内容区块内使用标题 隐式编排&#xff1a;不明确使用section等元素&#xff0c;根据页面中所书写的…

基本动态规划题集

观察下面的数字金字塔。写一个程序查找从最高点到底部任意处结束的路径&#xff0c;使路径经过数字的和最大。每一步可以从当前点走到左下方的点也可以到达右下方的点。 在上面的样例中,从13到8到26到15到24的路径产生了最大的和86。 【输入】 第一个行包含R(1≤ R≤1000)&…

springboot项目间接口调用实现:RestTemplate

https://blog.csdn.net/zhanglf02/article/details/89842372

python入门学习的第三天

step 1 时间 Python有两个模块&#xff0c;time和calendar&#xff0c;它们可以用于处理时间和日期 首先 import time 导入时间模块 然后 print time.time() 这个叫时间戳&#xff0c;它是从1970年1月1日午夜到现在时刻的秒数 print time.localtime(time.time()) print time.st…

JavaScript事件详解

JavaScript与HTML之间的交互是通过事件来实现的。事件&#xff0c;就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以用侦听器来预订事件&#xff0c;以便事件发生的时候执行相应的代码。 事件流 事件流描述了从页面中接收事件的顺序&#xff0c;包括事件冒泡和事件捕获。…

JavaScript基础01

JavaScript查漏补缺 JavaScript有几种数据类型&#xff1f; 0. String(字符串) 1. Number(数值) 2. Boolean(布尔) 3. Null(空值) 4. Undefined(未定义) 5. Object(对象)前 5 种是基本类型 Null类型和Undefined类型的定义和区别&#xff1f; Null类型的值只有一个(null)&#…

.Net Core应用框架Util介绍(五)

上篇简要介绍了Util在Angular Ts方面的封装情况&#xff0c;本文介绍Angular封装的另一个部分&#xff0c;即Html的封装。 标准组件与业务组件 对于管理后台这样的表单系统&#xff0c;你通常会使用Angular Material或Ng-Zorro这样的UI组件库&#xff0c;它们提供了标准化的U…

SpringBoot中处理的转发与重定向

https://blog.csdn.net/yubin1285570923/article/details/83796003

scrapy爬虫系列之三--爬取图片保存到本地

功能点&#xff1a;如何爬取图片&#xff0c;并保存到本地 爬取网站&#xff1a;斗鱼主播 完整代码&#xff1a;https://files.cnblogs.com/files/bookwed/Douyu.zip 主要代码&#xff1a; douyu.py import scrapy import json from Douyu.items import DouyuItemclass DouyuSp…

glup server 报错 Task function must be specified

解决方案 今天像往常一样&#xff0c;编写文章&#xff0c;并使用gulp bulid压缩代码&#xff0c;但是一运行&#xff1a;gulp build 就出现了这个错误&#xff1a;AssertionError: Task function must be specified。 gulp项目需要全局安装gulp和项目内安装gulp&#xff0c;…

mybatis Example 使用方法

一、mapper接口中的方法解析 mapper接口中的函数及方法 方法 功能说明 int countByExample(UserExample example) thorws SQLException 按条件计数 int deleteByPrimaryKey(Integer id) thorws SQLException 按主键删除 int deleteByExample(UserExample example) thorws SQLE…

gulp + browsersync实现页面自动刷新

写习惯了vue&#xff0c;特别喜欢vue的自动刷新功能&#xff0c;于是琢磨在node中如何自动刷新&#xff0c;使用过nodemon&#xff0c; 但是感觉效果差点&#xff0c;看到网上有gulp livereload的方案和gulp browsersync的方案&#xff0c;但都是褒贬不一&#xff0c;先简单记…

[JZOJ5836] Sequence

Problem 题目链接 Solution 吼题啊吼题&#xff01; 首先如何求本质不同的子序列个数就是 \(f[val[i]]1\sum\limits_{j1}^k f[j]\) 其中 \(f[i]\) 表示的是以 \(i\) 结尾的子序列个数 先把原数列的不同子序列个数求出来&#xff0c;然后观察一下这个转移&#xff0c;贪心的发现…

numpy和pandas的基础索引切片

Numpy的索引切片 索引 In [72]: arr np.array([[[1,1,1],[2,2,2]],[[3,3,3],[4,4,4]]]) In [73]: arr Out[73]: array([[[1, 1, 1],[2, 2, 2]],[[3, 3, 3],[4, 4, 4]]])In [74]: arr.nd…