html5布局元素有：1、header元素，定义网页的头部内容；2、footer元素；3、nav元素；4、article元素；5、section元素；6、aside元素；7、time元素；8、progress元素；9、meter元素等。
本教程操作环境：windows7系统、HTML5版、Dell G3电脑。
HTML5新增的几个布局结构元素
1、header元素：
一般用于网页的头部，定义头部的区域块，也可以定义一块内容，所定义的内容是一块独立的。
中国最大的搜索引擎
百度
2、footer元素：
立即学习“前端免费学习笔记（深入）”；
与header元素基本一致，但是footer元素一般定义网页的底部内容
3、nav元素：
可以用来定义导航栏，目录，超链接等；并不是需要把所有的连接组都放进nav元素中，只需要将主要的，基本的连接组放进nav元素即可
4、article元素：
用于定义一个独立的内容区块；可以是一篇博客，一篇文章或者是独立的插件；可以嵌套使用，也可以表示插件。类似于div元素
Article元素
欢迎学习Article元素
这是一个内嵌页面
5、section元素：
用来定义页面中的内容进行分块；强调分块。一般用于页面中具有明显独立的内容
第一章：桃园三结义
桃园三结义最初是小说《三国演义》里记载的故事，述说当年刘备、关羽和张飞三位仁人志士，为了共同干一番大事业的目标，意气相投， 言行相依，选在一个桃花盛开的季节、选在一个桃花绚烂的园林，举酒结义，对天盟誓，有苦同受，有难同当，有福同享，共同实现自己人生的美好理想。
第二章：
草船借箭是我国古典名著《三国演义》中赤壁之战的一个故事。借箭由周瑜故意提出(限十天造十万支箭)，机智的诸葛亮一眼识破是一条害人之计， 却淡定表示“只需要三天”。后来，有大雾天帮忙，诸葛亮再利用曹操多疑的性格，调了几条草船诱敌，终于借足十万支箭，立下奇功。
6、aside元素：
通常用来设置侧边栏。
Gridster.js多列网格式拖动布局插件下载网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
同时也可以嵌套在article元素内部使用，作为主要内容的附属信息，比如参考资料，名词解释等
也可以定义article元素之外的内容，，前提是这些内容与article元素内容相关联
侏罗纪公园
Dinos were great!
Way too scary for me.
I agree, dinos are my favorite.
7、time元素：
表示24小时中的某个时刻或某个日期，，表示时刻允许带时差
datetime属性中日期与时间要用”T“文字分隔 使用”z“表示UTC标准时间
pubbdate属性是一个可选标签，可以让搜索引擎很方便就识别出文章日期，新闻的发表日期
8、progress和meter元素：
progress元素：是HTML5新增的元素，用来建立一个进度条；通常用来与JavaScript结合使用，来显示任务的进度
meter元素：是HTML5新增的元素，用来建立一个度量条，用来表示度量衡的评定；通常与JavaScript结合使用
相关推荐：《html视频教程》
