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. poj1691--Painting A Board(拓扑+dfs)

    题目链接:点击打开链接 题目大意:一个矩形由n个小矩形组成,如今要给小矩形染色,可是颜料会向下滑,为了防止弄乱颜料,所以要先染上面的矩形,后然染以下的矩形.每一次改变颜色都要用一个新的刷子.问最小用多 ...

  2. Linux中运行c程序，与系统打交道

    例一:system系统调用是为了方便调用外部程序,执行完毕后返回调用进程. #include <stdio.h> #include <stdlib.h> main() { pr ...

  3. gitlab服务器邮箱配置

    如想用 SMTP 代替 Sendmail 发送email,添加如下相应邮箱服务商的配置到/etc/gitlab/gitlab.rb, 然后运行gitlab-ctl reconfigure使修改生效. ...

  4. linux 安装jdk和tomcat

    安装jdk 下载相关jdk .rpm包,如:jdk-8u31-linux-i586.rpm 解压:#rpm -ivh jdk-8u31-linux-i586.rpm 配置环境变量:#vi  /etc/ ...

  5. Linux Sed命令具体解释+怎样替换换行符&quot;\n&quot;(非常多面试问道)

    Sed Sed是一个强大的文本处理工具 能够採用正则匹配.对文本进行插入删除改动等操作 Sed处理的时候,一次处理一行,每一次把当前处理的存放在暂时缓冲区.处理完后输出缓冲区内容到屏幕,然后把下一行读 ...

  6. Atom 编辑器使用和学习

    事先准备:下载 Github 开源文本编辑器 Atom,并安装Atom 官网 | 搜索 “Atom下载” 常用快捷键:http://blog.csdn.net/hunyxv/article/detai ...

  7. Xenomai PC开发环境

    这两天总在纠结编译一个PC机上的Xenomai开发环境,选择编译器.kernel版本和IPIP版本,但是今天忽然想到,上位机只是个开发环境,只要能编译.能运行就可以了,实时性根本不是关注的东西.而Xe ...

  8. 转：MSN君最后的十个瞬间

    五年前我用过MSN五年.在一家ERP公司当程序猿的时候我甚至在业余时间做过一款MSN订餐机器人. 转完这篇文章.就是真正跟MSN的bye bye了. 转自:www.gogo.cn 今天是一个普通的周五 ...

  9. redis配置认证密码（转）

    redis配置密码 1.通过配置文件进行配置yum方式安装的redis配置文件通常在/etc/redis.conf中,打开配置文件找到 ? 1 #requirepass foobared 去掉行前的注 ...

  10. 深入Asyncio（七）异步上下文管理器

    Async Context Managers: async with 在某些场景下(如管理网络资源的连接建立.断开),用支持异步的上下文管理器是很方便的. 那么如何理解async with关键字? 先 ...