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

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

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

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

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

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

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

<article>
<h1>…</h1>
<p>…</p>
<aside>…</aside>
</article>

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

<aside>
<h2>…</h2>
<ul>
<li>…</li>
<li>…</li>
</ul>
<h2>…</h2>
<ul>
<li>…</li>
<li>…</li>
</ul>
</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. admin-openrc

    #!/bin/bash # To use an Openstack cloud you need to authenticate against keystone, which # returns a ...

  2. 小Q书桌的下载、安装和使用

    最近,无意之间,在某大牛电脑里,使用到了这款软件.感谢! 确实,挺实用和方便的,强烈推荐!!! 1.  下载 http://qdesk.qq.com/ 2.  安装 3.  使用 多么方便啊!

  3. 4 weekend110的YARN的通用性意义 + yarn的job提交流程

    Mr程序写完之后,提交给yarn,yarn会产生一个MRAppMaster,想说的是,yarn变得很 通用,yarn集群上,不光可以跑mr程序,还可以跑各种运算模型. 海量批处理,mapreduce ...

  4. XMPP协议实现原理介绍

    本文介绍XMPP协议原理及相关信息. XMPP协议简介   XMPP(Extensible Messageing and Presence Protocol:可扩展消息与存在协议)是目前主流的四种IM ...

  5. 通过查看mysql 配置参数、状态来优化你的mysql

    mysql的监控方法大致分为两类: 1.连接到mysql数据库内部,使用show status,show variables,flush status 来查看mysql的各种性能指标. 2. 直接使用 ...

  6. Makefile详解--隐含规则

    Makefile详解--隐含规则(转) Makefile系列文章,这里有个前辈连续洗了一个系列来介绍,共有26篇博客文章. http://www.cppblog.com/ivenher/archive ...

  7. java注释 命名 数据类型 基本类型转换 位运算符 逻辑运算符 三目运算符

    一.java注释 1.单行注释  //注释内容 2.多行注释 /*注释内容*/ 3.文档注释(可用javadoc工具生成api文档,不过我还没试过)/**文档注释*/,文档注释可以在使用的时候看见注释 ...

  8. android注解使用详解(图文)

    在使用Java的SSH框架的时候,一直在感叹注解真是方便啊,关于注解的原理,大家可以参考我的另一片文章Java注解详解.最近有时间研究了android注解的使用,今天与大家分享一下. android中 ...

  9. ubuntu中安装jdk 分类: java 学习笔记 linux ubuntu 2015-07-06 17:49 74人阅读 评论(0) 收藏

    参考文献:ubuntu 13.04 安装 JDK 先去oracle官网下载jdk,这一段我就不赘述了. 下载好之后先解压,解压方式参见 linux常用的压缩与解压缩命令 ,解压之后,将文件剪贴至/us ...

  10. WSDL阅读方法

    我们以天气预报WebService服务为例,来看看怎么阅读一个wsdl文档. 打开一个wsdl文档后,先看底部. binding在这里: portType在这里: 好了,看了上面的,我们来说说wsdl ...