转自　　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. ORA-00257:archiver error问题处理方法

    原文链接:http://www.7747.net/database/201109/104615.html ORA-00257: archiver error. Connect internal onl ...

  2. 记一个神奇的WAS问题：sibuswsgw-sibuswsgw_console.jar invalid LOC header (bad signature) 分类： WebSphere 2015-08-06 23:21 9人阅读 评论(0) 收藏

    今天晚上,出现了一个神奇的WAS问题,详细问题异常信息如下: [15-8-6 22:13:29:146 CST] 00000013 ApplicationMg A WSVR0203I: 应用程序:is ...

  3. 纯CSS3冒泡动画按钮实现教程

    这款CSS3动画按钮非常的有创意,鼠标在滑过按钮时并不像其他按钮那样仅仅改变按钮的背景颜色,而是出现很酷的冒泡动画.这么惊艳的CSS3动画按钮,这篇文章主要将按钮实现的过程和代码分享给大家,希望能给在 ...

  4. Solr7.4.0的API（Solrj）操作及项目中的使用

    一.SolrJ的概念 solr单机版服务搭建:https://www.cnblogs.com/frankdeng/p/9615253.html solr集群版服务搭建:https://www.cnbl ...

  5. 智能文件选择列表—— bat 批处理

    智能文件选择列表 *.wim @echo off setlocal enabledelayedexpansion title 智能文件选择列表 pushd %~dp0 & cd /d %~dp ...

  6. 数据库系统Informix为例，介绍改善用户查询计划的方法。

    数据库系统Informix为例,介绍改善用户查询计划的方法. 1．合理使用索引 索引是数据库中重要的数据结构,它的根本目的就是为了提高查询效率.现在大多数的数据库产品都采用IBM最先提出的ISAM索引 ...

  7. 企业级iptables防火墙实战

    iptables生产中在内网一般是关闭的,外围需要开启 大并发情况下,不能开启iptables,会影响性能,使用硬件外网防火墙 学好iptables的基础 1,OSI7层模型以及不同层对应哪些协议 2 ...

  8. db2 查询表前几行

    不需要那么多不需要那么多数据的时候使用fetch first xxx rows only数据的时候使用fetch first xxx rows only

  9. [No0000179]改善C#程序的建议2：C#中dynamic的正确用法

    dynamic是FrameWork4.0的新特性.dynamic的出现让C#具有了弱语言类型的特性.编译器在编译的时候不再对类型进行检查,编译期默认dynamic对象支持你想要的任何特性.比如,即使你 ...

  10. [No0000B0]ReSharper操作指南1/16-入门与简介

    安装指南 在安装之前,您可能需要检查系统要求. ReSharper是一个VisualStudio扩展.它支持VisualStudio2010,2012,2013,2015和2017.安装完成后,您将在 ...