HTML5布局元素

学习要点

1. 了解HTML5新标签（元素）的优点
2. 了解本章要学习的新的布局元素
3. 了解本章课程的安排

HTML5新标签的优点：

1. 更注重于内容而不是形式
2. 对人的友好：更加的语义化，高度的描述性，更加的直观，增加了代码的可读性。
3. 对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档的内容
4. 代码更加的简洁

---

本章将要讲解的新标签概览

新增的布局标签

新增的布局标签可以概括为两类：用于控制页面主体内容的标签，可以划分为主体结构标签；非主体结构标签，用来放置辅助主体内容的信息。
本套课程将按照页面的布局流程来讲解这些新标签，对于分类大家简单了解下就可以，主要还是能够掌握每个标签的用法。

1. article标签：定义一个独立内容区块：一篇文章、一个视频文件等
2. cection标签：定义一个区域，如文章的章节等
3. nav标签：定义目录导航
4. aside标签：定义侧边栏
5. figure/figcaption标签：定义一组媒体内容以及它们的标题
6. header/footer标签：定义一个头部/底部
7. hgroup标签：标题分组
8. address标签：地址、联系信息等

本章课程安排

1. 对新增的标签逐个进行详细的讲解
   
2. 对比table和div+css布局，体验新布局的优点
   
3. 通过综合实例，加深对新布局和新标签的理解

学习要点

1. 了解header/footer的语义和用法
2. 使用header/footer进行一个简单的布局

1. header元素（标签）
   • 用于设置一个页面的标题部分，通常会包含标题，LOGO，导航等
   • 通常会放在文章的头部
2. footer元素（标签）
   • 通常用于设置一个网页的底部区域，会包含友情链接，版权声明，文件建立日期，联系方式等
   • 通常会放在页面的页脚

1. 了解section元素的语义和用法
2. 通过实例理解section元素的用法
3. article元素和section元素的区别和共同点

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

   • 
     

   • 学习要点

     1. 了解aside/nav元素的语义和用法
     2. 通过实例理解aside/nav元素的用法
     1. aside元素
        • aside元素通常用来设置侧边栏。
        • 用于定义article元素之外的内容，前提是这些内容与article元素内的内容相关。
        • 同时也可嵌套在article元素内部使用，作为主要内容的附属信息，比如与主内容有关的参考资料，名词解释等。
        
        
     2. nav元素
        • 用来定义目录、导航栏、超链接
        • 并非所有的超链接都放在nav元素中，通常只把一个文档中的主导航栏放在nav中
        • 在文章页面中，nav还可以用来给一个文字做一个目录的超链接

学习要点

1. 了解aside/nav元素的语义和用法
2. 通过实例理解aside/nav元素的用法

1. aside元素
   • aside元素通常用来设置侧边栏。
   • 用于定义article元素之外的内容，前提是这些内容与article元素内的内容相关。
   • 同时也可嵌套在article元素内部使用，作为主要内容的附属信息，比如与主内容有关的参考资料，名词解释等。
   
   
2. nav元素
   • 通常用它给超链接分组用来定义导航栏，包括主导航栏，和侧边导航栏
   • 并非所有的超链接都放在nav元素中，通常只把一个文档中的主导航栏放在nav中
   • 在文章页面中，nav还可以用来给一个文章做一个目录的超链接

学习要点

1. 了解微格式的概念
2. 掌握time元素的用法

1. 微格式的概念
   • HTML5中的微格式，是一种利用HTML5中的新标签对网页添加附加信息的方法，附加信息例如新闻事件发生的日期和时间，文章发表的日期等。
   • HTML5中的微格式是为了简化浏览器对数据的提取，方便搜索引擎的搜索.
   
   
2. time元素
   • time是HTML5新增的元素
   • time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。它可以定义很多格式的日期和时间
   • datetime属性中日期与时间之间要用"T"文字分隔，"T"表示时间。请注意倒数第二行，时间加上Z文字表示给机器编码时使用UTC标准时间，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加时差。
   • pubdate属性是个可选标签，加上它搜索引擎/浏览器就可以很方便的识别出那个日期是文章、新闻的发表日期。
   
   
3. time元素示例
   • <time datetime="2015-10-22">2015年10月12日</time>
   • <time datetime="2015-10-22T20:00">2015年10月12日晚上8点</time>
   • <time datetime="2015-10-22T20:00Z">2015年10月12日晚上8点</time>
   • <time datetime="2015-10-22T20:00+09:00">美国时间2015年10月12日8点</time>

学习要点

1. 了解hgroup/address元素的语义和用法
2. 通过实例理解hgroup/address元素的用法
3. 对照新元素布局与div布局，理解新元素布局的优点

1. hgroup元素
   • 通常用来给标题分组，通常放在header中；但是并非强制要求，也不是绝对的。
   
   
2. address元素
   • 通常用用来说明作者的联系信息，例如名字，E-mail，电话，地址等
   • address元素中的内容会以斜体显示。
   
   
3. 新布局的优点
   1. 更注重于内容而不是形式
   2. 对人的友好：更加的语义化，高度的描述性，更加的直观，增加了代码的可读性。
   3. 对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档的内容
   4. 代码更加的简洁

学习要点

1. 通过一个简单的移动手机页面，复习学过的内容
2. 手机网页的测试
3. 手机布局的屏幕设定

• 手机网页的测试方法
  1. 直接在手机上测试，比较麻烦，效果好
  2. 电脑上下载手机模拟器
  3. 利用浏览器自带的功能

• name="viewport"：屏幕设定
• maximum-scale=1.0,minimum-scale=1.0；initial-scale=1.0:最大最小缩放比例为1：其实就是不允许点击缩放
• user-scalable=0,width=device-width:设定内容和设备的屏幕等宽，等高

学习要点

• 完成综合实例2的页面框架

本节课涉及到的知识点

• 本节课要用到的元素：header/footer/section/aside
  
• 本节课要用到的样式：width/height/backgroud
  
• 本节课还要用到后边CSS章节会详细讲解的几个知识点，对这些只要求了解,后边会有专门章节从头仔细讲，这里为了演示提取使用
  
  • 浮动：float: left 暂时可以简单理解为它的作用就是可以让块元素不换行，而是从左向右排列
    
  • margin: 0暂时只需知道它可以设置外边距，可以去掉body和内容的白边即可。
  • 
    
  • 
    
  • 
    
  • 
    
  • 学习要点
  • • 给section中添加内容

    本节课涉及到的知识点

    • 本节课要用到的元素：figure/figcaption
      
    • 本节课要用到的样式：width/height
      
    • 本节课还要用到后边CSS章节会详细讲解的几个知识点，对这些只要求了解,后边会有专门章节从头仔细讲，这里为了演示提取使用
      
      • margin: 0 暂时只需知道它可以设置外边距，可以去掉body和内容的白边即可。
        
      • overflow: auto 内容超出父元素容器后自动加滚动条
        

学习要点

• 给header和aside中添加内容

本节课涉及到的知识点

• 本节课要用到的元素：header/aside/hgroup
  
• 本节课要用到的样式：width/max-with
  
• 本节课还要用到后边CSS章节会详细讲解的几个知识点，对这些只要求了解,后边会有专门章节从头仔细讲，这里为了演示提取使用
  
  • text-decoration: none 给a标签去掉下划线，仅作了解

学习要点

• 给footer中添加内容

本节课涉及到的知识点

• 本节课要用到的元素：nav
  
• 本节课还要用到后边CSS章节会详细讲解的几个知识点，对这些只要求了解,后边会有专门章节从头仔细讲，这里为了演示提取使用
  
  • text-decoration: none 给a标签去掉下划线，仅作了解