首先来看一下首页中用来显示网站标题与网站导航的网页标题部分，该部分的页面显示效果如图1所示。
图1 博客首页标题部分效果图
根据第2章所学知识，header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个article元素或section元素的标题。在博客首页中，一般将博客的标题与整个网站的导航链接作为整体网页的标题放置在header元素中。
另外，在header元素内部使用了一个nav元素。如前所述，nav元素是一个可以作为页面导航的链接组，其中的导航元素链接到其他页面，或者当前页面的其他部分，这里将整个网站的导航链接放在该nav元素中。该部分的结构代码如下所示。
<header id="bloghead">
<div id="blogTitle">
<h1 id="blogname">HTML5+CSS3+JavaScript从入门到精通</h1>
<div id="bloglink">http://mysite.com/index.html</div>
</div>
<nav id="blognav">
<ul id="blognavInfo">
<li><a href="http://mysite.com/index.html" id="on">首页</a></li>
<li><a href="http://mysite.com/list.html">博文目录</a></li>
</ul>
</nav>
</header>
由于该网页使用了一个header元素来显示网页标题，并且在header元素的内部使用了hl元素，元素中的文字为“HTML5+CSS3+JavaScript从入门到精通”，因此整个大纲的标题为“1. HTML5+CSS3+JavaScript从入门到精通”。
在header元素内部，使用nav元素来显示整个网站的导航链接，并且没有给nav元素添加标题，在HTML 5中，并不强求对nav元素添加标题，所以这个没有标题的nav元素在大纲中生成标题为“1. Untitled Section”的节。
在上面这段代码中，整个body元素（HTML5中可以将body元素省略不写）内部放置了一个作为容器的div元素，以显示该网页的背景图，然后将header放置其中。
使用ul列表元素来显示网站导航链接，并在样式代码中使用list-style属性控制列表编号不被显示。