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. jquery相冊图片来回选择

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <script sr ...

  2. UNP学习笔记（第六章 I/O复用）

    I/O模型 首先我们将查看UNIX下可用的5种I/O模型的基本区别: 1.阻塞式I/O 2.非阻塞式I/O 3.I/O复用(select和poll) 4.信号驱动式I/O(SIGIO) 5.异步I/O ...

  3. android权限申请Permission

    代码地址如下:http://www.demodashi.com/demo/12432.html android在6.0系统以后,权限申请变得麻烦起来,今天介绍一个超级好用的权限申请库,我在使用中经过再 ...

  4. 【转载】关于 .Net 逆向的那些工具：反编译篇

    在项目开发过程中,估计也有人和我遇到过同样的经历:生产环境出现了重大Bug亟需解决,而偏偏就在这时仓库中的代码却不是最新的.在这种情况下,我们不能直接在当前的代码中修改这个Bug然后发布,这会导致更严 ...

  5. git 操作分支

    1. git 查看本地分支:git branch 2. git 查看所有分支:git branch -a 3. git 新建本地分支:git branch branchName 4. git 新建分支 ...

  6. MVC总结--MVC简单介绍以及和WebForm差别

    什么是MVC MVC(Model-View-Controller.模型-视图-控制器模式)用于表示一种软件架构模式.它把软件系统分为三个基本部分:模型(Model),视图(View)和控制器(Cont ...

  7. android 底部菜单栏实现（转）

    1.Android学习之BottomNavigationBar实现Android特色底部导航栏 2.Android底部导航栏的四种实现 3.Android BottomNavigationBar底部导 ...

  8. 限制UITextView的字数和字数监控，表情异常的情况和禁用表情

    限制UITextView的字数和字数监控,表情异常的情况和禁用表情   3523FD80CC4350DE0AE7F89A8532B9A8.png 因为字数占一个字符,表情占两个字符.你要是限制15个字 ...

  9. Java 并发随身记（一）之 Unsafe类

    最近在看Java并发相关的内容,需要自己整理整理,不然就生疏了.工作2年多,工作时一般注都是框架.消息这些内容,对基础内容比较忽视.闲话不说,既然是并发内容,首先先复习一下Unsafe的内容吧. Un ...

  10. vue 后台交互数据-编辑页面

    思路~点击编辑按钮,需要获取当前列的id,然后根据id请求后台当前id的数据 1.~~ 2.接收id,并请求页面 获取数据