转自　　http://www.studyofnet.com/news/331.html

本文导读：<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。section元素标签用来表现普通的文档内容或应用区块。一个section通常由内容及其标题组成，但section元素标签并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div元素而非section。

section 字面上理解为“块”，“部分”，section元素代表一个页面或一个内容块的部分，一般作为主题块列表，在html5网页中表现的意思跟字面理解差不多，即部分，块，模块，主要作用为对页面的内容进行分块或者对文章的内容进行分段。

section标签是成对出现的,以<section>开始,以</section>结束

section标签通常带有一个标题和一个内容块。

一、section标签实例

 <!doctype html>

 <article>

     <h1>Web编程语言比较</h1>

     <p>web编程语言常用的有asp,asp.net,php,jsp...</p>

     <section>

         <h2>asp</h2>

         <p>asp全称Active Server Page</p>

     </section>

     <section>

         <h2>asp.net</h2>

         <p>asp的颠覆版本</p>

     </section>

     <section>

         <h2>php</h2>

         <p>草根动态语言，免费，强大</p>

     </section>

 </article>

二、article与section的异同

section和article可以互相嵌套，也就是说他们没有上下级关系，section可以包含article，article也可以包含section。
感觉上使用都差不多，都可以有h1,h2,h3,都有一个主体，那应该怎么来区分它们的不同？其实很简单，只要从字面上理解它们就可以足够了：
1、article是文章，文章就是一段完整的独立的内容。
2、section就是块，某种意义上可以理解为div，但是比div的意思更加明确一点。

三、section和div的异同

1、section和div都可以对内容进行分块，但是section是进行有意义的分块，无意义的分块应该由div来做，例如用作设置样式的页面容器。
2、section内部必须有标题，标题也代表了section的意义所在。

四、使用<section>标签需要注意的地方

1、不要将<section>作为用来设置样式或行为的“钩子”容器，那是<div>的工作。
2、如果<article>、<aside>或<nav>更符合状况，不要使用<section>。
3、不要为没有标题的内容区块使用<section>。

h5 中的 section 标签的更多相关文章

  1. h5中的audio音频标签与对应的dom对象

    HTML5中提供了一个<audio>标签,同时也提供了一个Audio对象给JavaScript去操作,这个对象属于HTML的DOM对象. H5中的<audio>标签 此标签是H ...

  2. section标签实现文字滚动

    h5新增样式 section标签 使用demo //h5新增属性 h5新增滚动的标签 <marquee> <div style="padding-left: 20px;ma ...

  3. H5中的语义化标签

    H5中的语义化标签也就是之前的id = “header”演变而来的 只不过之前是id 现在变成了标签而已 什么是语义化: 根据内容结构化(内容语义化) 选择合适的标签(代码语义化) 便于开发者阅读和写 ...

  4. H5新增语义化标签

    一.根据页面的结构,由div派生的标签. <header> <footer> <nav> 导航 在H4中导航栏一般用ul-li标签,H5中可以直接用<nav& ...

  5. body标签中的相关标签

    一.内容概要 字体标签 h1~h6 <font> <u> <b> <strong> <em> <sup> <sub> ...

  6. <section> 标签

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

  7. 关于ueditor1.4.3版复制section标签丢失class和style样式问题

    在复制微信的文章格式到ueditor时发现section标签中的style和class属性丢失,严重影响美观. 原文格式,排版清晰段落分明赏心悦目: 复制到ueditor后的格式...这跟原文是没法比 ...

  8. HTML5 中 div section article 的区别

    刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下. div HTML Spec: Th ...

  9. HTML5 按字母顺序排列的标签列表 new : HTML5 中的新标签。

    标签 描述 <!--...--> 定义注释. <!DOCTYPE>  定义文档类型. <a> 定义超链接. <abbr> 定义缩写. <acron ...

随机推荐

  1. Spring 源码学习：day1

    前言: 最近也不知道该忙些什么样的事情.便随便看看源码算了. 正文: (1) 在网上下载 Spring 的源码: 可以采用 git 方式下载 https://github.com/spring-pro ...

  2. 图片相似原理--Java实现

    前阵子在阮一峰的博客上看到了这篇<相似图片搜索原理>博客,就有一种冲动要将这些原理实现出来了. Google "相似图片搜索":你可以用一张图片,搜索互联网上所有与它相 ...

  3. jenkins 启动slave时，找不到合适的java程序

    今天添加slave 又不成功,我用右键,发现随意点了java的那个打开,结果刚弹出来就关闭了窗口,显示未启动成功. 真是小白的想法,不过跟工具打交道久了,多少逻辑上想一下不对. 一定是用了不合适的程序 ...

  4. 织梦中在线显示pdf文件的方法

    如何在织梦中添加pdf文件并显示呢?下面这个教程将带领大家来操作.(注:手机版无法查看) 第一步:在系统-系统基本参数-附件设置中添加pdf格式 并且将大小调大 第二步:在核心-内容模型-普通文章中添 ...

  5. SSH框架下的表单重复提交

    前几天做了一个功能,是在某个操作后,刷新父页面的,刷新时弹出了下面图的框: 网上查了之后发现这个框是表单重复提交时出现的.分析后发现,这个页面的上一个动作是form submit(在ssh框架下),这 ...

  6. linux shutdown命令以及参数详解

    在说shutdown命令之前 先说一下sync命令: sync:将内存中尚未写入硬盘的数据写入硬盘 因为linux为了保证数据读写速度,把常用的数据放在内存中,不会立即写入硬盘,如果有不当关机,这些数 ...

  7. cc2650-cc2640蓝牙开发准备手记

    1.安装  ti关键库,首先BLE 协议栈,安装那种协议栈,首先你要用哪种库(源代码,官方例子基于哪种用哪个就会好,不然会出现不兼容), 2.然后安装flash_programmer2(有1,.2个版 ...

  8. CCPC-Wannafly Winter Camp Day3 Div1 - 精简改良 - [生成树][状压DP]

    题目链接:https://zhixincode.com/contest/14/problem/D?problem_id=206 样例输入 1  5 5 1 2 1 1 3 1 2 4 1 2 5 1 ...

  9. 存储json数据的编码问题

    在使用json.dumps时要注意一个问题   >>> import json >>> print json.dumps('中国') "\u4e2d\u5 ...

  10. dubbo-admin2.8.4部署

    1.环境准备 (1)操作系统:CentOS6.5 (2)安装JDK并且配置好环境变量,参考:http://blog.csdn.net/u013274055/article/details/739206 ...