html5--2.4新的布局元素(3)-section

学习要点

  1. 了解section元素的语义和用法
  2. 通过实例理解section元素的用法
  3. article元素和section元素的区别和共同点
    1. article元素(标签)
      • 用于定义一个独立的内容区块,比如一篇文章,一篇博客,一个帖子,论坛的一段用户评论,一篇新闻消息等.
      • article元素内可以嵌套其他元素,它可以有自己的头、尾、主体等内容。使用时要特别注意内容的独立性,一般对于独立完整的内容才使用article元素,如果只是一段内容的话应该使用section元素。
    1. section元素(标签)
      • 用来定义文章中的章节(通常应该有标题和段落内容)
      • 用来定义文档中特定内容的区块,可视为一个区域分组元素,用来给页面上的内容分块。
      • section元素可以定义文档的主体内容
      • 用一句话来概括它的作用就是给内容分段,给页面分区
      • 注意他与div的区别,div强调在形式上的独立性section强调的是内容上的独立性,注意它的语义
    1. article元素和section元素的区别

语义不同

      • article元素更强调内容的独立性(比如说一篇文章)
      • section元素更强调内容的关联性(比如说两个段落,是相似的)
      • article元素是独立完整的内容,section元素页面内容分块

相同点

    • 本质上都是带有语义的div块元素
    • 分别可以看作&ltdiv id="section"&gt和&ltdiv id="article"&gt

实例

用来定义文档中特定的区块

html5--2.4新的布局元素(3)-section的更多相关文章

  1. html5--2.9新的布局元素(6)-figure/figcaption

    html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...

  2. html5--2.9新的布局元素(5)-hgroup/address

    html5--2.9新的布局元素(5)-hgroup/address 学习要点 了解hgroup/address元素的语义和用法 通过实例理解hgroup/address元素的用法 对照新元素布局与d ...

  3. html5--2.7新的布局元素(4)-time

    html5--2.7新的布局元素(4)-time 学习要点 了解微格式的概念 掌握time元素的用法 微格式的概念 HTML5中的微格式,是一种利用HTML5中的新标签对网页添加附加信息的方法,附加信 ...

  4. html5--2.1新的布局元素概述

    html5--2.1新的布局元素概述 学习要点 了解HTML5新标签(元素)的优点 了解本章要学习的新的布局元素 了解本章课程的安排 HTML5新标签的优点: 更注重于内容而不是形式 对人的友好:更加 ...

  5. html5--2.6新的布局元素(5)-nav

    html5--2.6新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素 aside元素通常用来设置侧边栏 ...

  6. html5--2.5新的布局元素(4)-aside/nav

    html5--2.5新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素(附属信息) aside元素通常用 ...

  7. html5--2.3新的布局元素(2)-article

    html5--2.3新的布局元素(2)-article 学习要点 了解article元素的语义和用法 完成一个简单的实例 article元素(标签) 用于定义一个独立的内容区块,比如一篇文章,一篇博客 ...

  8. html5--2.1新的布局元素(1)-header/footer

    html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...

  9. HTML5中支持新的媒体元素有这些

    HTML5对媒体的支持性很强,支持以下媒体元素: · audio  定义音频 · video  定义视频 · embed  作为外部应用的容器 · source  多种媒体源的支持 · track   ...

随机推荐

  1. 怎样使用 iOS 7 的 AVSpeechSynthesizer 制作有声书(3)

    plist 中的每一页 utteranceSting 我们都创建了一个RWTPage.displayText.因此,每页的文本会一次性地显示出来. 由于 You've constructedeach ...

  2. VELT-0.1.5开发:在VS2013下进行python开发

    快乐虾 http://blog.csdn.net/lights_joy/(QQ群:Visual EmbedLinux Tools 375515651) 欢迎转载,但请保留作者信息 本文仅适用于vs20 ...

  3. fiddler不能监听 localhost和 127.0.0.1的问题 .

    localhost/127.0.0.1的请求不会通过任何代理发送,fiddler也就无法截获. 解决方案 用 http://localhost. (locahost紧跟一个点号) 用 http://1 ...

  4. [BLE--Link Layer]物理信道

    简述 有线通信,是用电缆直接连接.然后分距离的长短.有些会须要载入波,信号也可能会经过不同的调制方式调制. 无线通信也是一样,仅仅是信号的传输是通过射频了,通过在某一频段.对无线信道进行调制,将数据发 ...

  5. fabric使用实例(发布web包的一个例子)

    #!/usr/bin/env python # -*- coding: utf-8 -* #添加中文注释的编码 #fabfile.py from fabric.api import * env.use ...

  6. Nginx在windows2003下的使用 PHP

    nginx真正能够发挥其良好的负载能力的,是在linux下. 我们在windows下搭建好环境,测试开发使用.强烈建议在linux下开发的. ---- 下载nginx 访问www.nginx.org, ...

  7. Redis学习手册(List数据类型)(转)

    一.概述: 在Redis中,List类型是按照插入顺序排序的字符串链表.和数据结构中的普通链表一样,我们可以在其头部(left)和尾部(right)添加新的 元素.在插入时,如果该键并不存在,Redi ...

  8. android开发系列之ContentObserver

    在这篇博客里面我想要分享一下自己最近在项目里面遇到一个比较好的数据同步解决方案,首先让我们先来看看该方案的应用场景:我们在客户端本地利用数据库缓存了一些数据,当我们检测到数据库里面的数据发生变化的时候 ...

  9. Bootstrap学习速查表(一) 理论基础

    参考网站http://www.bootcss.com/ 第一步,起步,引入基本样式 <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="st ...

  10. 开源大数据引擎:Greenplum 数据库架构分析

    Greenplum 数据库是最先进的分布式开源数据库技术,主要用来处理大规模的数据分析任务,包括数据仓库.商务智能(OLAP)和数据挖掘等.自2015年10月正式开源以来,受到国内外业内人士的广泛关注 ...