HTML5 1.9 新的布局元素
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>