`
jjklmm
  • 浏览: 56959 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5中div、section、article的区别

阅读更多

1 div

  本身没有任何语义,用作布局或样式化。  
  当一个标签只是为了样式化或者方便脚本使用时,应该使用 div 。

 

2 section

  与 div 的无语义相对,简单地说 section 就是带有语义的 div 了。

   section 不仅仅是一个普通的容器标签,section 表示一段专题性的内容,一般会带有标题。

当元素内容明确地出现在文档大纲中时,section 就是适用的。

 

3  article

   article 是一个特殊的 section 标签,它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。当元素内容聚合起来更加言之有物时,应该使用 article 来替换 section 。

   当 article 内嵌 article 时,原则上来说,内部的 article 的内容是和外层的 article 内容是相关的。例如,一篇博客文章中,包含用户提交的评论的 article 就应该嵌套在包含博客文章 article 之中。

 

 

总结:
 
    你可以想象一份报纸,报纸分很多版,每一版都是一个section,都包含若干article,每篇文章又可以分成一个或者多个section。

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


安博中程公开课:HTML5开发框架PhoneGap开发实战

0
0
分享到:
评论

相关推荐

    HTML5_中_div_section_article_的区别

    了解了 div、section 和 article 的基本概念后,我们可以更好地组织和结构化我们的 HTML5 文档。下面是一些使用这些标签的要点: 1. **div**:作为通用布局工具,div 用于创建页面上的区域,通常配合 CSS 进行样式...

    详解HTML5中div和section以及article的区别

    尤其是对 div、section、article 这几个标签,实在弄不清楚应该使用在什么场合下。div HTML Spec:  The div element has no special meaning at all. 这个标签是我们见得最多、用得最多的一个标签。本身没有任何...

    HTML5 CSS DIV materials

    在HTML中,`<div>`是一个无语义的块级元素,常用于组合其他元素,以便应用样式或进行布局。DIV可以通过CSS来设置宽高、背景色、边距、边框等属性,实现灵活的网页布局。常见的布局模式有流式布局、网格布局和响应式...

    html5+div+css3模板

    Div(层)是HTML中的一个非常重要的布局工具。通过使用<div>标签,开发者可以将网页内容分隔成多个独立的区块,便于进行样式控制和布局管理。Div元素通常是无语义的,但通过CSS3可以赋予其丰富的样式和行为,实现...

    HTML5 对各个标签的定义与规定:section

    ### HTML5中的<section>标签详解 #### 一、引言 在HTML5中,为了更好地组织和呈现网页内容,引入了一系列新的语义化标签,其中`<section>`标签是一个非常重要的组成部分。它不仅有助于提高网页的可读性和可维护性...

    html-div-css的ppt

    Div(Division)是HTML中的一个容器元素,通常用于组织和布局页面内容。通过CSS,div可以被设置为任意形状和大小,帮助实现复杂的网页布局。Div是网页设计中实现响应式布局和模块化设计的关键元素。 CSS(Cascading...

    83套HTML5+CSS3+DIV网页模板

    HTML5是超文本标记语言的最新版本,它的主要改进包括增强的语义化标签(如、、<article>、<section>等)、离线存储能力、拖放功能、媒体元素(和)以及图形绘制API(Canvas)。这些特性使得HTML5能够创建更加丰富和...

    CSS+DIV+HTML绚烂实用效果

    DIV元素是HTML中的一个通用容器,可以用来组合其他HTML元素,为布局和样式设置提供基础。通过CSS,我们可以将多个DIV叠加、定位,创建出复杂且富有层次感的布局。利用浮动(float)、绝对定位(position: absolute)...

    html+div+css的几个demo

    2. Div(Division):在HTML中,`<div>`标签是一个通用容器,用于组合其他HTML元素,为页面划分区域。通过CSS,我们可以对`div`进行布局控制,如设置宽高、浮动、对齐方式等,实现复杂的网页布局。 3. CSS...

    CSS+DIV+HTML网页设计案例

    DIV元素在HTML中扮演着关键角色,它是块级元素,意味着它默认占据一整行,可以容纳其他HTML元素。开发者通常会使用类(class)或ID(id)来标识特定的DIV,然后在CSS中应用样式。通过堆叠和布局多个DIV,可以创建多列...

    HTML5、CSS3应用教程之 跟DIV说Bey!Bey!

    ### HTML5与CSS3在网页设计中的应用及优化——告别DIV标签 #### 一、引言 随着技术的发展,Web设计领域也在不断进步。从早期的表格布局到后来的DIV+CSS布局,再到如今HTML5与CSS3的应用,网页设计的技术栈一直在...

    HTML5+css3+DIV学习的PPT,一共5章,完整版,培训学校专用

    **DIV** 是HTML中的一个通用容器元素,通常用于组织和布局页面内容。在CSS3的支持下,通过设置div的样式,可以实现各种复杂的网页布局。配合display属性,如使用block、inline-block或flex,可以控制div的显示方式。...

    Div+css教程 下载

    Div是HTML中的一个通用容器元素,它的主要作用是将网页内容划分为不同的区域。通过为Div分配不同的ID或Class,我们可以分别对每个区域进行样式定义,实现内容的分组和布局。例如: ```html <div id="header">头部...

    5点DIV注意事项

    尽可能地使用有语义的HTML元素(如`header`、`footer`、`article`、`section`等)替代无语义的`div`,以提高页面的可读性和可访问性。 3. **类选择器**: - 为了更好地管理和定位`div`,应为其指定类名,而不是...

    html5.0/css/div实例

    `div`元素在HTML中是一个非常基础但强大的工具,它是块级元素,可以容纳其他HTML元素并对其进行分组。`div`通常与CSS结合使用,用于创建复杂的布局和设计。通过对`div`设置样式,如宽度、高度、边距、背景色等,我们...

    几十套HTML5+CSS3+DIV网页模板

    DIV是HTML中的一个通用容器元素,全称为Division,通常用来组织和布局网页内容。在CSS的帮助下,开发者可以通过设置div的宽度、高度、边距和对齐方式来实现灵活的页面布局。DIV+CSS的组合是实现网页设计“内容与表现...

    HTML5中的Article和Section元素认识及使用

    HTML5的Article和Section元素是两种用于网页结构化的新元素,它们旨在提高内容的语义性和可读性,使得搜索引擎和屏幕阅读器更好地理解和呈现网页内容。这两个元素虽然容易混淆,但它们各自有着明确的使用场景。 ...

Global site tag (gtag.js) - Google Analytics