div section article ,语义是从无到有,逐渐增强的。div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 article。原则上来说,能使用 article 的时候,也是可以使用 section 的,但是实际上,假如使用 article 更合适,那么就不要使用 section 。nav 和 aside 的使用也是如此,这两个标签也是特殊的 section,在使用 nav 和 aside 更合适的情况下,也不要使用 section 了。

对于 div 和 section、
article 以及其他标签的区分比较简单。对于 section 和 article
的区分乍看比较难,其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在,这里面的重点又在完整身上。因为其实说起来 section
包含的内容也能算作独立的一块,但是它只能算是组成整体的一部分,article 才是一个完整的整体。

div section article区分--20150227的更多相关文章

  1. HTML5 中 div section article 的区别

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

  2. div section article aside的理解

    div 是一个大的容器 内部可以包含header main nav aside footer等标签 没有语义,多用于为脚本添加样式 section的语义比div语义强些,用于主题性比较强的内容,比如一 ...

  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. 对于指定区块div,如何区分区块内的点击 和 区块外的点击?

    需求:对于区块div内点击事件, 需要展示区块内的附属操作区块,对于区块外的点击, 需要将前面说的附属操作区块隐藏掉. 分析:对于一般的HTML控件,有标准的js事件接口, focus和blur,来实 ...

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

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

  9. <section> 标签

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

随机推荐

  1. 传统JDBC操作数据库

    package com.jdbc.example; import java.sql.Connection; import java.sql.Date; import java.sql.DriverMa ...

  2. CF939D Love Rescue

    题意 给定两个长度为n的由小写字母组成的字符串 每次可以花费1的代价,指定两个字母,把其中一个全部变为另一个 求使两个字符串相同的最小花费 n <= 100000 因为谁变成谁没有关系反正相等就 ...

  3. PJzhang:互联网是有国界

    猫宁!!! 参考链接:https://mp.weixin.qq.com/s/NFgps_5HBpl3ZjDoR5w8XA 上世纪90年代,互联网开始崛起,美国凭借超级大国的地位,先进技术优势,以美国公 ...

  4. dosbox让DOSBox启动后自动执行命令——自动挂载

    学习汇编时. 每次启动DOSBox后,都要挂载.转盘符,于是有一个骚套路. 找到这个:bat文件 用记事本就可以编辑.  拉到最下面,找到[autoexec]部分,补充命令如下: mount c f: ...

  5. react-native-wechat微信组件的使用

    对我来说link没有成功过,所以参考了其他人的文章,原文:https://www.jianshu.com/p/6a792118fae4 第一步:要去:https://open.weixin.qq.co ...

  6. NEERC2017:L - Laminar Family

    传送门 很容易想到,离线按路径长度从大到小排个序,用树链剖分加颗支持区间cover的线段树就好了 代码: #include<cstdio> #include<iostream> ...

  7. centos 6.x下pxe+tftp+http+kickstart无人值守安装操作系统

    1.1 什么是PXE PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过 ...

  8. 玲珑杯”ACM比赛 Round #4 1054 - String cut 暴力。学到了扫描的另一种思想

    http://www.ifrog.cc/acm/problem/1054 问删除一个字符后的最小循环节是多少. 比赛的时候想不出,不知道怎么暴力. 赛后看了别人代码才晓得.唉,还以为自己字符串还不错, ...

  9. 本地连接远程Oracle数据库

    由于项目开发测试,需要在本地连接远程的Oracle数据库 之前搭过环境,但是重装了系统,现在又重新装一遍 软件安装 连接远程Oracle需要两个软件: 一个Oracle客户端,instantclien ...

  10. 前端之CSS布局模型

    一.css布局模型: 流动模型(Flow) 浮动模型(Float) 层模型(Layer) 1.流动模型: 页面在没有设置任何css样式,元素按照本身的特性在浏览器中显示,这样的布局模型称为流动模型: ...