<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<article>
    <header>
        <h1>我的个人资料</h1>
    </header>
    <p>我叫mudy，是个小学生</p>
    <section>
        <h2>评论</h2>
        <article>
            <h3>评论人：而额</h3>
            <p>你说得对</p>
        </article>
        <article>
            <h3>评论人：而2</h3>
            <p>你说得对a</p>
        </article>

    </section>
</article>

</body>
</html>

article与section元素都是html5新增的元素，他们的功能与div类似，都是用来区分不同区域，他们的使用方法也相似，（注意别混用）。

article元素代表文档、页面或者应用程序中独立完整的可以被外部饮用的内容。例如，博客中的一篇文章，论坛中的一个帖子或者一段评论等。因为article元素是一段独立的内容，所以article元素通常包含头部（header元素）和底部元素（footer元素）
section元素用于对网站或者应用程序中页面上的内容进行分块。一个section元素通常由内容以及标题组成。

section元素需要包含一个<hn>标题元素，一般不包含头部（header元素）或者底部元素（footer元素）。通常section为那些有标题的内容进行分段。
section元素的作用是对页面上的内容进行分块处理，如对文章分段等，相邻的section元素的内容应该是相关的，而不是像article那样独立。
事实上，article元素可以看成是特殊的section元素。article元素更加强调独立性、完整性，section更强调相关性。
在使用section元素时应该注意以下几个问题：
1、不要将section元素当作设置样式的页面容器，对于此类操作应该使用div元素实现。
2、如果article元素、aside元素或者nav元素更符合使用条件，不要使用section元素。
3、不要为没有标题的内容区块使用section元素。

通常不推荐为那些没有标题的内容使用section元素，可以使用html轮廓工具来检查页面中是否有没标题的section，如果发现某个section的说明中有“untitiled section”的话，说明这个section有可能使用不当，但是nav和aside元素没有标题是合理的。

artice与section的区别的更多相关文章

  1. HTML5中的article和section的区别

    HTML5中的article和section的区别 一.总结 一句话总结: article和section都相当于语义化后的div,article强调独立性,section强调分段或者分块 1.art ...

  2. HTML5的article和section的区别

    内容区块是指将HTML页面按逻辑分割后的单位.对于页面网站来说,导航菜单.文章正文.文章的评论等每一个部分都可称为内容区块.      article元素      article元素代表文档.页面或 ...

  3. HTML5中div，article，section的区别

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

  4. 兼容性问题（ css）

    记录平时遇见的兼容性问题,有更好的解决办法希望各位提出,会持续更新 提出时间 问题描述 解决方案 2014/7/15 table下面使用img或者其他元素例如embed会产生,对应的空隙,假如使用文字 ...

  5. [html]关于html标签的一些总结

    以下内容纯属个人对项目细节的总结,因为只是为了自己回顾方便,所以比较杂乱. 1.img 如果不指定img的高度和宽度,则img显示的是原图片的大小:如果只指定了高度和宽度中的一者,则为指定的一者等比例 ...

  6. HTML5新增常用属性

    一. 代码名称语义化的好处 1.能让搜索引擎更好的收录 2.对于特殊设备如盲人设备好解析 二.article和section的区别 article(文章):独立且能被外部引用 section(章节.段 ...

  7. [Laravel] 04 - Blade templates

    前言 一.大纲 From: https://www.imooc.com/video/12509 Blade视图页面 --> 编译 --> 原生PHP --> 并缓存起来. 既然是个模 ...

  8. h5内容初探

    h5简介: h5新特性 h5新增标签 article  和  section 的区别相当于 div  和  p标签的区别 1—6都是块级元素 h5新增属性 拖放 拖动事件 <style> ...

  9. HTML5区块和大纲算法

    原文链接: Using HTML sections and outlines - Mozilla Developer Network 每集HTML5+CSS3网页布局教程-2大纲算法 HTML5标准带 ...

随机推荐

  1. 射频识别技术漫谈(11)——Mifare系列卡的共性【worldsing笔记】

    Mifare是NXP公司生产的一系列遵守ISO14443A标准的射频卡,包Mifare S50.Mifare S70.Mifare UltraLight.Mifare Pro.Mifare Desfi ...

  2. SQL提高查询效益之in、not in、between、like等条件讲述

    在使用SQL语句查询数据库记录时,如果要查询相同的内容,有着不同的多种方法. 仍然,尽管使用多种方法可以得到相同的结果,但是,如果您使用不同的方法,在执行效益上是截然不同的.因此,我们得仔细考虑,如果 ...

  3. unable to load default svn client myeclipse SVN安装,wen7 64位安装SVN

    在安装完后连接svn时出现unable to load default svn client的错误提示,百度知道是版本不对,我安装的是1.8的版本,插件按成1.6的了,只需下载1.8插件安装就行了 安 ...

  4. 【STL源码学习】STL算法学习之一

    第一章:引子 STL包含的算法头文件有三个:<algorithm><numeric><functional>,其中最大最常用的是<algorithm>, ...

  5. ZZTHX-线程锁

    以前一直在做卡乐付,悲剧的是项目中的余额查询,超级转账和刷卡器相关的东西已经开发好了,我对这块还是比较好奇和感兴趣的,在项目空闲的时候我就开始尝试熟悉和了解这块的业务和代码.实践出真理,只有在实践中才 ...

  6. cocos2d-x 获取图片的某像素点的RGBA颜色

    转自:http://www.cnblogs.com/jaoye/archive/2013/02/19/2916501.html ccColor4B c = {, , , }; CCPoint pt = ...

  7. 应用之星推出“图文app”制作工具，并附上教程

    应用之星已推出的"图文"app制作工具,是高速制作图文电子书,图文杂志等一切有关图文资料的app生成工具,以下跟大家介绍"图文"制作教程,简单快捷,大致分三大步 ...

  8. Android设备上i-jetty环境的搭建-手机上的web服务器

    本文主要跟大家分享如何将一台Android设备打造成一个web服务器使用. 编译i-jetty 1.将源码download下来,http://code.google.com/p/i-jetty/dow ...

  9. win8如何删除未知账户(s-1-5-21-2000478354-1390067357-725345543-1003）

    今天突然发现从别处复制来的游戏压缩文件不能解压,并且以前把游戏文件都是放在该目录下的,以前局域网玩起游戏来老是不能作为主机,且不能下载局域网玩的RPG地图,以前就注意过这个未知账户(s-1-5-21- ...

  10. C_数据结构_链表的链式实现

    传统的链表不能实现数据和链表的分离,一旦数据改变则链表就不能用了,就要重新开发. 如上说示:外层是Teacher,里面小的是node. #ifndef _MYLINKLIST_H_ #define _ ...