html5--2.1新的布局元素概述
html5--2.1新的布局元素概述
学习要点
- 了解HTML5新标签(元素)的优点
- 了解本章要学习的新的布局元素
- 了解本章课程的安排
HTML5新标签的优点:
- 更注重于内容而不是形式
- 对人的友好:更加的语义化,高度的描述性,更加的直观,增加了代码的可读性。
- 对计算机的友好:浏览器更容易解析,搜索引擎更容易抓取文档的内容
- 代码更加的简洁
本章将要讲解的新标签概览
新增的布局标签
新增的布局标签可以概括为两类:用于控制页面主体内容的标签,可以划分为主体结构标签;非主体结构标签,用来放置辅助主体内容的信息。
本套课程将按照页面的布局流程来讲解这些新标签,对于分类大家简单了解下就可以,主要还是能够掌握每个标签的用法。
- article标签:定义一个独立内容区块:一篇文章、一个视频文件等
- cection标签:定义一个区域,如文章的章节等
- nav标签:定义目录导航
- aside标签:定义侧边栏
- figure/figcaption标签:定义一组媒体内容以及它们的标题
- header/footer标签:定义一个头部/底部
- hgroup标签:标题分组
- address标签:地址、联系信息等
本章课程安排
- 对新增的标签逐个进行详细的讲解
- 对比table和div+css布局,体验新布局的优点
- 通过综合实例,加深对新布局和新标签的理解
html5--2.1新的布局元素概述的更多相关文章
- html5--2.9新的布局元素(6)-figure/figcaption
html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...
- html5--2.9新的布局元素(5)-hgroup/address
html5--2.9新的布局元素(5)-hgroup/address 学习要点 了解hgroup/address元素的语义和用法 通过实例理解hgroup/address元素的用法 对照新元素布局与d ...
- html5--2.7新的布局元素(4)-time
html5--2.7新的布局元素(4)-time 学习要点 了解微格式的概念 掌握time元素的用法 微格式的概念 HTML5中的微格式,是一种利用HTML5中的新标签对网页添加附加信息的方法,附加信 ...
- html5--2.6新的布局元素(5)-nav
html5--2.6新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素 aside元素通常用来设置侧边栏 ...
- html5--2.5新的布局元素(4)-aside/nav
html5--2.5新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素(附属信息) aside元素通常用 ...
- html5--2.4新的布局元素(3)-section
html5--2.4新的布局元素(3)-section 学习要点 了解section元素的语义和用法 通过实例理解section元素的用法 article元素和section元素的区别和共同点 art ...
- html5--2.3新的布局元素(2)-article
html5--2.3新的布局元素(2)-article 学习要点 了解article元素的语义和用法 完成一个简单的实例 article元素(标签) 用于定义一个独立的内容区块,比如一篇文章,一篇博客 ...
- html5--2.1新的布局元素(1)-header/footer
html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...
- HTML5中支持新的媒体元素有这些
HTML5对媒体的支持性很强,支持以下媒体元素: · audio 定义音频 · video 定义视频 · embed 作为外部应用的容器 · source 多种媒体源的支持 · track ...
随机推荐
- Oracle 在Drop表时的Cascade Constraints
http://hi.baidu.com/rebooo/item/12b500b130022bf263388e69假设A为主表(既含有某一主键的表),B为从表(即引用了A的主键作为外键).则当删除A表时 ...
- Realm多线程中的那些坑...
个人在开发中遇到的一些小坑... 可能会持续更新... 1.RealmObject自带线程保护功能.仅仅能在创建它的线程中訪问.在子线程中不能訪问. 也就是说.假设你在主线程中new了一个RealmO ...
- 字符串== equals
经常碰到比较字符串的题, eg: public class StringDemo{ private static final String MESSAGE = "taobao"; ...
- 开发ActiveX控件调用另一个ActiveX系列0——身份证识别仪驱动的问题
程序员要从0下表开始,这篇是介绍这个系列的背景的,没有兴趣的人可以直接跳过. 为什么要开发ActiveX控件 由于工作需要,我们开发了一个网站,使用了一款身份证识别仪的网页ActiveX(OCX)插件 ...
- redis写磁盘报错Cannot allocate memory
查看 Redis 日志发现系统在频繁报错: [1821] 10 Nov 09:59:04.086 # Can't save in background: fork: Cannot allocate m ...
- 深入Asyncio(五)Event Loop
Event Loop loop除了处理协程间的切换与结束时的异常捕捉,还要监听socket和文件描述符.先做个小测试: >>> import asyncio >>> ...
- Linux NAT网络连接权威指南
[1]准备工作,写在前面 1.1)检查服务(cmd>>services.msc,我用的是VM) 1.2)确保Vmnet8 连接处于启动状态 + 获取ipv4(ipv6)地址 (在网络连接不 ...
- CentOS系统环境下安装MongoDB
(1)进入MongoDB下载中心:http://www.mongodb.org/downloads We recommend using these binary distributions (官方推 ...
- mongodb启动不了:提示错误信息为 child process failed, exited with error number 100
[启动mongo 副本集错误提示]: [原因分析说明]: 查询很多资料得知由于上次使用了暴力关闭系统或者DB,导致数据文件锁住. [解决办法]: 1. 在 mongo.conf 文件添加一下属性值 ...
- 【BZOJ3864】Hero meet devil DP套DP
[BZOJ3864]Hero meet devil Description There is an old country and the king fell in love with a devil ...