html5新增的标签中包括了header标签
header标签的作用是申明这是头部，并无其他实际效果，仅是语义申明的意义
顶部是最简单的，因为只需要设置一个头像，一个背景颜色或者图片，其他内容的和其他版块设置方法是一样的。
废话不多说，先上图为敬：
手机端效果图
PC端效果图
顶部的头像我们直接采用原代码的图片（原代码是来自W3C，所以图片我们保留依然使用W3C的）
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
color: #333;
background-color: #efefef;
padding: 10px;
margin: 0;
}
.section {
background-color: orange;
padding: 20px;
margin-bottom: 10px;
border-radius: 8px;
}
#header img {
display: block;
width: 80px;
height: 80px;
margin: auto;
}
#header p {
font-size: 24px;
color: #fff;
padding-top: 10px;
margin: 0;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div id="header" class="section">
<img src="https://www.w3cschool.cn/statics/demosource/myblog/avatar.png" alt="头像" class="img-circle" />
<p>W3Cschool小师妹</p>
</div>
</body>
</html>此代码都是基础代码，没有什么可解说的，在这里就不解说了，大家有什么不懂的就自行百度或者留言评论在下方，我一一为大家解答！
