[html5]HTML5中<section>和<article>的区别
一、section元素
从字面理解就是区块、部分的意思,相对于article元素更加广泛,每个区块都可以使用,比如页面里的导航菜单、文章正文、文章的评论等。
1、section元素用于对网站或应用程序中页面上的内容进行分块,section元素的作用是对页面上的内容进行分块,或者说对文章进行分段,;
2、一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题的内容使用section元素,
3、section元素并非一个普通的容器元素;当一个内容需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素;
4、如果article、nav、aside元素都符合某条件,那么就不要用section元素定义;
5、section元素中的内容可以单独存储到数据库中或输出到word文档中。
二、article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里面),有时还有自己的脚注。
注:article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。例如,一篇博客文章中,针对该文章的评论就可以使用嵌套article元素的方式;用来呈现评论的article元素被包含在表示整体内容的article元素里面。
<html>
<head></head>
<body>
<article>
<header>
<h1>article元素使用方法</h1>
<p>发表日期:<time pubdate="pubdate">2017/2/9</time></p>
</header>
<p>此标签里显示的是article整个文章的主要内容,,下面的section元素里是对该文章的评论</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>发表者:Galin</h3>
<p>1小时前</p>
</header>
<p>这篇文章很不错啊,顶一下!</p>
</article>
<article>
<header>
<h3>发表者:木木</h3>
<p>1小时前</p>
</header>
<p>这篇文章很不错啊,对article解释的很详细</p>
</article>
</section>
</article>
</body>
</html>
转自:http://www.divcss5.com/html5/h18219.shtml
[html5]HTML5中<section>和<article>的区别的更多相关文章
- HTML中的div,section,article的区别
刚开始看到标签的就有些疑惑,觉得为什么有那么多相同用途的标签,多方查询资料细细比较之后才发现原来各有千秋,结合自己的想法总结如下: div在HTML早期版本就支持了,section和article是H ...
- ELF文件中section与segment的区别
http://blog.csdn.net/joker0910/article/details/7655606 1. ELF中的section主要提供给Linker使用, 而segment提供给Load ...
- HTML 5的革新——语义化标签section和article的区别
原文地址:https://stackoverflow.com/questions/33910294/what-is-the-difference-between-article-and-section ...
- HTML5 中 div section article 的区别
刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下. div HTML Spec: Th ...
- HTML5中div,article,section的区别
最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头 ...
- html5中section元素详解
html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...
- html-5 --html5教程article、footer、header、nav、section使用
header header元素是一种具有引导和导航作用的辅助元素.通常,header元素可以包含一个区块的标题(如h1至h6,或者hgroup元素标签),但也可以包含其他内容,例如数据表格.搜索表单或 ...
- WEB前端之HTML5~HTML5与HTML4的区别
推出的理由及目标 WEB浏览器存在的问题包括以下三点 世界知名浏览器厂商对HTML5的支持 语法的改变 DOCTYPE的声明 XHTML的DOCTYPE声明方式 HTML4的DOCTYPE声明方式 H ...
- HTML5 面试中最常问到的 10 个问题
1. HTML5 新的 DocType 和 Charset 是什么?HTML5 现在已经不是 SGML 的子集,DocType 简化为: <!doctype h ...
随机推荐
- 微信小程序 --- 页面渲染
page.wxml文件 <view>{{text}}</view> page.js 文件: //获取应用实例 const app = getApp() Page({ data: ...
- angularJS中的MVC思想?
mvc 思想: 将应用程序的组成,划分为三个部分:model , controller 和 view ; - 控制器的作用是用来初始化模型用的: - 模型就是用于存储数据的: - 视图是展示数据的: ...
- 最小树形图(poj3164)
Command Network Time Limit: 1000MS Memory Limit: 131072K Total Submissions: 12834 Accepted: 3718 ...
- 170616、解决 java.lang.IllegalArgumentException: No converter found for return value of type: class java.util.ArrayList
报错截图: 原因:搭建项目的时候,springmvc默认是没有对象转换成json的转换器的,需要手动添加jackson依赖. 解决步骤: 1.添加jackson依赖到pom.xml <!-- j ...
- spring boot实战(第一篇)第一个案例
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] spring boot实战(第一篇)第一个案例 前言 写在前面的话 一直想将spring boot相关内容写成一个系列的 ...
- PROPAGATION_REQUIRES_NEW VS PROPAGATION_NESTED
PROPAGATION_REQUIRES_NEW, in contrast to PROPAGATION_REQUIRED, uses a completely independent transac ...
- redhat 7.2 内网安装docker
本文介绍在内网环境下如果通过网络代理映射来完成docekr的安装,首先在能上网的windows机器上安装squid,并启动,本实例中windows机器IP为 192.168.192.101 ,squi ...
- qt——类大全
qt类总结地址 http://www.kuqin.com/qtdocument/ QWidget.QDialog及QMainWindow的区别 QWidget类是所有用户界面对象的基类. 窗口部件是用 ...
- sql用法
1: SELECT `SCHEMA_NAME` FROM `information_schema`.`SCHEMATA`; 查询sql中的数据库名 2: select * from for ...
- Saltstack入门
一.Salt概述 一个配置管理系统,能够维护预定义状态的远程节点(比如,确保指定的报被安装,指定的服务在运行). 一个分布式远程执行系统,用来在远程节点(可以是单个节点,也可以是任意规则挑选出来的节点 ...