HTML5布局元素

最新推荐文章于 2024-09-13 17:50:56 发布

joyce_wu66

最新推荐文章于 2024-09-13 17:50:56 发布

阅读量2.9k

点赞数 1

学习要点

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

HTML5新标签的优点：

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

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

新增的布局标签

新增的布局标签可以概括为两类：用于控制页面主体内容的标签，可以划分为主体结构标签；非主体结构标签，用来放置辅助主体内容的信息。
本套课程将按照页面的布局流程来讲解这些新标签，对于分类大家简单了解下就可以，主要还是能够掌握每个标签的用法。
article标签：定义一个独立内容区块：一篇文章、一个视频文件等
cection标签：定义一个区域，如文章的章节等
nav标签：定义目录导航
aside标签：定义侧边栏
figure/figcaption标签：定义一组媒体内容以及它们的标题
header/footer标签：定义一个头部/底部
hgroup标签：标题分组
address标签：地址、联系信息等

本章课程安排

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

学习要点

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

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

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

article元素（标签）
- 用于定义一个独立的内容区块，比如一篇文章，一篇博客，一个帖子，论坛的一段用户评论，一篇新闻消息等.
- article元素内可以嵌套其他元素，它可以有自己的头、尾、主体等内容。使用时要特别注意内容的独立性，一般对于独立完整的内容才使用article元素，如果只是一段内容的话应该使用section元素。
section元素（标签）
- 用来定义文章中的章节(通常应该有标题和段落内容)
- 用来定义文档中特定内容的区块，可视为一个区域分组元素，用来给页面上的内容分块。
- section元素可以定义文档的主体内容。
- 用一句话来概括它的作用就是给内容分段，给页面分区
- 注意他与div的区别，div强调在形式上的独立性，section强调的是内容上的独立性，注意它的语义。
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还可以用来给一个文字做一个目录的超链接

学习要点

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

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

学习要点

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

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

学习要点

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

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

学习要点

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

手机网页的测试方法
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标签去掉下划线，仅作了解