header footer
header元素（标签）
用于设置一个页面的标题部分，通常会包含标题，LOGO，导航等
通常会放在文章的头部
footer元素（标签）
通常用于设置一个网页的底部区域，会包含友情链接，版权声明，文件建立日期，联系方式等
通常会放在页面的页脚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{height:708px;}
header{width: 100%;height: 10%;background: green;}
footer{width: 100%;height: 10%;background: blue;}
#div0{width: 100%;height: 80%;background: yellow;}
#div1{width: 20%;height: 100%;background: red;float: left;}
#div2{width: 80%;height: 100%;background: DarkGray;float: left;}
</style>
</head>
<body>
<header>我是头</header>
<div id="div0">
<div id="div1">我是左侧栏</div>
<div id="div2">我是右侧边栏</div>
</div>
<footer>我是尾</footer>
</body>
</html>
header_footer.png
article元素（标签）
用于定义一个独立的内容区块，比如一篇文章，一篇博客，一个帖子，论坛的一段用户评论，一篇新闻消息等.
article元素内可以嵌套其他元素，它可以有自己的头、尾、主体等内容。使用时要特别注意内容的独立性，一般对于独立完整的内容才使用article元素，如果只是一段内容的话应该使用section元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<article>
<header>
<h3>文章标题</h3>
<h5>作者：MM</h5>
</header>
<p>我是正文*******************<br>*******************<br>*******************<br></p>
<article>
<header><h4>网友1</h4></header>
<p>评论1</p>
<footer>今天</footer>
</article>
<article>
<header><h4>网友2</h4></header>
<p>评论2</p>
<footer>明天</footer>
</article>
<footer>
<p>网页尾部</p>
</footer>
</article>
</body>
</html>
Article.png
section元素（标签）
- 用来定义文章中的章节(通常应该有标题和段落内容)
- 用来定义文档中特定内容的区块，可视为一个区域分组元素，用来给页面上的内容分块。
- section元素可以定义文档的主体内容。
- 用一句话来概括它的作用就是给内容分段，给页面分区
- 注意他与div的区别，div强调在形式上的独立性，section强调的是内容上的独立性，注意它的语义。
article元素和section元素的区别
语义不同
- article元素更强调内容的独立性
- section元素更强调内容的关联性
- article元素是独立完整的内容，section元素页面内容分块
相同点
- 本质上都是带有语义的div块元素
- 分别可以看作
<div id="section">和<div id="article">
aside元素
- aside元素通常用来设置侧边栏。
- 用于定义article元素之外的内容，前提是这些内容与article元素内的内容相关。
- 同时也可嵌套在article元素内部使用，作为主要内容的附属信息，比如与主内容有关的参考资料，名词解释等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>x</title>
<style type="text/css">
header{width: 100%;height: 10%;background: green;}
footer{width: 100%;height: 10%;background: yellow;float: left;}
aside{width: 20%;height: 80%;background: DarkGray;float: left;}
section{width: 80%;height: 80%;background: Pink;float: left;}
</style>
</head>
<body style="margin:0;height:708px">
<header>header</header>
<aside>aside</aside>
<section>section</section>
<footer>footer</footer>
</body>
</html>
aside.png
nav元素
- 用来定义目录、导航栏、超链接
- 并非所有的超链接都放在nav元素中，通常只把一个文档中的主导航栏放在nav中
- 在文章页面中，nav还可以用来给一个文字做一个目录的超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>x</title>
<style type="text/css">
header{width: 100%;height: 10%;background: green;}
footer{width: 100%;height: 10%;background: yellow;float: left;}
aside{width: 20%;height: 80%;background: DarkGray;float: left;}
section{width: 80%;height: 80%;background: Pink;float: left;}
nav{width: 100%;height: 50%;background: #e0ffff;text-align: center;padding: 1px}
li{display: inline;}
a{text-decoration: none;}
</style>
</head>
<body style="margin:0;height:708px">
<header>
header
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="">木木</a></li>
<li><a href="">屎蛋</a></li>
<li><a href="">逗逗</a></li>
</ul>
</header>
<aside>aside</aside>
<section>section</section>
<footer>footer</footer>
</body>
</html>
nav.png
time元素
微格式的概念
HTML5中的微格式，是一种利用HTML5中的新标签对网页添加附加信息的方法，附加信息例如新闻事件发生的日期和时间，文章发表的日期等。
HTML5中的微格式是为了简化浏览器对数据的提取，方便搜索引擎的搜索.
time元素
- time是HTML5新增的元素
- time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。它可以定义很多格式的日期和时间
- datetime属性中日期与时间之间要用"T"文字分隔，"T"表示时间。请注意倒数第二行，时间加上Z文字表示给机器编码时使用UTC标准时间，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加时差。
- pubdate属性是个可选标签，加上它搜索引擎/浏览器就可以很方便的识别出那个日期是文章、新闻的发表日期。
time元素示例
<time datetime="2016-11-30"> 2016年11月30日</time>
<time datetime="2016-11-30T20:00"> 2016年11月30日晚上8点</time>
<time datetime="2016-11-30T20:00Z"> 2016年11月30日晚上8点</time>
<time datetime="2016-11-30T20:00+09:00">美国时间2016年11月30日8点</time>
<time datetime="2016-11-30" pubdata="pubdata">文章发表于2016年11月30日</time>
hgroup元素
通常用来给标题分组，通常放在header中；但是并非强制要求，也不是绝对的。
address元素
通常用用来说明作者的联系信息，例如名字，E-mail，电话，地址等
address元素中的内容会以斜体显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
hgroup{background: yellow}
</style>
</head>
<body>
<header>
<hgroup>
<h1>主</h1>
<h1>副</h1>
</hgroup>
</header>
<address>
我家住在黄土高坡
</address>
</body>
</html>
hgroup_address.png
新布局的优点
- 更注重于内容而不是形式
- 对人的友好：更加的语义化，高度的描述性，更加的直观，增加了代码的可读性。
- 对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档的内容
- 代码更加的简洁洁
figure元素
figure/figcaption都是HTML5中新增的元素
figure元素是一个媒体组合元素，也就是对其他的媒体元素进行组合，比如：图像、图表等等
figcaption元素
用来给figure元素定义标题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
head{}
</style>
</head>
<body style="background: #FFB6C1" >
<h2>我是标题</h2>
<p>===========================</p>
<figure>
<img src="p1.jpg" alt="" width="300"><img src="p1.jpg" alt="" width="300">
</figure>
<figcaption>我的作品1</figcaption>
<figure>
<img src="p3.jpg" width="300"><img src="p4.jpg" width="300">
</figure>
<figcaption>我的作品2</figcaption>
</body>
</html>
figure_figcaption.png
网友评论