1.header元素（标签）
a.通常用于设置一个页面的标题部分，通常包含标题，LOGO，导航
b.通常会放在文章的头部
2.footer元素（标签）
a.通常用于设置一个网页的底部区域，会包含友情链接，版权声明，文件建立日期，联系方式等
b.通常会放在页面的页脚
3.article
a.用于定义一个独立的内容区块，比如一篇文章、帖子、论坛的一段用户评论、一篇新闻消息等
b.可以嵌套其他元素，他可以有自己的头、尾、主题等，使用时要特别注意内容的独立性，一般对于独立完整的内容才使用article元素。如果只是一段内容的话应该使用section元素
4.section
a.用来定义文章中的章节（通常应该有标题和段落内容）
b.用来定义文档中特定内容的区块，可视为一个区域分组元素，用来给页面上的内容分块
c.section元素可以定义文档的主体内容
d.注意它与div的区别，div强调形式上的独立性，section强电内容上的独立性，注意他的语义
5.article与section的区别
a.article更强调内容的独立性，是独立完整的内容；section更强调内容的关联性，页面内容分块。
b.本质上都是带有语义的div块元素，分别可看做<div id="section"><div id="article">
6.aside元素
a.通常用来设置侧边栏
b.用于定义article元素之外的内容，前提是这些内容与article元素内的内容相关
c.也可以嵌套在article元素内部使用，作为主要内容的附属信息，比如与主内容有关的参考资料、名词解释等
7.nav元素
a.用来定义目录、导航栏、超链接
b.并非所有的超链接都放在nav元素中，通常只把一个文档中的主导航栏放在nav中
c.在文章页面中，nav还可以用来给一个文字做一个目录的超链接
8.float：left
暂时可以理解为它的作用就是让块元素不换行，而是从左向右排列
9.margin：0
暂时只需知道它可以设置外边距，可以去掉bodyhe内容的百变即可
10.overflow：auto
内容超出父元素容器后自动加滚动条
11.text-decoraction：none
给a标签去掉下划线，仅作了解
A
<!DOCTYPE html>
< html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>例1</title>
</head>
<body>
<aside>
作者简介：.......<br>
版权归属：.......
</aside>
<article>
<header>
<h3>文章标题</h3>
<h5>作者：杜甫</h5>
</header>
<p>我是正文**********************************************<br>********************************************** <br>**********************************************<br></p>
<section>
<article>
<header><h4>网友A的评论</h4></header>
<p>评论内容：******************江流石不转，遗恨失吞吴。</p>
<footer><h4>发布时间：2016/03/10</h4></footer>
</article>
<article>
<header><h4>网友B的评论</h4></header>
<p>评论内容：******************江流石不转，遗恨失吞吴。</p>
<footer><h4>发布时间：2016/03/15</h4></footer>
</article>
</section>
<footer><p>尾部：阅读：300 评论：80</p></footer>
<aside><p>名词解释:..........</p></aside>
</article>
</body>
</html>
B
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>1.9</title>
<style type="text/css">
nav{width:100%;height:40px;background:#E0FFFF;text-align:center;padding:6px}
li{display:inline}
a{text-decoraction:none}
</style>
</head>
<nav>
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="">电脑办公</a></li>
<li><a href="">平面设计</a></li>
<li><a href="">设计素材</a></li>
<li><a href="">平面设计</a></li>
<li><a href="">设计素材</a></li>
<li><a href="">自学交流</a></li>
</ul>
</nav>
</body>
</html>
C
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>页面分栏</title>
<style type="text/css">
header{width:100%;height:10%;background:green}
footer{width:100%;height:10%;background:blue;float:left;}
section{width:80%;height:80%;background:gray;float:left;}
aside{width:20%;height:80%;background:Aqumarine;float:left;}
nav{width:100%;height:50%;background:blue}
</style>
</head>
<body style="margin=0;height=708px">
<haeder>header
<nav>nav</nav>
</haeder>
<aside>
aside
</aside>
<section>
section
</section>
<footer>footer</footer>
</body>
</html>