夜光带你走进 前端工程师（十五）
夜光序言：
“他就是这么一个人……”一直任由女鬼絮絮叨叨的男人突然说话了，低沉暗哑的嗓音在四面石壁的宽广大厅中回响，却又飘渺好似叹息，似乎是在说给自己一个人听，“坏得不彻底，恨得不彻底，对自己却狠得彻底。”
正文：
Time元素
pubdate元素
特技：在time元素里面包含了pubdate属性的话，就是表示的当前文章的发布时间
header元素合成
Header元素：
1：是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个的一个内容区块的标题，但可以包含其他的内容，比如在header里面放置logo图片，搜索表单等等。
2：注意：
一个页面内没有限制header的出现次数，也就是我们可以在同一页面内，不同的内容区块上分别加上一个header元素
3:在HTML5中，一个header元素至少可以包含一个heading元素（h1-h6），也可以包括我们下节课将要学习的hgroup元素，还可以包含其他元素，新的w3chtml5中，我们可以把nav元素包括进去
|
网页标题
|
最外边框：网页主区域
内部边框：文章区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文部分</p>
</article>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特级工程师</title>
</head>
<body>
<header>
<hgroup>
<h1>HTML5****</h1>
<a href="/">手机版</a>
<a href="/">HTML5论坛</a>
</hgroup>
<nav>
<ul>
<li>
</li>
</ul>
</nav>
</header>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特级工程师</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: 微软雅黑;
text-align: center;
}
</style>
</head>
<body>
<header>
<hgroup>
<h1>HTML5****</h1>
<a href="/">手机版</a>
<a href="/">HTML5论坛</a>
</hgroup>
<nav>
<ul>
<li>
<a href="/">首页</a>
</li>
<li>
<a href="/">手机版</a>
</li>
<li>
<a href="/">论坛</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
出现下面这个怎么办：
最终效果：
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: 微软雅黑;
text-align: center;
}
a{
color: #f60;
text-decoration: none;
}
hgroup{
margin-bottom: 10px;
}
nav{
height: 48px;
background: #ff6600;
}
nav li{
float: left;
background: #000000;
border-radius: 5px;
padding: 5px 10px;
margin: 10px;
list-style: none;
}
</style>
以上为样式代码
整体代码：仔细理解，【周元】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特级工程师</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: 微软雅黑;
text-align: center;
}
a{
color: #f60;
text-decoration: none;
}
hgroup{
margin-bottom: 10px;
}
nav{
height: 48px;
background: #ff6600;
}
nav li{
float: left;
background: #000000;
border-radius: 5px;
padding: 5px 10px;
margin: 10px;
list-style: none;
}
</style>
</head>
<body>
<header>
<hgroup >
<h1>HTML5****</h1>
<a href="/">手机版</a>
<a href="/">HTML5论坛</a>
</hgroup>
<nav>
<ul>
<li>
<a href="/">首页</a>
</li>
<li>
<a href="/">手机版</a>
</li>
<li>
<a href="/">论坛</a>
</li>
</ul>
</nav>
</header>
</body>
</html>