div,section,article的区别和使用
section
英 [ˈsekʃn] 美 [ ˈsɛkʃən]
n.部分;节;部件;部门
vi.切开;切断;做(动物或植物组织)切片;把(精神病患者)正式送入精神病院
vt.把…切成片(或段);作…的切片;把…作成截面;制作…的剖面图
第三人称单数: sections 复数: sections 现在分词: sectioning 过去式: sectioned 过去分词: sectioned
article
英 [ˈɑ:tɪkl] 美 [ˈɑ:rtɪkl]
n.物品;(报章杂志中的)文章,论文;条款;[语] 冠词
vt.使受协议条款的约束;以协议(或契约)约束;订约将…收为学徒(或徒弟);定约雇用
vi.进行控告,提出罪状(或指责)(against);签订协议
第三人称单数: articles 复数: articles 现在分词: articling 过去式: articled 过去分词: articled
div、section、article的区别和使用,有需要的朋友可以参考下。
在进行HTML5的编写时,会对div、section、article的使用混淆,经过查阅相关的资料,以及自己的总结,得出div、section、article的区别。
1、什么时候使用
(1)div:作为布局以及样式化时使用;
(2)section:表示文档中的节,一般是具有标题的。如:文档大纲、文章章节、博客条目、用户评论部分或者论文中有编号的部分时使用;
通常会带有标题。如果没有标题,那么就不推荐使用section。
文章章节小标题
文章章节内容
(3)article:表示独立的自包含内容,如:一篇文章。文章中可包含标题、内容、脚注
文章标题
文章内容
2、示例
文章标题
发表时间
文章正文
文章评论
发表者:lanyf
10:13
评论内容
注:
1、:定义文档的页面(介绍信息),如文章标题,发表时间
2、article和section是可以嵌套使用的
3、为什么在section中可以嵌套使用article,拿示例中的代码来解释
(1)评论是文章的一个节,所以使用section
(2)而每一个用户的评论是相对独立的内容,所以每一个用户的评论用article
刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感。尤其是对 div、section、article 这几个标签,实在弄不清楚应该使用在什么场合下。
div
HTML Spec: “The div element has no special meaning at all.”
这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义,用作布局以及样式化或脚本的钩子(hook)。
section
HTML Spec: “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”
与 div 的无语义相对,简单地说 section 就是带有语义的 div 了,但是千万不要觉得真得这么简单。section 表示一段专题性的内容,一般会带有标题。看到这里,我们也许会想到,那么一篇博客文章,或者一条单独的评论岂不是正好可以用 section 吗?接着看:
“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”
当元素内容聚合起来更加言之有物时,应该使用 article 来替换 section 。
那么,section 应该什么时候用呢?再接着看:
“Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”
section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣,因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用,这个话题以后会出篇专门的文章来讨论,这里暂时略过。
要注意,W3C 还警告说:
“The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.”
section 不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时,应该使用 div 。一般来说,当元素内容明确地出现在文档大纲中时,section 就是适用的。
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
勤彬乐唯: HTML5中新增了、 、 、 、 、 、 多个有语义的结构化标签元素.其中section和article这两个标签和div差不多功能,很容易混淆. 1、section(章节) 简单地说section就是带有语义的div,比如: 相当于 . section表示一段专题性的内容,一般...
铁山港区19285781199: div,section,article的区别和使用 - ?
勤彬乐唯: HTML5 中 div section article 的区别 刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div、section、article 这几个标签,实在弄不清楚应该使用在什么场合下. div HTML Spec: “The div element has no special ...
铁山港区19285781199: html5中div section article之间具体有什么区别 - ?
勤彬乐唯: div:本身没有任何语义,用作布局以及样式化.section:与 div 的无语义相对,简单地说 section 就是带有语义的 div 了,但是千万不要觉得真得这么简单.section 表示一段专题性的内容,一般会带有标题.section 应用的典型场景有文章的章...
铁山港区19285781199: 怎么理解HTML5 中 div section article?
勤彬乐唯: 一、section元素从字面理解就是区块、部分的意思,相对于article元素更加广泛,每个区块都可以使用,比如页面里的导航菜单、文章正文、文章的评论等. 1、section元素用于对网站或应用程序中页面上的内容进行分块,section元素的作用是...
铁山港区19285781199: div和Span及a标签的区别 - ?
勤彬乐唯: <div> 可定义文档中的分区或节(division/section).<div> 标签可以把文档分割为独立的、不同的部分.它可以用作严格的组织工具,并且不使用任何格式与其关联.如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效.<span> 标签被用来组合文档中的行内元素.<a> 标签可定义锚.锚 (anchor) 有两种用法:通过使用 href 属性,创建指向另外一个文档的链接(或超链接) 通过使用 name 或 id 属性,创建一个文档内部的书签(也就是说,可以创建指向文档片段的链接) <a> 元素最重要的属性是 href 属性,它指定链接的目标.
铁山港区19285781199: div详细用法,举例说明 - ?
勤彬乐唯: div标签定义 HTML 文档中的分隔(DIVision)或部分(section).div属于web前端的学习内容,其中<div> 标签常用于组合块级元素,以便通过样式表来对这些元素进行格式化.<div> 可定义文档中的分区或节(division/section).DIV是块状标...
铁山港区19285781199: 写代码的时候div span article section之类的用处有什么不同吗 - ?
勤彬乐唯: div是块级元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".就是说<div>80实话网</div><div>80实话网</div>,不加样式,2个80实话网会在2行显示.span是内联元素(inline element),一般都是基于语义级(semantic)的基本元素.内联元素只能容纳文本或者其他内联元素,常见内联元素 “a”.section 就是带有语义的 div 了,但是千万不要觉得真得这么简单.section 表示一段专题性的内容,一般会带有标题.当元素内容聚合起来更加言之有物时,应该使用 article 来替换 section .
铁山港区19285781199: DIV是什么 - ?
勤彬乐唯: 1、Div 全称 division 意为“区分”,是HTML中的一个标签.你在HTML中可以理解为就是一个层.DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码 . 如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效...
铁山港区19285781199: div的作用是什么啊? - ?
勤彬乐唯:定义和用法可定义文档中的分区或节(division/section). 标签可以把文档分割为独立的、不同的部分.它可以用作严格的组织工具,并且不使用任何格式与其关联.如果用 id 或 class 来标记 ,那么该标签的作用会变得更加有效...
铁山港区19285781199: div 什么意思?在网页制作中有什么用途? - ?
勤彬乐唯: DIV>称为区隔标记.作用:设定字、画、表格等的摆放位置.当你把文字,图象,或其他的放在 DIV 中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”.而中文我们把它称作“层次”.所以当你以后看到...