夜光带你走进 前端工程师（十六）
夜光序言：
一年有365天 我只爱你4天
春天 夏天 秋天 冬天
一个月里 我只爱你3天
昨天 今天 明天
一个礼拜 我只爱你2天
白天 黑夜
而我只爱你一次 这一次是
一辈子
正文：创客学院CEO 夜光
hgroup元素合成
一般会把h1-h6的元素进行分组，比如在一个内容区块的标题和他的子标题算是一组
通常情况下：文章只有一个主标题时，是不需要hgroup元素的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<article>
<header>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
</header>
</article>
</body>
</html>
footer元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="footer">
<p>
<a href="/">版本信息</a>|
<a href="/">版本信息</a>|
<a href="/">版本信息</a>|
<a href="/">版本信息</a>|
</p>
<p>创客学院版权信息</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="footer">
<p>
<a href="/">版本信息</a>|
<a href="/">版本信息</a>|
<a href="/">版本信息</a>|
<a href="/">版本信息</a>|
</p>
<p>夜光的创客学院 版权信息</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding:0
}
body{
font-family: 微软雅黑;
text-align: center;
}
#footer,#footer a{
color: #555;
}
</style>
</head>
<body>
<div id="footer">
<p>
<a href="/">版本信息</a>|
<a href="/">版本信息</a>|
<a href="/">版本信息</a>|
<a href="/">版本信息</a>|
</p>
<p>创客学院版权信息</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<article>
<p>文章的内容</p>
<footer>
文章的脚步注释
</footer>
</article>
<section>
<p>文章的内容</p>
<footer>
文章的脚步注释
</footer>
</section>
</body>
</html>
address元素
用来在页面中呈现联系信息，或者相关联系人的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header>
<h1>html5+css+div</h1>
</header>
<p>
这里是文章正文部分
</p>
<footer>
<address>
<a href="/" title="光灵">光灵</a>
<a href="/" title="创客学院">创客学院</a>
</address>
时间：<time datetime="2018-4-8">2018年4月8日</time>
</footer>
</body>
</html>