`
jjklmm
  • 浏览: 55561 次
  • 性别: 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_的区别

    HTML5_中_div_section_article_的区别 div:本身没有任何语义,用作布局以及样式化或脚本的钩子(hook)。 section 表示一段专题性的内容,一般会带有标题。 article 是一个特殊的 section 标签,它比 section 具有更...

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

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

    HTML5中div、article、section的区别及使用介绍

    div, section article这三个标签的基本概念想必大家对其不是很了解下,语义是从无到有,逐渐增强,下面有一个简单的网页,供大家参考,希望可以对html5的结构有所熟悉

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

    HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>。 最常被问起的问题是:在什么情况下我们应该使用这些元素?以及我们应该如何正确...

    Web前端基础:HTML5语义化标签.pptx

    HTML5语义化标签<article>示例<article> 文章标题</h1> 这是一篇文章 <article>评论1...</article> <article>评论2...</article></article>HTML5语义化标签<section>标签<section>标签定义文档中的节(section、区段...

    Html5中文手册(程序员必备手册)

    26、<div> 定义文档中的一个部分。 27、<dl> 定义定义列表。 28、<dt> 定义一个定义列表里的项目。 29、<embed> 定义外部交互内容或插件。 30、<fieldset> 可将表单内的相关元素分组。 31、<figcaption> 定义 figure...

    解读html5关于html5的应用与认识

    • 不需要闭合标签 在 HTML5 中,空标签(如:br、img 和 input )并不需要闭合标签。 • 废弃的标签 下面这些标签并不被 HTML5 支持: <acronym>、<applet>、<basefont>、<big>、<...

    详解HTML5布局和HTML5标签

    一、新的文档类型声明(DTD) ...结构标签:(块状元素) 有意义的div  <article> 标记定义一篇文章   标记定义一个页面或一个区域的头部  <nav> 标记定义导航链接  <section> 标记定义一个区域  <aside> 标

    从入门到精通HTML5——PDF——网盘链接

     第12章 HTML 5与HTML 4的区别 225  视频讲解:51分钟  12.1 语法的改变 226  12.1.1 HTML 5的语法变化 226  12.1.2 HTML 5中的标记方法 226  12.1.3 HTML 5语法中的3个要点 227  12.1.4 标签实例 228  12.2...

    不使用class和id进行网页布局的方法

    结合了富有新的语义化标记的HTML5,CSS3为web设计师们的网页提供了神一般的...div#news {} div.section {} div.article {} div.header {} div.content {} div.footer {} div.aside {} 我们再来看看基于HTML5的实例:

    html5的新增的标签和废除的标签简要概述

    例:HTML5中<section>……</section>;HTML4中<div> ……</div>。 article元素 表示页面中一块与上下文不相关的独立内容。比如一篇文章。 aside元素 表示article元素内容之外的、与article元素内容相关的辅助信息。 ...

    微信小程序-将html文件转为微信小程序用的wxml文件

    body,article,aside,ul,li,ol,caption,dd,dl,dt,footer,header,nav,section,table,thead,tbody,tr,td,th,h1,h2,h3,h4,h5,h6,div,p 将img转化为image 将a转化为navigator 将span,s,b,i,strong转化为text 安装...

    HTML5和CSS3价格表翻转切换动画特效.zip

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, ...

    html-interview-questions:100 多个 HTML5 面试问题

    HTML5 面试问题 ... 拉取请求受到高度赞赏。 目录 号码 问题 01. 02. 03. ... 解释块元素和行内元素的区别?... 什么时候应该使用section 、 div或article ? 17. 一个网页可以包含多个元素吗? 元素呢?

    HTML5中新标签和常用标签详解

    html5 新增的结构元素,有的经常使用到,有的用不上,虽然说它们的出现是更促进页面更有语义,更好的 seo,但其实当页面禁用样式后,它们的展现跟 div 是没撒差别,有同学可能会说,既然一样,又不影响页面的最终...

    HTML5之语义标签介绍

    在HTML5标准中,新加了几个用于增添页面语义的标签,这些标签有:article、section、nav和aside等。与别的大多数标签不 同,浏览器在解释渲染这些标签的时候仅仅把它作为普通的div块级元素来处理,不会添加任何额外...

    html入门到放弃笔记

    HTML中用于描述功能的符号称为"标记" 标记在使用时,用尖括号 "<>",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法:<标记>内容标记> Demo : 1、创建 p 标记 --<p>...</p> 2、创建 ...

    CSS 语义化标记抛弃DIV标记

    曾经,设计师们经常会跟频繁使用基于table的没有任何语义的布局。...复制代码代码如下: <div id=”news”> <div class=”section”> <div class=”article”> <div class=”header”> <h1>Div Soup Demo

Global site tag (gtag.js) - Google Analytics