H5中section和article标签之间的区别

大家都知道,H5最大的特点就是标签语义化,可以使我们和浏览器更好的理解结构与阅读,section和article就是两只新的语义化标签。这两个标签的使用结构就是都有标题和内容主体,那么如何在使用过程中区分它们呢?下面就说一下我自己的小见解。

我们在阅读一本书籍的时候,通常在目录检索中看到以下结构,如下:

第一章

  第一节

  第二节

  第三节

第二章

  第二节

  第三节

第三章

第四章

从上面的目录结构中可以看出,第一章和第二章中有小节,第三章和第四章为单独的一片文章。大章节中的小节为该章节的小分支,虽然有完整的文章结构,但却不能单独成文,但是有了小章节的构成,却可以充实并且结构化大章节的主体;有的章节(如:第三章和第四章)就只有单独的主体,不需要小节分章补充,独立成文。其实这就是article和section的结构用法,每个article标签为一大章节,可以单独使用却互不干涉,独立成文;而大章节里的小章节就是section,虽然有明确的标题和正文却是附属在大章节--article正文内,不能独立成文。

总结一点,最主要的就是从属关系,section不能独立出现,它的出现必定是在article下!

以上内容仅仅是个人观点,有建议和批评请您留言不吝赐教!

时间: 2024-10-10 19:53:06

H5中section和article标签之间的区别的相关文章

HTML5中section、article、figure的区别及使用介绍

html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>河南焦作景点介绍</title> <link type="text/css" rel="stylesheet" href="css.css"> </head>

Html中&lt;br&gt;和&lt;p&gt;标签的换行区别

br与p标签区别,br和p标签认识之div+css开发时候常用换行标签接下来,我们介绍下html中常遇见和常用到的<br />和<p>标签之间的区别及用法,以及使用css对他们控制设置属性样式——扩展知识css换行,css不换行. 一.综合介绍br p 首先,相同之处是br和p都是有换行的属性及意思其次,区别<br />是只需一个单独使用,而<p>和</p>是一对使用再次,br标签是小换行提行,p标签是大换行(分段)各行作用. Br实例,特别注意

struts2中拦截器与过滤器之间的区别

首先是一张经典的struts2原理图 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标准的过滤器链 c) FilterDispatecher会去查找相应的ActionMapper,如果找到了相应的ActionMapper它将会将控制权限交给ActionProxy d) ActionProxy将会通过ConfigurationManager来查找配置struts.xml        i. 下一步将会

[html5]HTML5中&lt;section&gt;和&lt;article&gt;的区别

一.section元素 从字面理解就是区块.部分的意思,相对于article元素更加广泛,每个区块都可以使用,比如页面里的导航菜单.文章正文.文章的评论等. 1.section元素用于对网站或应用程序中页面上的内容进行分块,section元素的作用是对页面上的内容进行分块,或者说对文章进行分段,: 2.一个section元素通常由内容及其标题组成.通常不推荐为那些没有标题的内容使用section元素, 3.section元素并非一个普通的容器元素:当一个内容需要被直接定义样式或通过脚本定义行为时

Laravel模板引擎Blade中section的一些标签的区别介绍

Laravel 框架中的 Blade 模板引擎,很好用,但是在官方文档中有关 Blade 的介绍并不详细,有些东西没有写出来,而有些则是没有说清楚.比如,使用中可能会遇到这样的问题: [email protected] 和 @section 都可以预定义可替代的区块,这两者有什么区别呢?[email protected] 可以用 @show, @stop, @overwrite 以及 @append 来结束,这三者又有什么区别呢? 本文试对这些问题做一个比较浅显但是直观的介绍. @yield 与

Js中parentNode,parentElement,childNodes,children之间的区别

转载自  http://www.jb51.net/article/43730.htm parentElement 获取对象层次中的父对象.  parentNode 获取文档层次中的父对象.  childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合.  children 获取作为对象直接后代的 DHTML 对象的集合.

smarty模板引擎中section循环loop与total的区别

在smarty模板引擎的section循环中 $data=[101,102,103,105,104]; section的两个属性total与loop {section foo $data start=1 step=2} {$smarty.section.foo.total}--输出2 {$smarty.section.foo.loop}--输出5 {/section} 意即:使用total输出的是循环执行的次数,使用loop输出的是所循环数据的count

SQL中char,varchar和nvarchar 之间的区别

1.char[n] 是定长的,也就是当存储字符小于n时,他会自动补齐(补空值).优点:效率较varchar高.2.varchar[n]是变长且非unicode字符数据类型,n的取值在1到8000之间,该类型英文字符占一个字节,中文字符占两个字节.优点:更加合理利用空间,不会造成过多的浪费.3.nvarchar[n]是变长且unicode字符数据类型,n的取值在1到4000之间,该类型字符无论中英文都占取两个字节.ps:希望各位大佬可以多多批评指正,补充. 原文地址:https://blog.51

转:Jquery AJAX POST与GET之间的区别

本文是对Jquery中AJAX POST与GET之间的区别.进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1:GET访问 浏览器 认为 是等幂的 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配] 所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果 POST则 认为是一个 变动性 访问 (浏览器 认为 POST的提交 必定是 有改变的) 防止 GET 的 等幂 访问 就在URL后面加上 ?+new Date();,