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

学习要点

  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标签：地址、联系信息等

本章课程安排

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

html5--2.1新的布局元素概述的更多相关文章

  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.6新的布局元素(5)-nav

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

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

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

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

    html5--2.4新的布局元素(3)-section 学习要点 了解section元素的语义和用法 通过实例理解section元素的用法 article元素和section元素的区别和共同点 art ...

  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. iptables和DNS

    1.iptables防火墙 表→链→规则 filter表 数据过滤表 NAT表---内网和外网的地址转换 Mangle-----数据流量,通过防火墙设置流量.特殊数据包标记.太复杂,一般不用.限速工具 ...

  2. OpenCV生成点集的Delaunay剖分和Voronoi图

    实现内容: 设置一副图像大小为600*600.图像像素值全为0,为黑色. 在图像中Rect(100,100,400,400)的区域随机产生20个点.并画出. 产生这些点集的Delaunay剖分和Vor ...

  3. poj 2479 Maximum sum(递推)

     题意:给定n个数,求两段连续不重叠子段的最大和. 思路非常easy.把原串划为两段.求两段的连续最大子串和之和,这里要先预处理一下,用lmax数组表示1到i的最大连续子串和,用rmax数组表示n ...

  4. js执行顺序总结

    参考博文:http://www.2cto.com/kf/201401/273825.html http://www.jb51.net/article/44123.htm http://zhidao.b ...

  5. BZOJ 1293 SCOI2009 生日礼物 堆

    题目大意:给定一个数轴上n个点,每一个点有一种颜色,一共k种颜色.求一个最短的区间,包括全部k种颜色 卡了一段时间0.0 一開始想二分答案啥的 后来发现数据范围太大写不了0.0 后来去找题解才发现尼玛 ...

  6. HDU 2242 考研路茫茫——空调教室(边双连通）

    HDU 2242 考研路茫茫--空调教室 题目链接 思路:求边双连通分量.然后进行缩点,点权为双连通分支的点权之和,缩点完变成一棵树,然后在树上dfs一遍就能得出答案 代码: #include < ...

  7. _DataStructure_C_Impl:Floyd算法求有向网N的各顶点v和w之间的最短路径

    #include<stdio.h> #include<stdlib.h> #include<string.h> typedef char VertexType[4] ...

  8. 【WPF学习笔记】之如何传递第一个登录界面的值到下一个页面显示：动画系列之（三）

    ... ... 承接系列(二) 在之前的登录后台已设置发送到主界面: 在主界面接收传递的值: using System; using System.Collections.Generic; using ...

  9. 线程池 API （转）

    文档原始地址    目录 线程池概述 线程池对象 回调环境对象 工作对象 等待对象 计时器对象 I/O 完成对象 使用清理组简化清理 回调实例 API    随着 Windows Vista® 的发布 ...

  10. Objective-C 内存管理之dealloc方法中变量释放处理

    本文转载至 http://blog.sina.com.cn/s/blog_a843a8850101ds8j.html   (一).关于nil http://cocoadevcentral.com/d/ ...