HTML中的div,section,article的区别
刚开始看到标签的就有些疑惑,觉得为什么有那么多相同用途的标签,多方查询资料细细比较之后才发现原来各有千秋,结合自己的想法总结如下:
div在HTML早期版本就支持了,section和article是HTML5提出的两个语义化标签。
div
定义:文档中的分区或节。
使用场合:作为布局以及样式化时使用(此时三者并无区别,但div更常用)
提示:<div> 是一个块级元素,浏览器通常会在 div 元素前后放置一个换行符。
section
定义:文档中的节,一般是具有标题性的。
使用场合:文章的章节、标签对话框中的标签页、或者论文中有编号的部分。
提示:section不仅仅是一个普通的容器标签,这区别与div标签。一般来说,当元素内容明确地出现在文档大纲中时,section 就是适用的。
article:
定义:独立的自包含内容。一般来说,article会有标题部分( 包含在header内 ),有时也会包含footer。
使用场合:一段内容脱离了所在的语境,仍是完整的、独立的,则应该用article标签。
提示:虽然section也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article本身就是独立的、完整的。
总结:
(1)div section article ,语义是从无到有,逐渐增强的。
(2)div 无任何语义,仅仅用作样式化或者脚本化;对于一段主题性的内容,则就适用 section;假如一段主题性内容脱离上下文后仍是完整且独立存在的一段内容,则就适用 article。
HTML中的div,section,article的区别的更多相关文章
- HTML5 中 div section article 的区别
刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下. div HTML Spec: Th ...
- 2018.7.18 div,section,article的区别和使用
section ·<section> 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. ·section用作一段有专题性的内容,一般在它里面会带有标题. ...
- div section article区分--20150227
div section article ,语义是从无到有,逐渐增强的.div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以 ...
- div section article aside的理解
div 是一个大的容器 内部可以包含header main nav aside footer等标签 没有语义,多用于为脚本添加样式 section的语义比div语义强些,用于主题性比较强的内容,比如一 ...
- HTML中的Div Span label的区别
div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...
- HTML5中div,article,section的区别
最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头 ...
- section元素与div、article元素的区别
section元素是对网站或应用程序中页面上的内容进行分块,一个section元素通常有标题和内容组成.但section元素并非一个普通的容器元素,当一个容器需要直接定义样式或通过脚本定义行为时,推荐 ...
- [html5]HTML5中<section>和<article>的区别
一.section元素 从字面理解就是区块.部分的意思,相对于article元素更加广泛,每个区块都可以使用,比如页面里的导航菜单.文章正文.文章的评论等. 1.section元素用于对网站或应用程序 ...
- html5之div,article,section区别与应用
div 块级元素,在里面的内容会自动开始新行,可以定义文档中的分区或节,把文档分割成独立,不同的部分 本身没有什么语义,更适合帮助布局,进行样式化. <div> </div> ...
随机推荐
- [WCF编程]11.错误:错误类型
一.错误概述 不管是哪一种操作,在任意时刻都可能出现不可预期的错误.问题在于我们应该如何将错误报告给客户端.异常和异常处理机制是与特定技术紧密结合的,不能跨越边界的.此外,如果有客户端来处理错误,必定 ...
- eclipse报错:Failed to load the JNI shared library
Eclipse运行时提示“Failed to load the JNI shared library /Java/jre6/bin/client/jvm.dll”的一个解决方案 因为 Eclipse ...
- MySQL 相关总结
MySQL 优秀在线教程 RUNOOB-SQL 教程 MySQL 常用命令 导出操作 -- 某数据库 全部表 结构和数据 mysqldump -h192.168.8.152 -uroot -p man ...
- C++_系列自学课程_第_10_课_表达式_《C++ Primer 第四版》
程序设计语言中大部分程序都在进行表达式的求值操作, 例如求两个数的和,求一个表达式的逻辑结果,或者通过输入输出表达式语句进行输入和输出. 这里我们对表达式进行讨论. 一.表达式 1.表达式 表达式由一 ...
- linux top命令查看内存及多核CPU的使用讲述
查看多核CPU命令 mpstat -P ALL 和 sar -P ALL 说明:sar -P ALL > aaa.txt 重定向输出内容到文件 aaa.txt top命令 经常用来监控l ...
- restful是什么
resful是什么 rest是一种开发的风格,他不是框架,也没有类库,是一种约定 有什么不同 非restful的开发方式 当没有接触restful的时候,URL通常是动词,比如127.0.0.1:80 ...
- CRM基于.NET的增删改查
一.准备工作: 1.添加 microsoft.crm.sdk.proxy.dll和microsoft.xrm.sdk.dll 引用到项目中!并引用以下using! using Microsoft.Xr ...
- 关于SharePoint 2013的工作流(二)
摸索完了如何画流程实现功能接下来,就是如何配置和部署了.在添加工作流之前,肯定需要一个审批人的配置以及阀值等等的配置. 这个的实现基本上和以前的工作流一致.写法却不一样了,模板自带的都是用js实现的. ...
- AndroidTV版(乐视超3 X55)root,将自己的软件设置为开机自启、系统软件,卸载系统应用等问题总结
最近开发android软件客户要安装在乐视TV上,而且要求是开机自启.我很天真的以为写一个广播接收类接收开机广播就可以了,可是根本不会,有的设备就是不可以接收到开机广播,于是各种百度搜索.大神们说是只 ...
- iOS UIActivityIndicatorView
UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle ...