2.2 新增的非主体结构元素
HTML5内还增加了一些表示逻辑结构或附加信息的非主体结构元素。
2.2 .1 课堂案例——创建企业简介网页
下面利用HTML5中的非主体结构元素布局企业简介网页，如图2.5所示。
图2.5 企业简介网页
01 插入网页头部部分，这部分主要是插入网页logo和网站导航，其HTML结构元素代码如下，网页效果如图2.6所示。
<header>
<div class=＂shell＂>
<h1 id=＂logo＂><a href=＂#＂>科技公司</a></h1>
<nav>
<ul>
<li class=＂active＂>
<a href=＂#＂>主页</a></li>
<li>
<a href=＂#＂>公司介绍</a></li>
<li>
<a href=＂#＂>公司新闻</a></li>
<li>
<a href=＂#＂>产品介绍</a></li>
<li>
<a href=＂#＂>联系我们</a></li>
</ul>
</nav>
</div>
</header>
图2.6 网页header部分
02 插入网页正文部分，其HTML结构元素代码如下，网页效果如图2.7所示。
<div class=＂shell＂>
<div class=＂main＂>
<hgroup>
<h1>公司介绍</h1>
</hgroup>
<article>
<p> </p>
<p>作为一个新公司，其发展壮大得益于公司的集团化运作模式和社会各界的鼎力支持，同时也得益于公司
优秀专业队伍。公司目前内部管理结构完善，人员状况配置合理，符合现代企业制度要求，为公司后期的发展奠定了坚
实的基础。
未来公司将继续保持发展动力，以过硬的工程质量、良好的服务声誉，崇高的社会责任感去赢得社会更多客户
和人士的信赖与认可，不断为全市经济跨越发展和长治久安，构造和谐社会做出新的贡献。</p>
</article>
</div>
</div>
图2.7 插入网页正文部分
03 插入网页底部部分，这部分主要在footer内，其HTML结构元素代码如下，网页效果如图2.8所示。
<footer>
<div class=＂shell＂>
<section class=＂footer-cols＂>
<address>
<h3> <strong>联系我们：北京市海淀区西三环北路×××号</strong></h3>
<h4>电话：12××4567802</h4>
<a href=＂#＂>johsdndoe@×××.com</a>
</address>
</section>
</div>
</footer>
图2.8 插入网页底部部分
2.2 .2 header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内某个内容区块的标题，header元素内也可以包含其他内容，如表格、表单或相关的Logo图片等。
在架构页面时，整个页面的标题常放在页面的开头，因此，<header>标签一般都放在页面的顶部。可以用如下所示的形式书写页面的标题。
<header>
<h1>页面标题</h1>
</header>
一个网页可以拥有多个header元素，可以为每个内容区块加一个header元素。
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文</p>
</article>
在HTML5中，一个header元素通常包括至少一个headering元素（h1~h6），也可以包括hgroup、nav等元素。
2.2 .3 hgroup元素
hgroup元素用于组合网页或区段（section）的标题。hgroup元素是将标题及其子标题进行分组的元素。当标题有多个层级（副标题）时，hgroup元素用来对一系列<h1>~<h6>标签进行分组。
如果文章有标题和子标题，就可以使用hgroup元素。通常情况下，如果文章只有一个主标题是不需要使用hgroup元素的。hgroup元素示例代码如下所示，运行代码显示的效果如图2.9所示。
<!doctype html>
<html>
<head>
<meta charset=＂utf-8＂>
<title>hgroup元素</title></head>
<article>
<header>
<hgroup>
<h1>李白古诗</h1>
<h2>《静夜思》</h2>
</hgroup>
<p>床前明月光，疑是地上霜。举头望明
月，低头思故乡。</p>
</header>
</article>
</html>
图2.9 hgroup元素
2.2 .4 footer元素
footer元素通常包括与其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。footer元素和header元素的使用方法基本一样，可以在一个页面中使用多次。如果在一个区段后面加入footer元素，那么它就相当于该区段的尾部了。
在HTML5出现之前，通常使用类似下面的代码来写页面的页脚。
<div id=＂footer＂>
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</div>
在HTML5中，可以不使用div元素，而用更加语义化的footer元素来写。
<footer>
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</footer>
footer元素既可以用作页面整体的页脚，也可以作为一个内容区块的结尾，例如，可以将<footer>标签直接写在<section>标签或是<article>标签中。
在article元素中添加footer元素：
<article>
文章内容
<footer>
文章的脚注
</footer>
</article>
在section元素中添加footer元素：
<section>
分段内容
<footer>
分段内容的脚注
</footer>
</section>
2.2 .5 address元素
address元素通常位于文档的末尾，用来在文档中呈现联系信息，包括文档创建者的姓名、站点链接、电子邮箱、地址、电话号码等。address元素不仅是用来呈现电子邮箱或真实地址这样的“地址”概念，还可以呈现与文档创建者相关的各类联系方式。
下面是address元素示例。
<!doctype html> <html> <head> <meta http-equiv=＂content-type＂ content=＂text/html; charset=gb2312＂ /> <title>address元素实例</title> </head> <body> <address> <a href=＂mailto:example@example.com＂> webmaster</a><br /> 某装修公司<br /> ×××区×××号<br/> </address> </body> </html>
浏览器中显示地址的方式与其周围的文档不同，IE、Firefox和Safari浏览器以斜体显示地址，如图2.10所示。
图2.10 address元素示例
2.2 .6 课堂练习——用HTML5中的结构元素布局主页
下面利用HTML5中的结构元素布局主页，如图2.11所示。
图2.11 布局主页
01 制作页面整体框架，其HTML结构元素代码如下。
<div class=＂box＂> <header>网页的头部header</header> <div class=＂box1＂> <nav>左边的导航栏nav</nav> <aside>右边的导航栏aside</aside> <article>主体内容article</article> <section>右边的侧边栏section</section> </div> <footer>底部footer</footer> </div>
这里在header元素中插入网页头部内容，在nav元素和aside元素中插入导航栏，在article元素中插入主体内容，在section元素中插入侧边栏，在footer元素中插入底部内容。
02 输入CSS定义网页外边距和box整体样式，其代码如下，此时网页的效果如图2.12所示。
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 80%;
text-align: center;
font-size: 30px;
margin: 10px auto;
}
</style>
图2.12 网页外边距和box整体样式效果
03 使用CSS定义网页头部内容header的样式，其代码如下，此时网页的效果如图2.13所示。
header {
width: 100%;
height: 120px;
outline: 1px solid red;
line-height: 100px;
background: #F0C
}
图2.13 定义网页头部内容header的样式
04 使用CSS定义左边和右边导航栏的样式，其代码如下，此时网页的效果如图2.14所示。
.box1 {
width: 100%;
position: relative;
height: 550px;
}
nav {
width: 70%;
height: 60px;
outline: 1px solid black;
position: absolute;
left: 0px;
top: 0px;
line-height: 50px;
background:#FCF
}
aside {
width: 30%;
height: 60px;
outline: 1px solid blue;
position: absolute;
right: 0px;
top: 0px;
line-height: 50px;
background:#FCF
}
图2.14 定义左边和右边导航栏的样式
05 使用CSS定义主体内容article和右边侧边栏section的样式，其代码如下，此时网页效果如图2.15所示。
article {
width: 70%;
height: 500px;
outline: 1px pink solid;
position: absolute;
left: 0px;
top: 50px;
line-height: 500px;
}
section {
width: 30%;
height: 500px;
outline: 1px yellow solid;
position: absolute;
right: 0px;
top: 50px;
line-height: 500px;
background:#DE83CA
}
图2.15 定义主体内容article和右边侧边栏section的样式
06 使用CSS定义底部footer的样式，其代码如下，此时主页布局最终效果如图2.16所示。
footer {
width: 100%;
height: 120px;
outline: 1px solid rebeccapurple;
line-height: 100px;
background:#DDC6DA
}
图2.16 主页布局最终效果