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. shell程序

    例一:helloworld #!/bin/sh -x message="hello" read name echo "$message ,$name" 例二:选 ...

  2. Reverse Linked List II -- 翻转部分链表

    Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given1->2 ...

  3. 对datatable进行linq过滤

    实例: DataTable data = new DataTable(); data.Columns.Add("schoolid", Type.GetType("Syst ...

  4. svn自动部署

    版本库目录hooks下创建post-commit.bat TortoiseProc.exe /command:update /path:"E:\web_server\sial\" ...

  5. dede频道标签channel和频道内容标签channelartlist的调用栏目名的不同方式,如果错误使用标签会发生错误

    频道标签 [field:typename/] 频道内容标签 {dede:field name='typename'/}

  6. Oracle SQL 查询优化.Part4

    一.插入 insert 操作: 1. 复制表结构但不新增数据: -- 复制表结构但不插入数据 create table emp_new as select * from emp where 1 = 2 ...

  7. Fragment 懒加载

    我们在遇到Activity嵌套Fragment的时候经常会遇到多个Fragment页面同时加载数据,一开始的时候就初始化很多页面,有的甚至进入页面的时候,会造成缓慢的现象,下面我们就针对这个问题做一下 ...

  8. ScrollView分析

    本文转载至 http://blog.sina.com.cn/s/blog_a843a8850101dsg5.html   Properties alwaysBounceHorizontal       ...

  9. Docker基础原理

    前言 Docker是一个开源的软件项目,让用户程序部署在一个相对隔离的环境运行,借此在Linux操作系统上提供一层额外的抽象,以及操作系统层虚拟化的自动管理机制.需要额外指出的是,Docker并不等于 ...

  10. 兔子的晚会 2016Vijos省选集训 day1

    兔子的晚会 (xor.c/pas/cpp)============================= 很久很久之前,兔子王国里居住着一群兔子.每到新年,兔子国王和他的守卫总是去现场参加晚会来欢庆新年. ...