section元素是对网站或应用程序中页面上的内容进行分块,一个section元素通常有标题和内容组成。但section元素并非一个普通的容器元素,当一个容器需要直接定义样式或通过脚本定义行为时,推荐使用div元素而非section元素。我们可以这样理解:section元素中的内容可以直单独存储到数据库中或输出到word文档中。

section元素的作用是对页面上的内容进行分块,或者对文章进行分段,不要将它与表示着"有着自己的完整的、独立的内容"的article元素混淆。

下面是一个带有section元素的article元素的代码事例:

<article>
<h1>标题</h1>
<p>苹果,植物类水果</p>
<section>
<h2>红富士</h2>
<p>红富士是从普通富士的芽变中选育出的</p>
</section>
<section>
<h2>国光</h2>
<p>国光苹果品,又名小国光、万寿。</p>
</section>
</article>

上面的代码首先是一段独立的、完整的内容,因此使用article元素。每一段都有一个标题,因此使用了两个section元素,但有人会问,为什么第一段没有使用section呢,其实这里是可以使用section元素的,但是由于这里的结构比较清晰,分析器是可以识别第一段内容是在section元素里的,所以可以将第一个section元素省略。但如果第一个section元素里要包含子section元素或子article元素,那么必须写明第一个section元素。

接下来看一个包含section和article元素的section代码事例:

<section>
<h1>水果</h1>
<article>
<h2>苹果</h2>
<p>苹果,植物类水果,多次花果</p>
</article>
<article>
<h2>橘子</h2>
<p>橘子,是芸香科柑橘属的一种水果。。。</p>
</article>
</section>

这个事例比前一个事例复杂了一些,首先他是文章的一段,因此没有使用article元素,但是在这一段中,每一段都是独立的内容,所以使用article元素。article元素可以看成一种特殊种类的section元素,他比section元素更强调内容的独立性。如果将一块内容分成几段的时候用section元素。

section元素与div、article元素的区别的更多相关文章

  1. 八(第一篇)、主体结构元素——article元素、section元素

    article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容. 他可以是一篇博客或者报刊中的文章,一篇轮胎帖子.一段用户评论或独立的插件,或其他任何独立的插 ...

  2. 详解HTML5中的<aside>元素与<article>元素

    <aside>元素HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在.<aside>元素通常显示成 ...

  3. HTML5之新增的元素和废除的元素 (声明:内容节选自《HTML 5从入门到精通》)

    新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. ...

  4. article元素以及section

    <p>发表日期:<time pubdate="pubdate">2015/10/30</time></p> article元素有自己 ...

  5. (转) html块级元素和内联元素区别详解

    http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...

  6. HTML中行内元素与块级元素的区别:

    HTML中行内元素与块级元素的区别:在标准文档流里面,块级元素具有以下特点: ①总是在新行上开始,占据一整行:②高度,行高以及外边距和内边距都可控制:③宽带始终是与浏览器宽度一样,与内容无关:④它可以 ...

  7. 块级元素和内联元素的区别(HTML)

    请把下面二行代码放进body标签里:     <div style=”border: 1px solid red;”>div1</div>     <div style= ...

  8. article元素设计网络新闻展示

    article元素用来表示文档.页面中独立的.完整的.可以独自被外部引用的内容.它可以是一篇文章博客或者报刊中的文章.一篇论坛帖子.一段用户评论或独立的插件等.除了内容部分,一个article元素通常 ...

  9. CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

随机推荐

  1. Shell脚本编程入门(一)

    最近在学shell,记录一下. if语句的使用: 1.判断两个参数大小 #!/bin/sh #a test about if statement a=10 b=20 if [ $a -eq $b ]; ...

  2. ajax核心技术1---XMLHttpRequset对象的使用

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX = 异步 Ja ...

  3. JUI/DWZ介绍、简单使用

    简介 由于开发的项目使用JUI,所以学习了. DWZ富客户端框架(jQuery RIAframework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.(现在更名为JUI) 可 ...

  4. UNIX网络编程——TCP输出,UDP输出

    TCP输出 每一个TCP套接字有一个发送缓冲区,我们可以使用SO_SNDBUF套接字选项来更改该缓冲区的大小.当某个应用进程调用write时,内核从该应用进程的缓冲区中复制所有数据到(或是应用程序的缓 ...

  5. 【Vbox】centos虚拟机安装usb网卡驱动

    前面安装增强pack之后 usb设备是可以识别了,但是无法正常使用,应该是无线网卡驱动没有的原因. 查看usb设备 os:centos6.6 内核:2.6.32-504.el6.x86_64 [roo ...

  6. Andriod的国际化-android学习之旅(五十八)

    android资源国际化

  7. SWING中文件的上传

    <pre name="code" class="java">import java.io.File; import java.io.FileInpu ...

  8. Android用AlarmManager实现后台任务-android学习之旅(63)

    因为Timer不能唤醒cpu,所以会在省电的原因下失效,所以需要唤醒cpu在后台稳定化的执行任务,AlarmManager能够唤醒cpu 这个例子讲解了如何通过Service来在后他每一个小时执行.特 ...

  9. 【一天一道LeetCode】#90. Subsets II

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  10. ROS_Kinetic_08 ROS的集成开发环境(IDEs)之使用Eclipse

    ROS_Kinetic_08 ROS的集成开发环境(IDEs)之使用Eclipse ROS支持的IDEs比较丰富,这里以Eclipse为例介绍一下. 具体内容参考:http://wiki.ros.or ...