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. maven springmvc-hibernate搭建以及源码下载

    见:https://blog.csdn.net/fengshizty/article/details/43635305 下载源码参见:http://www.cnblogs.com/ljy2013/p/ ...

  2. Python例子二

    例1.构造函数 #-*-coding:utf--*- import sys class Student: def __init__(self,name,age): self.__name=name s ...

  3. Leetcode Array 15 3sum

      思考的方向不对,即使用了多于别人几倍的时间,也不一定能够达到终点. 我的错误的想法(可以跳过):在leetcode上面做的第四道题,走路一个很大的弯路,收到之前做过的 Container With ...

  4. uint8_t / uint16_t / uint32_t /uint64_t 是什么数据类型 - 大总结

    uint8_t / uint16_t / uint32_t /uint64_t  是什么数据类型 在nesc的代码中,你会看到非常多你不认识的数据类型,比方uint8_t等.咋一看.好像是个新的数据类 ...

  5. Chrome禁用NPAPI插件(包含 Silverlight、Java 和 Unity)

    过去,很多插件都是使用一种称为NPAPI 的旧系统开发的. 现在,仅仅有少量站点在使用NPAPI 插件,由于这些插件有时会给站点带来安全风险. 为了让用户获得更安全.更高速且更稳定的 Chrome 浏 ...

  6. 淘宝数据库OceanBase SQL编译器部分 源代码阅读--解析SQL语法树

    OceanBase是阿里巴巴集团自主研发的可扩展的关系型数据库,实现了跨行跨表的事务,支持数千亿条记录.数百TB数据上的SQL操作. 在阿里巴巴集团下,OceanBase数据库支持了多个重要业务的数据 ...

  7. ReactiveCocoa入门教程——第一部分【转载】

    作为一个iOS开发者,你写的每一行代码几乎都是在响应某个事件,例如按钮的点击,收到网络消息,属性的变化(通过KVO)或者用户位置的变化(通过CoreLocation).但是这些事件都用不同的方式来处理 ...

  8. php开启pathinfo 模式

    pathinfo 模式 需要 php.ini 开启下面这个参数 cgi.fix_pathinfo=1 path_info模式:http://www.xxx.com/index.php/模块/方法   ...

  9. LeetCode222——Count Complete Tree Nodes

    Given a complete binary tree, count the number of nodes. Definition of a complete binary tree from W ...

  10. convert from EST/EDT to GMT

    TimeZoneInfo est = TimeZoneInfo.FindSystemTimeZoneById("Eastern Standard Time"); DateTime ...