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. JavaScript中推断一个对象是否为"空对象”

    JavaScript中推断一个对象是否为"空对象" 这里指的"空对象"是类似于:{ } 和 new Object() 这种. 详细的代码实现和原理例如以下: / ...

  2. 【C语言学习】封装和模块化思想

    刚学习完C后,做的关于C的课程设计是在一个源文件里放了几百行代码,并且各个功能之间都是相互依赖的,这样就会非常麻烦. 由于当我要改动某个地方的时候,就会牵连着要改动喝多的地方.而在实际的程序设计中.这 ...

  3. apue学习笔记（第十章 信号）

    本章先对信号机制进行综述,并说明每种信号的一般用法. 信号概念 每个信号都有一个名字,这些名字都以3个字符SIG开头.在头文件<signal.h>中,信号名都被定义为正整形常量. 在某个信 ...

  4. Spring技术笔记（一）

    一.控制反转(IoC)&依赖注入(DI) 1.控制反转: 所谓的控制反转就是应用本身不负责依赖对象的创建及维护, 依赖对象的创建及维护是由外部容器负责的. 这样控制权就由应用转移到了外部容器, ...

  5. 创建自己的taglib 并打包入jar

    1. Create a TLD (tag library descriptor) file namedmy-tags.tld. For more information, see Creating a ...

  6. 一、Silverlight中使用MVVM(一)——基础

    如果你不知道MVVM模式,我建议你先了解一下MVVM模式,至少要知道实现该模式的意图是什么. 那么我主要通过我认为是已经算是比较简单的例子进行讲解这个模式,当然后面我们会在这个例子的基础上一步一步的进 ...

  7. nginx - KeepAlive详细解释

    最近工作中遇到一个问题,想把它记录下来,场景是这样的: 从上图可以看出,用户通过Client访问的是LVS的VIP, VIP后端挂载的RealServer是Nginx服务器. Client可以是浏览器 ...

  8. ubuntu14.04设置sublime text3为默认文本编辑器

    更新时间2017年07月20日17:35:04 原来的方法貌似并不试用,现在才发现,其实ubuntu下也和Windows下一样... 右键,属性,然后如图所示 set as default 即可. 之 ...

  9. 九度OJ 1016：火星A+B （进制转换）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4913 解决:1334 题目描述:     读入两个不超过25位的火星正整数A和B,计算A+B.需要注意的是:在火星上,整数不是单一进制的, ...

  10. Delphi 完全时尚手册之 Visual Style 篇

    这里先说说两个概念:Theme(主题)和 Visual Style .Theme 最早出现在 Microsoft Plus! for Windows 95 中,是 Windows 中 Wallpape ...