html5--2.1新的布局元素(1)-header/footer

最新推荐文章于 2022-07-20 06:00:00 发布

weixin_34088598

最新推荐文章于 2022-07-20 06:00:00 发布

阅读量200

点赞数

本文介绍HTML5中新增的header和footer元素的语义及用法，并通过实例展示了如何利用这两个元素进行简单的页面布局。

html5--2.1新的布局元素(1)-header/footer

学习要点

了解header/footer的语义和用法
使用header/footer进行一个简单的布局

header元素（标签）

用于设置一个页面的标题部分，通常会包含标题，LOGO，导航等
通常会放在文章的头部

footer元素（标签）

通常用于设置一个网页的底部区域，会包含友情链接，版权声明，文件建立日期，联系方式等
通常会放在页面的页脚

实例

 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>