div 是一个大的容器 内部可以包含header main nav aside footer等标签 没有语义,多用于为脚本添加样式

section的语义比div语义强些,用于主题性比较强的内容,比如一篇博客, 一个评论

article的语义比section的语义更加强,它强调的是独立性,完整性。他具有自己的内容,可以从文本中单独拎出来。

总结:相当于div是一个父级 ,section他的子集,article又是section的子集,他们的语义逐渐增强,我们任何情况下都可以使用div,

不过使用section与article语义会更加明确,提高了搜素引擎的效率。

aside:aside既可以放在article的里面,又可以放在article的外面

1)被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、名次解释,等等。

  1. <article>
  2. <h1></h1>
  3. <p></p>
  4. <aside></aside>
  5. </article>

2)在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以使友情链接,博客中的其它文章列表、广告单元等。

  1. <aside>
  2. <h2></h2>
  3. <ul>
  4. <li></li>
  5. <li></li>
  6. </ul>
  7. <h2></h2>
  8. <ul>
  9. <li></li>
  10. <li></li>
  11. </ul>
  12. </aside>

div section article aside的理解的更多相关文章

  1. HTML5 中 div section article 的区别

    刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下. div HTML Spec: Th ...

  2. div section article区分--20150227

    div section article ,语义是从无到有,逐渐增强的.div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以 ...

  3. 2018.7.18 div,section,article的区别和使用

    section ·<section> 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. ·section用作一段有专题性的内容,一般在它里面会带有标题. ...

  4. HTML5中div,article,section的区别

    最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头 ...

  5. section元素与div、article元素的区别

    section元素是对网站或应用程序中页面上的内容进行分块,一个section元素通常有标题和内容组成.但section元素并非一个普通的容器元素,当一个容器需要直接定义样式或通过脚本定义行为时,推荐 ...

  6. html5之div,article,section区别与应用

    div 块级元素,在里面的内容会自动开始新行,可以定义文档中的分区或节,把文档分割成独立,不同的部分 本身没有什么语义,更适合帮助布局,进行样式化. <div> </div> ...

  7. HTML中的div,section,article的区别

    刚开始看到标签的就有些疑惑,觉得为什么有那么多相同用途的标签,多方查询资料细细比较之后才发现原来各有千秋,结合自己的想法总结如下: div在HTML早期版本就支持了,section和article是H ...

  8. html5笔记——<section> 标签

    定义和用法 <section> 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 注意: section 不是一个专用来做容器的标签,如果仅仅是用于设置 ...

  9. html常见元素和理解

    html常见元素分为两类,一类是header区的元素,一类是body区的元素 header区元素: meta title style link scipt base 里面包括像meta,title,s ...

随机推荐

  1. YII 小模块功能

    //1,使用updateCounters()来更新计数器字段. Book::model()->updateCounters(array('download_count'=>1),':id= ...

  2. python 基础干货 01

    赋值的实现 a = 'abc' 1. 在内存中创建了'abc'字符串; 2. 在内存中创建了一个名为 a 的变量, 并把它指向刚才创建的'abc', 也就是a中保存着字符串的地址. b = a, 创建 ...

  3. GUI(图形用户界面)

    一.GUI(图形用户界面) GUI Graphical User Interface(图形用户接口) 用图形的方式,来显示计算机操作的界面,这样更方便更直观 CLI Command line User ...

  4. Zend Framework 2参考Zend\Authentication(Zend\Authentication介绍)

    原文:Zend Framework 2参考Zend\Authentication(Zend\Authentication介绍) Zend\Authentication组件提供了认证接口和具体的通用的认 ...

  5. mysql出现Got error 28 from storage engine错误

    今天晚上碰到app数据库出错Got error 28 from storage engine 服务程序出现这样的错误 Sql.Data---Error writing file '/tmp/ML2ig ...

  6. 【iOS-Android开发对照】 之 APP入口

    [iOS-Android开发对照]之 APP入口 [图片 Android vs iOS] 提纲 对照分析iOS,Android的入口, iOS,Android的界面单元 为什么要有那样的生命周期 继承 ...

  7. 二分PKU3273

    <span style="color:#3333ff;">/* F - 二分 Time Limit:2000MS Memory Limit:65536KB 64bit ...

  8. FastDFS分布文件系统[转]

    FastDFS是为互联网应用量身定做的一套分布式文件存储系统,非常适合用来存储用户图片.视频.文档等文件.对于互联网应用,和其他分布式文件系统相比,优势非常明显.具体情况大家可以看相关的介绍文档,包括 ...

  9. WTL的核心机制

    WTL背景介绍 WTL是微软ATL开发组成员Nenad Stefanovic先生在ATL Windowing机制上发展起来的一整套GUI框架,运用template技术组织和创建GUI对象,构筑了精致的 ...

  10. Jquery调用从ashx文件返回的jsonp格式的数据处理实例

    开发环境:vs2010+jquery-1.4.min.js 解决问题:网上代码比较少,好多调试不通,返回数据不用json而用jsonp主要考虑解决跨域问题 开发步骤:打开VS2010,新建一web站点 ...