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. SpringBoot学习之启动方式

    1.通过@SpringBootAppliction注解类启动 启动方法:找到注解类->鼠标右键->run as-> java application. 2 通过maven启动Spri ...

  2. 线性表的链式实现(C++)

    相关内容: 线性表的顺序实现 链式实现(C语言) (推荐在GitHub上查看,下面代码只是最初实现,后续如果有修改,由于太麻烦,不会再更改下文,仅仅更新Github上的代码文件) 结点以及链表类的定义 ...

  3. request 解决中文乱码问题

    package request; import java.io.IOException;import javax.servlet.ServletException;import javax.servl ...

  4. JS常用方法手记

    1.判断arr数组是否含有元素str,没有返回-1 arr.indexOf(str) 2.遍历arr数组,k为键,v为值 arr.map((v, k) => { return;}) 3.arr数 ...

  5. Gradle 介绍

    介绍:Gradle是一种构建工具,它抛弃了基于XML的构建脚本,取而代之的是采用一种基于Groovy的内部领域特定语言.Gradle的设计理念是,所有有用的特性都由Gradle插件提供,一个Gradl ...

  6. python 基础 4.1 函数的参数

    #/usr/bin/python #coding=utf-8 #@Time   :2017/10/24 9:09 #@Auther :liuzhenchuan #@File   :函数的参数.py # ...

  7. Flask，ORM及模板引擎Jinja2

    跨域:http://blog.csdn.net/yannanxiu/article/details/53036508 下载flask_cors包 pip install flask-cors 使用fl ...

  8. 以python理解Linux的IO多路复用，select、poll、epoll

    题外话 之前在看Unix环境高级编程的时候,看完高级IO那一章,感觉自己萌萌哒,0.0 ,有点囫囵吞枣的感觉,之后翻了几篇博客,从纯系统的角度理解,稍微有了点概念,以这两篇为例,可以以后参考: htt ...

  9. 源码编译mysql 5.5+ 安装过程全记录

    前言:从mysql 5.5版本开始,mysql源码安装开始使用cmake了,编译安装跟以前的版本有点不一样了. 一,安装步骤: 1.安装前准备工作 a.下载mysql源代码包,到mysql下载页面选择 ...

  10. java中final与static的使用场景

    final Java关键词final有“无法改变”的含义,主要用于修饰非抽象类.方法或者变量.使用时注意: final类不能被继承,没有子类,final类中的方法默认是final的. final方法不 ...