html5--2.1新的布局元素(1)-header/footer
学习要点
- 了解header/footer的语义和用法
- 使用header/footer进行一个简单的布局
- header元素(标签)
- 用于设置一个页面的标题部分,通常会包含标题,LOGO,导航等
- 通常会放在文章的头部
- 通常用于设置一个网页的底部区域,会包含友情链接,版权声明,文件建立日期,联系方式等
- 通常会放在页面的页脚
实例
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>2.2</title> 6 <style type="text/css"> 7 body{height: 300px;} 8 header{width: 100%;background: #88FF88;height: 10%} 9 footer{width: 100%;background: #8888FF;height: 10%} 10 #div0{width: 100%;background: #FF8888;height: 80%} 11 #div2{width: 20%;background: #987899;height: 100%;float: left} 12 #div3{width: 80%;background: #987654;height: 100%;float: left} 13 </style> 14 </head> 15 <body> 16 <header>我是头部</header> 17 <div id="div0"> 18 <div id="div2">我是侧边栏</div> 19 <div id="div3">我是主体内容</div> 20 </div> 21 <footer>我是底部</footer> 22 </body> 23 </html>