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. bzoj1061【NOI2008】志愿者招募

    1061: [Noi2008]志愿者招募 Time Limit: 20 Sec  Memory Limit: 162 MB Submit: 2740  Solved: 1703 [Submit][id ...

  2. 重读金典------高质量C编程指南（林锐）-------第四章 表达式和基本语句

    4.1 运算符的优先级   规则:如果代码行中的运算符比较多,可用括号确定操作顺序.if((a|b)&&(a&c)) 4.2   复合表达式 规则:不要编写太复杂的复合表达式 ...

  3. 【转载】ASP.Net请求处理机制初步探索之旅 - Part 3 管道

    开篇:上一篇我们了解了一个ASP.Net页面请求的核心处理入口,它经历了三个重要的入口,分别是:ISAPIRuntime.ProcessRequest().HttpRuntime.ProcessReq ...

  4. 转：PCIe基础知识

    PCIe基础知识   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/zqixiao_09/article/details/51842542 PCIe ...

  5. Android TelephonyManager类的使用

    TelephonyManager类主要提供了一系列获取手机与通讯相关的状态和信息的get方法,包含手机用户的信息.手机SIM的状态.电信网络的状态等. TelephonyManager类的对象的获取: ...

  6. SQL Prompt 编辑

    SQL Prompt是一款拥有SQL智能提示功能的SQL Server和VS插件.超级好用的插件,

  7. MySQL 5.7.18的安装及主从复制(主从同步)

    MySQL 5.7.18的安装与主从复制 IP 计算机名 角色 192.168.1.222 001 master 192.168.1.233 002 slave CentOS 6.9安装mysql5. ...

  8. 【PyCharm编辑器】之无法导入引用手动新建的包或类，报：This inspection detects names that should resolve but don't. Due to dynamic dispatch and duck typing, this is possible in a limited but useful number of cases.

    一.现象描述 如下图所示,手动新建个类包calculator.py,想在test.py文件引用它,发现一直报红线,引用失败 Unresolved reference 'calculator' less ...

  9. C#下的摄像机标定

    前言:计算机视觉的基本任务之一是从摄像机获取的图像信息出发计算三维空间中物体的几何信息,并由此重建和识别物体,而空间物体表面某点的三维几何位置与其在图像中对应点之间的相互关系是由摄像机成像的几何模型决 ...

  10. 跳过权限检查，强制修改mysql密码

    windows: 1,停止MYSQL服务,CMD打开DOS窗口,输入 net stop mysql 2,在CMD命令行窗口,进入MYSQL安装目录 比如E:\Program Files\MySQL\M ...