- HTML5开发精要与实例详解
- 陆凌牛
- 230字
- 2024-12-20 23:33:22
第1章 用HTML 5中的结构元素构建网站
本章内容
案例1：用HTML 5中的结构元素构建一个博客网站
案例2：用HTML 5中的结构元素构建一个企业网站
本章小结
本章主要通过一个博客网站与一个企业网站的制作来向读者展示如何合理运用HTML 5中的各种结构元素，搭建出一个语义清晰、结构分明的Web 3.0时代的网站。
由于本章所涉及的样式代码比较多，因此只对其中比较重要的样式进行介绍，颜色设置、位置设置、外边距与内边距设置和字体设置等代码均略去。
1.1 案例1：用HTML 5中的结构元素构建一个博客网站
本节主要介绍一个使用HTML 5中的各种结构元素来构建博客网站的案例，旨在通过该案例使读者触类旁通，充分了解HTML 5中的各种结构元素的作用、使用场合及使用方法，从而构建出与之相类似的、结构分明的、语义清晰的HTML 5网站。
在介绍具体案例之前，先概要介绍一下HTML 5中的网页结构与HTML 4中的网页结构的区别；HTML 5中添加了哪些结构元素，这些结构元素的作用与使用场合是什么；HTML 5中的网页大纲是什么，这些结构元素会在网页大纲的生成过程中起到什么样的作用，一份网页大纲是根据什么原则生成的。
另外，本节所介绍的知识点均为概要介绍，详细理论知识请参阅笔者所著的《HTML 5与CSS 3权威指南》
一书。
1.1.1 案例知识点
1. HTML 4中表达文档结构的方法
一般来说，人们在书写包括HTML在内的文档时，习惯上按照类似于“章→节→小节”这样的层次结构来进行。在HTML 4网页文档中，为了描述这样的层次结构，一般使用标题元素（h1～h6）。
例如，在HTML 4之前，为了在页面中表达“章→节→小节”这样的三层结构，一般采用如代码清单1-1所示的代码进行书写。
代码清单1-1 HTML 4之前的文档结构的表示方法
<h1>1 HTML5的基础知识</h1>
<h2>1.1 HTML5概述</h2>
（1.1的正文）
<h3>1.1.1 HTML5是什么？</h3>
（1.1.1的正文）
<h3>1.1.2 HTML5中的新增API</h3>
（1.1.2的正文）
<h2>1.2 HTML5快速入门</h2>
（1.2的正文）
<h3>1.2.1 HTML与XHTML</h3>
（1.2.1的正文）
从代码清单1-1所示的文档结构代码中，勉强可以看出该文档的主体结构。但是，在比较复杂的页面中，这种文档结构往往很难看出来。比如对“1 HTML5的基础知识”来说，它的代码只有“<h1>1 HTML5的基础知识</h1>”这一行，没有使用其他元素将<h1>元素中的内容包围起来，这一章内容到底从哪儿到哪儿，是很难看出来的。
后来，为了解决这个问题，开发者开始使用div元素将一章的内容包围起来，具体使用如代码清单1-2所示。
代码清单1-2 在HTML 4中使用div元素描述文档结构
<div >
<h1>1 HTML5的基础知识</h1>
<div >
<h2>1.1 HTML5概述</h2>
（1.1的正文）
<div >
<h3>1.1.1 HTML5是什么？</h3>
（1.1.1的正文）
</div>
<div >
<h3>1.1.2 HTML5中的新增API</h3>
（1.1.2的正文）
</div>
</div>
<div >
<h2>1.2 HTML5快速入门</h2>
（1.2的正文）
<div >
<h3>1.2.1 HTML与XHTML</h3>
（1.2.1的正文）
</div>
</div>
</div>
使用div元素，这段文档的结构就一目了然了。
但是，最初设计div元素的目的并不是为了区分文档的结构，而是为了使用样式。因此，从语义上来说，div元素是不具备任何语义的，换句话说，该元素是不适合用来划分页面文档结构的。
随着页面文档的不断复杂化，广大开发者发现，如果整个页面都依靠div元素来划分文档结构，对于含有大量用来划分文档结构的div元素和大量用来使用样式的div元素的一个页面，不仔细查看页面代码与样式代码，很难看出整个页面的文档结构。
2. HTML 5中的新增结构元素
在HTML 5中，为了使文档结构更加清晰，更容易阅读，增加了很多具有语义性的专门用来划分文档结构的结构元素。接下来，我们对这些结构元素进行概要介绍。
q section元素
section元素是对页面文档结构进行划分的最基本也是最主要的结构元素，主要用来对网站或应用程序中的页面上的内容进行层次结构上的划分。一个section元素通常由内容及其标题组成。
例如，针对代码清单1-2中的代码，我们可以使用section元素进行页面文档结构的划分，如代码清单1-3所示。
代码清单1-3 在HTML 5中使用section元素描述文档结构
<section>
<h1>1 HTML5的基础知识</h1>
<section>
<h2>1.1 HTML5概述</h2>
（1.1的正文）
<section>
<h3>1.1.1 HTML5是什么？</h3>
（1.1.1的正文）
</section>
<section>
<h3>1.1.2 HTML5中的新增API</h3>
（1.1.2的正文）
</section>
</section>
<section>
<h2>1.2 HTML5快速入门</h2>
（1.2的正文）
<section>
<h3>1.2.1 HTML与XHTML</h3>
（1.2.1的正文）
</section>
</section>
</section>
使用section元素时需要注意以下两点：
不要将section元素与div元素混淆使用。当一个容器需要直接定义样式或通过脚本定义行为时，推荐使用div元素而非section元素。
通常不建议为那些没有标题（h1～h6元素）的内容使用section，可以使用HTML 5轮廓工具（下载HTML 5轮廓工具的网址为“http://gsnedders.html5.org/outliner/”）来检查页面中是否有不包含标题部分的section。如果使用该工具进行检查后，在某个section的说明中有“untitled section”（没有标题的section）文字，这个section就可能属于使用不当（nav元素或aside元素没有标题是合理的）。
article元素
article元素代表文档、页面或应用程序中的所有“正文”部分，它所描述的内容应该是独立的、完整的、可以独自被外部引用的，可以是一篇博客、一篇报刊中的文章、一篇论坛帖子、一段用户评论、一个独立的插件，或任何独立于上下文中其他部分的内容。
在一个section元素或article元素内，应该只有一个标题，如果有两个标题，则第二个标题会被隐式放入一个新的section元素之内，如下面的代码所示，h2元素之后的内容会被隐式放入一个新的section元素内。
<article>
<h1>标题</h1>
<!--隐式创建出一个新的section元素-->
<h2>副标题</h2>
正文
</article>
nav元素
nav元素是一个可以作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不需要将所有的链接组都放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。例如，在页脚中通常会有一组链接，包括服务条款、首页和版权声明等，这时使用footer元素是最恰当的。一个页面可以拥有多个nav元素，作为页面整体或不同部分的导航。在nav元素中，一般以ul列表的形式来具体放置该组链接元素。
aside元素
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他有别于主要内容的部分。
aside元素主要有以下两种使用方法。
被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料和名词解释等。
在article元素之外的元素中使用，作为页面或站点全局的附属信息部分。最典型的形式是侧边栏，其中的内容可以是友情链接、博客中其他文章列表和广告单元等。
hgroup元素
hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常对h1～h6元素进行分组，如将一个内容区块的标题及其子标题划为一组。
通常，如果一个article元素或section元素只有一个主标题，是不需要hgroup元素的。但是，如果该元素内有一个主标题，主标题下又有一个或多个副标题，就需要使用hgroup元素了，代码如下所示。
<article>
<!--2个标题元素被统一放置在一个hgroup元素内-->
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
正文
</article>
header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个article元素或section元素的标题，也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。
footer元素
footer元素可以作为其上层父级内容区块或一个根区块的脚注。footer元素通常包括其相关区块的脚注信息，如作者、相关阅读链接以及版权信息等。
3. HTML 5中的大纲
在Word文档中，一份文档的大纲如下：
1. HTML 5的基础知识
1.1 HTML 5概述
（第一章中第一节的正文）
1.1.1 HTML5是什么？
（第一章中第一节第一小节的正文）
1.1.2 HTML5中的新增API
（第一章中第一节第二小节的正文）
1.2 HTML5快速入门
（第一章中第二节的正文）
1.2.1 HTML与XHTML
（第一章中第二节第一小节的正文）
HTML 5网页文档中的大纲也基本如此，只不过使用不同的结构元素来进行表达而已。换句话说，在HTML 5中，使用各种结构元素所描述出来的整个网页的层次结构，就是该网页的大纲。因此，在组织这份大纲的时候，不能使用div元素，因为div元素只能被当做容器，用在需要对网页中某个局部使用整体样式时。
有许多工具可以对HTML 5的网页文档进行分析，然后将该文档中的大纲以可视化的形式展现出来。前面提到的“http://gsnedders.html5.org/outliner/”网站中就有一个文档大纲分析工具，利用这分析工具对代码清单1-4所示文档进行分析，分析结果如图1-1所示。
图1-1 在线大纲分析工具的分析结果
代码清单1-4 大纲分析工具测试用代码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>大纲分析</title>
</head>
<section>
<h1>HTML5的基础知识</h1>
<section>
<h2>HTML5概述</h2>
（正文）
<section>
<h3>HTML5是什么？</h3>
（正文）
</section>
<section>
<h3>HTML5中的新增API</h3>
（正文）
</section>
</section>
<section>
<h2>HTML5快速入门</h2>
（正文）
<section>
<h3>HTML与XHTML</h3>
（正文）
</section>
</section>
</section>
图1-1中出现“1.Untitled Section”，是由于该网页文档中第一个元素即为section元素，缺乏整个网页标题元素。加入标题元素（h1），将代码清单1-4中的代码修改为如代码清单1-5所示，利用在线大纲分析工具分析出来的大纲如图1-2所示。
图1-2 加入网页标题后的页面大纲
代码清单1-5 添加了header元素后的大纲分析工具测试用代码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>大纲分析</title>
</head>
<h1>HTML5的基础知识</h1>
<section>
<h2>HTML5概述</h2>
（正文）
<section>
<h3>HTML5是什么？</h3>
（正文）
</section>
<section>
<h3>HTML5中的新增API</h3>
（正文）
</section>
</section>
<section>
<h2>HTML5快速入门</h2>
（正文）
<section>
<h3>HTML与XHTML</h3>
（正文）
</section>
</section>
看到这里，你也许会问，如果只加一个h1元素就可以分析出标题来，那么，还需要header元素干什么？答案是h1元素一般是用来显示文字标题的。事实上，在要定义为网页标题的整个内容中，往往并不只是显示文字，其中包括了大量的导航条、企业的logo图片和广告Flash等，这些内容都可以放在header元素中，作为整个网页标题的内容，而标题文字为h1元素中的文字，在大纲中显示该标题文字。但是，这里要说明的是，header元素本身的作用不是生成大纲，大纲是依靠header元素中的h1～h6元素来生成的，如果使用代码清单1-6中的代码，则生成的大纲如图1-3所示。
图1-3 header 元素本身并不用于生成大纲
代码清单1-6 在企业网站中使用图片来显示企业名称
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>企业网站</title>
</head>
<header>
<img src="title.jpg" alt="用来显示企业名称的图片">
</header>
<section>
<h2>企业描述</h2>
（正文）
</section>
这里有这样一个问题，在很多企业网站（或其他网站）中，企业的标题并不是以文字来显示的，而是为了视觉效果，放在图片中显示的。难道这种情况就不能生成大纲了吗？笔者认为，这里有个小技巧，在header元素中，使用如下代码，既可以用图片来显示企业名称，又可以生成大纲。
<header>
<h1><img src="title.jpg" alt="企业名称"></h1>
</header>
在header元素中使用这段代码后，生成的大纲如图1-4所示。
图1-4 在header元素中使用图片来生成大纲
与header元素相同，footer元素中如果没有标题元素（h1～h6元素）也不用于生成大纲。
在代码清单1-4或代码清单1-6的底部追加如下代码，生成的大纲将不会有任何变化。
<footer>
版权所有：陆凌牛
</footer>
另外，对于nav元素和aside元素来说，如果不在元素内部加入标题元素（h1～h6元素），生成大纲时会在该元素所在位置处添加一个“Untitled Section”的说明文字，但是根据HTML 5的开发文档记载，nav元素的作用是存放一组链接组，aside元素的作用是表示当前页面或文章的附属信息部分，允许不在这两个元素中添加标题，也就是说，大纲中存在对于这两个元素的内容为“Untitled Section”的说明文字是合理的。
在代码清单1-4的底部添加如下代码，生成的大纲如图1-5所示。
图1-5 在文档的底部添加nav元素与aside元素所生成的大纲
<nav>
<ul>
<li><a href="#">链接测试1</a></li>
<li><a href="#">链接测试2</a></li>
</ul>
</nav>
<aside>
侧边栏中的内容
</aside>
另外，在HTML 5中，body元素、blockquote元素、fieldset元素、td元素、details元素及figure元素被称为节根（sectioning roots）元素。这些元素的共同特征是拥有自己独立的大纲，并且这些元素内的section元素、article元素、标题元素（h1～h6元素）、nav元素以及aside元素等，只用在生成其父元素的大纲时，而不用在生成父元素的上层祖先元素的大纲时。
在代码清单1-7中，blockquote元素内部有一个h1元素，正是因为这个h1元素是位于blockquote元素内部的，所以在针对blockquote元素的父元素body生成页面大纲时，该h1元素并没有显示在大纲中，如图1-6所示。
图1-6 针对body元素生成大纲时节根元素中的子元素不起作用
代码清单1-7 针对body元素生成大纲时节根元素中的子元素不起作用
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<h1>网页标题</h1>
<blockquote>
<h1>节根元素内部标题</h1>
</blockquote>
</body>
掌握了HTML 5的文档结构、结构元素以及大纲的生成原则之后，就可以学习如何使用这些基础知识来搭建一个语义清晰、结构分明的HTML 5网站了。下面先介绍一个利用HTML 5中的各种结构元素搭建出来的博客网站。
1.1.2 博客首页的实现
1. 页面显示效果
接下来先来看一下这个案例中的博客首页在浏览器中的显示效果，如图1-7所示。
图1-7 博客首页
该页面主要分为四个部分：第一部分为网页标题部分，显示该博客网站的网站标题与网站导航链接；第二部分为网页侧边栏，显示博主自我介绍内容、博客中文章的所有分类链接以及网友对博客中文章的最新评论；第三部分为由博客中文章摘要组成的文章列表，即该博客首页中的主要内容；第四部分为页面底部的版权信息显示部分。
该页面的主体结构如图1-8所示。
图1-8 博客首页结构图
该页面生成的大纲如图1-9所示。
图1-9 博客首页生成的大纲
接下来详细介绍如何在该网页的各个组成部分中使用各种结构元素来搭建整体网页结构，以及在大纲中为什么会有几个说明为“Untiled Section”的节，出现这样的节是否是正常的、合理的。
2. 构建网页标题
首先来看一下该网页中用来显示网站标题与网站导航的网页标题部分，该部分的页面显示效果如图1-10所示。
图1-10 博客首页的网页标题部分
该部分的结构如图1-11所示。
图1-11 博客首页的网页标题部分的结构图
前面介绍过，header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个article元素或section元素的标题。在博客首页中，一般将博客的标题与整个网站的导航链接作为整体网页的标题放置在header元素中。
另外，在header元素内部使用了一个nav元素。如前所述，nav元素是一个可以作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。这里将整个网站的导航链接放在该nav元素中。
该部分的结构代码如下所示。
<header>
<h1>HTML5 Web开发工作室</h1>
<nav>
...
</nav>
</header>
在该网页中，由这部分结构代码生成的大纲如图1-12所示。
图1-12 博客首页的网页标题部分生成的大纲
由于该网页使用了一个header元素来显示网页标题，并且在header元素的内部使用了h1元素，元素中的文字为“HTML5 Web开发工作室”，因此整个大纲的标题为“1.HTML5 Web开发工作室”。在header元素内部，使用nav元素来显示整个网站的导航链接，并且没有给nav元素添加标题（在HTML 5中，并不强求对nav元素添加标题），所以这个没有标题的nav元素在大纲中生成标题为“1.Untitled Section”的节。
最后，通过代码清单1-8来了解这个header元素的代码（包括整个网页的开头部分）。
代码清单1-8 网页标题部分的代码
<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML5 Web开发工作室</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="" name="keywords">
<meta content="" name="description">
<link href="main.css" type="text/css" rel="stylesheet"/>
<div id="blog">
<header id="bloghead">
<div id="blogTitle">
<h1 id="blogname">HTML5 Web开发工作室</h1>
<div id="bloglink">
http://blue-butterfly.net/html5blog/main.html
</div>
</div>
<nav id="blognav">
<ul id="blognavInfo">
<li>
<a href="http://blue-butterfly.net/html5blog/main.html"id="on">
首页
</a>
</li>
<li>
<a href="articlelist_1792358825_0_1.html">博文目录</a>
</li>
</ul>
</nav>
</header>
在这段代码中，在整个body元素（HTML 5中可以将body元素省略不写）内部放置了一个作为容器的div元素，以显示该网页的背景图，样式代码如下所示。
div#blog {
background-position: 50% 0%;
background-image: url(images/blogb.jpg);
width: 100%;
background-repeat: no-repeat;
}
使用ul列表元素来显示网站导航链接，并在样式代码中使用list-style属性控制列表编号不被显示，样式代码如下所示。
ul{
list-style:none;
}
3. 构建侧边栏
接下来看一下该网页中用来显示博主介绍、博客中所有文章分类以及网友评论的侧边栏部分。
该部分在浏览器中的显示结果如图1-13所示。
图1-13 博客首页的侧边栏部分
该部分的结构如图1-14所示。
图1-14 博客首页的侧边栏部分的结构图
前面介绍过，在HTML 5中，aside元素专门用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及有别于主要内容的部分。在博客首页中，可以将博主介绍、博主的联系信息、博客文章的分类、最近访问的网友信息、网友对博客文章的评论、相关文章的链接、其他网站的友情链接等很多与网站相关的但不能包含在当前网页的主体内容中的其他附属内容放置在aside元素中。在本例中，将博主介绍、博客文章分类及其链接（单击链接后主画面跳转到该分类的文章目录显示画面）、网友评论及其链接（单击链接后跳转到被评论的文章显示画面）放在了侧边栏中。
用来显示侧边栏的aside元素的内部结构代码如下所示。
<aside>
<section>
<header>
<h1>工作室介绍</h1>
</header>
...
</section>
<section>
<header>
<h1>分类</h1>
</header>
<nav>
...
</nav>
</section>
<section>
<header>
<h1>评论</h1>
</header>
<nav>
...
</nav>
</section>
</aside>
在该网页中，侧边栏部分生成的大纲如图1-15所示。
图1-15 侧边栏部分生成的大纲
HTML 5会根据一个aside（侧边栏）元素在大纲中生成与之对应的一个节。在本例中，由于没有对侧边栏添加标题（在HTML 5中，不强求对侧边栏添加标题），而且侧边栏位于整体网页结构中的第二部分（第一部分为网页标题），因此在大纲中生成标题为“2.Untitled Section”的节。在aside元素中，因为使用了三个section元素，分别显示博主介绍、博客文章分类、网友评论这三个栏目的内容，并且三个section元素内部都有一个header元素，在header元素内部都使用了h1标题元素，标题文字分别为“工作室介绍”、“分类”、“评论”，所以在大纲中的侧边栏一节（“2.Untitled Section”）内部分别生成标题为“1.工作室介绍”、“2.分类”与“3.评论”的节。在博客文章分类栏目与网友评论栏目中使用了两个nav元素来分别显示博客文章的分类及其链接与网友的评论及其链接，所以在大纲中，根据两个nav元素分别生成两个标题为“1.Untitled Section”的节。
在博主介绍栏目中，使用figure元素来显示博主头像。在HTML 5中，figure元素用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生任何影响。figure元素所表示的内容可以是图片、统计图或代码示例。
figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部，可以书写在figure元素内的其他从属元素的前面或后面。一个figure元素内最多允许放置一个figcaption元素，但允许放置多个其他元素。
本例中figure元素中的代码如下所示。
<figure>
<img src="images\tyl.jpg" alt="HTML5 Web开发工作室"/>
<figcaption>HTML5 Web开发工作室</figcaption>
</figure>
可以在样式代码中分别指定figure元素与figcaption元素的样式，代码如下所示。
figure{
margin-left:15px;
margin-top:0px;
}
figcaption{
color:gray;
font-weight:bold;
padding-left:25px;
}
在网友评论栏目中，使用time元素与pubdate属性来显示每篇评论的发布时间。在HTML 5中，time元素代表24小时中的某个时刻或某个日期，time元素的putdate属性代表了评论的发布日期和时间（关于figure元素与time元素的详细介绍，可以参阅笔者所著《HTML 5与CSS3权威指南》一书），代码类似下面所示。
<time datetime="2011-04-01T16:59" pubdate>04-01 16:59</time>
可以对time元素使用样式，代码如下所示。
time{
color:#637160;
font-size:12px;
}
侧边栏部分的完整代码如代码清单1-9所示。
代码清单1-9 博客首页的侧边栏部分的代码
<div id="blogbody">
<div id="column_1">
<aside>
<section id="conn1">
<header id="connHead1">
<h1>工作室介绍</h1>
</header>
<div id="connBody1">
<div>
<figure>
<img src="images\html5.jpg" alt="HTML5 Web开发工作室
<figcaption>HTML5 Web开发工作室</figcaption>
</figure>
</div>
<div id="divSpecial">
<p>本工作室专业从事使用HTML 5技术结合ASP.NET与JAVA语言编写的各类Web网站，Web应用程序的研发工作。</p>
<p>工作室负责人陆凌牛发表书籍：</p>
<p>
<a target="_blank"
href="http://product.dangdang.com/product.aspx?
product_id=21047278&ref=search-1-pub">
《HTML 5与CSS 3权威指南》
</a>
</p>
<p>读者咨询电话：13063968069</p>
<p>读者咨询QQ：240824399</p>
</div>
</div>
<div id="connFoot1"></div>
</section>
<section id="conn2">
<header id="connHead2">
<h1>分类</h1>
<span id="edit1">
<a href="javascript:;"onclick="window.CateDialog.show();return false;">
[<cite>管理</cite>]
</a>
</span>
</header>
<div id="connBody2">
<nav id="classList">
<ul>
<li id="dot1">
<a target="_blank" href="#">全部博文</a>
<em>(62)</em>
</li>
<li id="dot2">
<a href="#" target="_blank">HTML 5</a>
<em>(40)</em>
</li>
<li id="dot3">
<a href="#" target="_blank">
ASP.NETMVC3快速入门
</a>
<em>(10)</em>
</li>
<li id="dot4">
<a href="#" target="_blank">C#</a>
<em>(8)</em>
</li>
<li id="dot5">
<a href="#" target="_blank">ASP.NETMVC3书店</a>
<em>(4)</em>
</li>
</ul>
</nav>
</div>
<div id="connFoot2"></div>
</section>
<section id="conn3">
<header id="connHead3">
<h1>评论</h1>
</header>
<div id="connBody3">
<nav id="zComments">
<ul id="zCommentsUl">
<li id="commentsCell_linedot1">
<div id="commentsH1">
<span id="commentsName_txtc_dot1">
<a href="#" target="_blank" title="随风">随风
</a>
</span>
<time datetime="2011-04-01T16:59"pubdate>04-01 16:59</time>
</div>
<div id="commentsContants1">
<div id="commentsContantsTxt1">
<a href="#" target="_blank">
博主，您好。为什么我在url中输…
</a>
</div>
</div>
</li>
<li id="commentsCell_linedot2">
<div id="commentsH2">
<span id="commentsName_txtc_dot2">
<a href="#" target="_blank"
title="540821160">540821160</a>
</span>
<time datetime="2011-03-31T20:03"
pubdate>03-31 20:03</time>
</div>
<div id="commentsContants2">
<div id="commentsContantsTxt2">
<a href="#" target="_blank">
呵呵 一定要学会 哈哈
</a>
</div>
</div>
</li>
<li id="commentsCell_linedot3">
<div id="commentsH3">
<span id="commentsName_txtc_dot3">
[匿名] 新浪网友
</span>
<time datetime="2011-03-31T11:39"
pubdate>03-31 11:39</time>
</div>
<div id="commentsContants3">
<div id="commentsContantsTxt3">
<a href="#" target="_blank">
很好的文章。非常感谢楼主。看…
</a>
</div>
</div>
</li>
<li id="commentsCell_linedot4">
<div id="commentsH4">
<span id="commentsName_txtc_dot4">
[匿名] 新浪网友
</span>
<time datetime="2011-03-31T09:35"
pubdate>03-31 09:35</time>
</div>
<div id="commentsContants4">
<div id="commentsContantsTxt4">
<a href="#" target="_blank">
感谢楼主的回复，重新生成以下…
</a>
</div>
</div>
</li>
</ul>
</nav>
</div>
<div id="connFoot3"></div>
</section>
</aside>
</div>
在这段代码中，第一行的id为“blogbody”的div是一个容器元素，使用它将该网页的当中一块（包括左边的侧边栏区域与右边的文章摘要列表区域）与网页顶部的标题区域及网页底部的脚注区域（显示版权信息的footer元素）区分开来。该div的样式代码如下所示。
div#blogbody{
margin: 0px;
}
在id为“blogbody”的div元素的内部，又使用了一个id为“column_1”的div元素，用来将左边的侧边栏部分与右边的网页主体部分进行区分。注意，这段代码中最后一行的“</div>”元素结束标记仅表示id为“column_1”的div元素的结束，并不表示id为“blogbody”的div元素的结束。
id为“column_1”的div元素的样式代码如下所示。
[id^=column_]{
display:inline;
float:left;
overflow:hidden;
}
div#column_1{
margin-left:20px;
width:210px;
}
4. 构建网页主体内容
接下来看一下这个博客首页中的主体显示内容部分，即文章摘要列表显示部分。该部分在浏览器中的显示结果如图1-16所示。
图1-16 博客首页的主体内容部分
该部分的整体内容被放置在一个section元素中，该section元素的内部结构如图1-17所示。
图1-17 显示博客首页的主体内容部分的section元素的内部结构图
该section元素内部的结构代码如下所示。
<section>
<header>
<h1>分类</h1>
</header>
<section>
<header>
<h1>HTML5中新增number元素的ValueAsNumber属性</h1>
</header>
...
<footer>
...
</footer>
</section>
<section>
<header>
<h1>在HTML5新增的日期及时间元素中使用step属性</h1>
</header>
...
<footer>
...
</footer>
</section>
<section>
<header>
<h1>如何将datetime元素与datetime-local元素应用在Web程序…</h1>
</header>
...
<footer>
...
</footer>
</section>
<section>
<header>
<h1>ASP.NET MVC3书店--第四节 模型与数据库访问</h1>
</header>
...
<footer>
...
</footer>
</section>
<footer>
...
</footer>
</section>
该部分生成的大纲如图1-18所示。
图1-18 根据显示博客首页的主体内容的section元素生成的大纲
在这个section元素内部，使用了一个header元素、四个section元素、一个footer元素，其中header元素的标题为“分类”，所以在大纲中生成标题为“3.分类”的节。这个section元素内部的四个section元素中又各自有一个header元素，其中都存放了一个显示标题的h1元素，标题分别显示为“HTML5中新增number元素的ValueAsNumber属性”、“在HTML5新增的日期及时间元素中使用step属性”、“如何将datetime元素与datetime-local元素应用在Web程序…”和“ASP.NET MVC3书店—第四节 模型与数据库访问”，所以在大纲中分别生成标题为“1. HTML5中新增number元素的ValueAsNumber属性”、“2.在HTML5新增的日期及时间元素中使用step属性”、“3. 如何将datetime元素与datetime-local元素应用在Web程序…”和“4. ASP.NET MVC3书店—第四节 模型与数据库访问”的四个节。另外，四个section元素中又各自有一个footer元素，存放每篇文章的阅读链接（单击链接后打开该文章）、评论链接（单击链接后打开该文章并跳转到评论部分）、被转载次数与收藏链接（单击链接后收藏该文章）。在显示网页主体内容部分的section元素的结尾处又使用了一个footer元素，显示对文章摘要列表进行分页。由于footer元素中没有标题元素（h1～h6元素）用于生成大纲，所以在大纲中没有根据这些footer元素生成任何节。
显示博客首页的主体内容部分的section元素的内部代码如代码清单1-10所示。
代码清单1-10 显示博客首页的主体内容的section元素的内部代码
<div id="column_2">
<section id="conn4">
<header id="connHead4">
<h1>分类</h1>
<span id="edit2">
<a href="javascript:;"
onclick="window.CateDialog.show();return false;">
[<cite>管理</cite>]
</a>
</span>
</header>
<div id="connBody4">
<div id="bloglist">
<section>
<header>
<div id="blog_title_h1">
<h1 id="blog_title1">
<a href="#" target="_blank">
HTML5中新增number元素的ValueAsNumber属性
</a>
</h1>
<img title="此博文包含图片" src="images/preview.gif"
id="icon1">
<time datetime="2011-04-05T18:30" pubdate>
(2011-04-05 18:30)</time>
</div>
<div id="articleTag1">
<span id="txtb1">分类：</span>
<a target="_blank" href="#">HTML5</a>
</div>
</header>
<div id="content1">
<p> 在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取该元素中的数值。</p>
<p> 例如在如下所示的代码中，使用三个number元素，在前两个元素中输入数值，单击计算按钮，在第三个元素中显示前两个元素中数值的合计值。</p>
</div>
<footer id="tagMore1">
<div id="tag_txtc1">
<a href="#" target="_blank">阅读</a> ┆
<a target="_blank" href="#">评论</a>
┆ 还没有被转载┆
<a href="javascript:;" onclick="return false;">
收藏
</a>
</div>
<div id="more1">
<span id="smore1">
<a href="#" target="_blank">查看全文</a>>>
</span>
</div>
</footer>
</section>
<section>
<header>
<div id="blog_title_h2">
<h1 id="blog_title2">
<a href="#" target="_blank">
在HTML5新增的日期及时间元素中使用step属性
</a>
</h1>
<img title="此博文包含图片" src="images/preview.gif"
id="icon2">
<time datetime="2011-04-04T15:56" pubdate>
(2011-04-04 15:56)</time>
</div>
<div id="articleTag2">
<span id="txtb2">分类：</span>
<a target="_blank" href="#">HTML5</a>
</div>
</header>
<div id="content2">
<p> 在HTML5中，可以使用step属性来对在input元素中可以输入的日期或数值进行一个限定。例如，使用如下所示的代码：</p>
</div>
<footer id="tagMore2">
<div id="tag_txtc2">
<a href="#" target="_blank">阅读</a> ┆
<a target="_blank" href="#">评论</a>
┆ 还没有被转载┆
<a href="javascript:;" onclick="return false;">
收藏
</a>
</div>
<div id="more2">
<span id="smore2"><a href="#" target="_blank">
查看全文</a>>>
</span>
</div>
</footer>
</section>
<section>
<header>
<div id="blog_title_h3">
<h1 id="blog_title3">
<a href="#" target="_blank">
如何将datetime元素与datetime-local元素应用在Web程序…
</a>
</h1>
<img title="此博文包含图片" src="images/preview.gif"
id="icon3">
<time datetime="2011-04-04T00:25" pubdate>
(2011-04-04 00:25)
</time>
</div>
<div id="articleTag3">
<span id="txtb3">分类：</span>
<a target="_blank" href="#">HTML5</a>
</div>
</header>
<div id="content3">
<p> 本文讨论在正式的网站或Web应用程序中，应该如何正确使用HTML5中新增的datetime元素与datetime-local元素。
</p>
<p><strong>1.datetime元素的值</strong></p>
<p> 首先要说明的是，datetime元素的作用是什么？与datetime-local元素的区别是什么？这两个元素的区别在于：datetime-local是专门用来设置本地日期和时间（针对时区而言）的，datetime元素是专门用来设置格林威治日期和时间的。</p>
<p> 那么应该怎样设置与读取这两个元素中的</p>
</div>
<footer id="tagMore3">
<div id="tag_txtc3">
<a href="#" target="_blank">阅读</a> ┆
<a target="_blank" href="#">评论</a>
┆ 还没有被转载┆
<a href="javascript:;" onclick="return false;">
收藏
</a>
</div>
<div id="more3">
<span id="smore3">
<a href="#" target="_blank">查看全文</a>>>
</span>
</div>
</footer>
</section>
<section>
<header>
<div id="blog_title_h4">
<h1 id="blog_title4">
<a href="#" target="_blank">
ASP.NET MVC3书店--第四节 模型与数据库访问
</a>
</h1>
<img title="此博文包含图片" src="images/preview.gif"
id="icon4">
<time datetime="2011-03-25T20:34"
pubdate>(2011-03-25 20:34)</time>
</div>
<div id="articleTag4">
<span id="txtb4">分类：</span>
<a target="_blank" href="#">ASP.NETMVC3书店</a>
</div>
</header>
<div id="content4">
<p>
现在，我们已经能够把静态数据从控制器传入我们的视图模板中了。接下来，我们将要使用数据库中的数据。在本教程中，我们使用SQL Server Express来作为我们的数据库引擎。
</p>
<p>
<strong>
<span>
4.1
<span> </span>
</span>
<span>使用Entity Framework code-first</span>
</strong>
</p>
</div>
<footer id="tagMore4">
<div id="tag_txtc4">
<a href="#" target="_blank">阅读</a>┆
<a target="_blank" href="#" >评论</a>┆
还没有被转载┆
<a href="javascript:;" onclick="return false;">
收藏
</a>(0)
</div>
<div id="more4">
<span id="smore4"><a href="#" target="_blank">
查看全文</a>>>
</span>
</div>
</footer>
</section>
<footer id="SG_page">
<ul id="SG_pages">
<li id="SG_pgon" title="当前所在页">1</li>
<li title="跳转至第 2 页"><a href="#">2</a></li>
<li title="跳转至第 3 页"><a href="#">3</a></li>
<li title="跳转至第 4 页"><a href="#">4</a></li>
<li id="SG_pgnext" title="跳转至第 2 页">
<a href="#">下一页 ></a>
</li>
<li id="SG_pgttl" title="">共4页</li>
</ul>
</footer>
</div>
</div>
<div id="connFoot4"> </div>
</section>
</div>
</div>
在这段代码中，在显示网页主体内容的section元素外面，使用了一个id为“column_2”的div元素，用来将右边的网页主体部分与左边的侧边栏部分进行区分。该div元素的样式代码如下所示。
div#column_2{
margin-left:10px;
width:740px;
}
除了这个充当容器的div元素之外，代码中的其他地方也使用了比较多的div元素来作为对某个局部区域使用样式的容器元素，这里不再一一列出样式代码。注意，该代码中最后一行的“</div>”这个结束标记，用于结束代码清单1-9中的id为“blogbody”的div元素，表示网页中央部分（与网页顶部的网页标题部分及网页底部的版权信息显示部分进行区分）已经结束。
5. 构建版权信息
最后来看一下该页面中位于网页底部的版权信息显示部分，该部分在浏览器中的显示效果如图1-19所示。
图1-19 版权信息显示部分
该部分被放置于一个footer元素中，因为没有使用标题，所以也没有被显示在大纲中。
该部分代码如代码清单1-11所示。
代码清单1-11 版权信息显示部分的代码
<footer id="blogfooter">
<div>
<p>版权所有:HTML5 Web开发工作室 Copyright 2005 All Rights
Reserved</p>
</div>
<div>联系QQ:240824399 联系电话：13063968069</div>
</footer>
</div>
该部分代码的最后一个“</div>”元素结束标记表示代码清单1-8中id为“blog”的div元素已经结束。
1.1.3 文章显示页面的实现
接下来看一下在该博客网站中打开某篇文章时显示的文章显示页面，该页面在浏览器中显示的效果如图1-20所示。
图1-20 文章显示页面
该页面与博客首页有些相似，主要分为四个部分，第一部分为网页标题部分，显示该博客网站的网站标题、网站链接与网站导航。第二部分为网页侧边栏，显示博主自我介绍内容、博客文章的所有分类链接以及网友对博客中文章的最新评论。这两部分与首页中的网页标题部分及侧边栏部分完全相同。第三部分为查看文章的内容及网友评论部分，也是该页面的主要内容。第四部分为页面底部显示的版权信息内容部分。
该页面的主体结构也与博客首页的主体结构大致相同，只是在博客首页中使用section元素来显示文章摘要列表，而在文章显示页面中，使用section元素来显示文章内容与网友的评论内容。该页面的主体结构图也与博客首页中的主体结构图相似，如图1-21所示。
图1-21 文章显示页面的主体结构图
根据文章显示页面生成的大纲如图1-22所示。
图1-22 根据文章显示页面生成的大纲
网页标题部分与侧边栏部分如何生成大纲，在“1.1.2博客首页的实现”中已经介绍过，这里不再赘述。接下来介绍该页面中的主体部分，即文章内容及网友评论部分中是如何使用各种结构元素来搭建该部分的组织结构并生成这个大纲的。
接下来重点介绍文章显示页面中文章内容及网友评论部分在浏览器中的显示效果，如图1-23所示。
图1-23 文章内容及网友评论部分
该部分的整体内容被放置在一个section元素中，该section元素的内部结构如图1-24所示。
图1-24 显示文章内容及网友评论的section元素的内部结构图
该section元素内部的结构代码如下所示。
<section>
<header>
<h1>分类</h1>
</header>
<article>
<header>
<h1>ASP.NET MVC3书店--第三节 视图与视图模型</h1>
</header>
...
<section>
<h4>评论</h4>
...
</section>
</article>
</section>
在该网页中，该部分生成的大纲如图1-25所示。
图1-25 根据文章内容与评论部分生成的大纲
在显示文章内容与评论部分的section元素中，首先使用了一个header元素，在该元素内部使用了一个文字为“分类”的标题元素h1，所以在大纲中生成一个标题为“3.分类”的节。在header元素后面，紧接着使用了一个article元素，用来显示文章内容与网友评论。在这个article元素内部，使用了一个header元素，在该元素内部，又使用了一个文字为“ASP. NET MVC3书店—第三节 视图与视图模型”的标题元素h1，所以在大纲中生成一个标题为“1. ASP.NET MVC3书店—第三节 视图与视图模型”的节。在article元素内部，在header元素后面，显示了标题为“ASP.NET MVC3书店—第三节 视图与视图模型”的文章的全部内容，在文章叙述完毕之后，使用了一个section元素，在这个元素内部，又使用了一个header元素。在这个header元素之中，又使用了一个文字为“评论”的标题元素h4，所以在大纲中生成一个标题为“1.评论”的节。
另外，在标题为“评论”的section元素中，使用了一个Iframe内嵌网页，在该网页中使用了一个表单，在该表单中放置了一个用来写评论内容的textarea元素，以及一个用来提交评论内容的“发评论”按钮。
最后，通过代码清单1-12来了解显示文章内容与网友评论的section元素中的全部内容。
代码清单1-12 用来显示文章内容与网友评论的section元素的完整代码
<div id="column_2">
<section id="conn4">
<header id="connHead4">
<h1>分类</h1>
<span id="edit1">
<a href="javascript:;" onclick="window.CateDialog.show();
return false;">
[<cite>管理</cite>]
</a>
</span>
</header>
<div id="connBody5">
<article id="bloglist">
<header>
<div id="blog_title_h1">
<h1 id="blog_title1">
<a href="#" target="_blank">
ASP.NET MVC3书店--第三节 视图与视图模型
</a>
</h1>
<img title="此博文包含图片" src="images/preview.gif"
id="icon1">
<time datetime="2011-04-05T18:30" pubdate>
(2011-04-05 18:30)
</time>
</div>
<div id="articleTag1">
<span id="txtb1">分类：</span>
<a target="_blank" href="#">HTML5</a>
</div>
</header>
<div id="content1">
<p> 现在，我们已经能够把静态数据从控制器传入我们的视图模板中了。接下来，我们将要使用数据库中的数据。在本教程中，我们使用SQL Server Express来作为我们的数据库引擎。</p>
<p>
<strong>
4.1 使用Entity Framework code-first
连接数据库
</strong>
</p>
<p> 在本教程中，我们使用.NET 4中的Entity Framework(EF)来访问数据库以及对数据库中的数据进行增删查改操作。EF是一个非常灵活的对象关系映射（ORM：object relational mapping）数据库API，它使得开发者可以用一种面向对象的方式在数据库中进行增删查改操作。</p>
<p> Entity Framework 4支持一种被称为code-first的开发范例。code-first允许你用书写简单类的方式来创建模型对象（也称POCO对象），甚至可以直接通过模型类来创建数据库。为了使用code-first,首先需要安装EFCodeFirst类库。</p>
<p><strong>4.2 使用NuGet来安装EFCodeFirst</strong></p>
<p> 这里我们打算使用NuGet包管理器（安装ASP.NET MVC3时会同时自动被安装）来在本应用程序中添加EFCodeFirst类库。</p>
<p> 单击“工具”菜单下的“Library Package Manager"子菜单下的“Add Library Package Reference"菜单选项,如图4-1所示。</p>
</div>
<div id="tagMore1">
<div id="tag_txtc1">
<a href="#" target="_blank">阅读</a> ┆
<a target="_blank" href="#">评论</a>
┆ 还没有被转载┆
<a href="javascript:;" onclick="return false;">
收藏
</a>
</div>
</div>
<section>
<div id="allComm">
<div id="allCommTit1">
<strong><h4>评论</h4></strong>
</div>
<ul id="cmp_revert">
<li id="linedot1">
<div id="revert_Cont1">
<p>
<span id="revert_Tit1">新浪网友</span>
<span id="revert_Time1">
<time datetime="2011-03-26T23:18:41"pubdate>
2011-03-26 23:18:41
</time>
</span>
</p>
<div id="revert_Inner_txtb1">
<br>按如下步骤操作：<br>1.在vs2010中，打开Package Manager Console。（工具->Library Package
Manager-> Package Manager
Console）
<br>2.在提示符中键入如下命令：install-package EntityFramework，然后回车，稍等片刻即可完成安装
</div>
</li>
<li id="linedot2">
<div id="revert_Cont2">
<p>
<span id="revert_Tit2">
<a href="#" target="_blank">追风阳光</a>
</span>
<span id="revert_Time2">
<time datetime="2011-03-27T09:54:26"
pubdate>
2011-03-27 09:54:26
</time>
</span>
</p>
<div id="revert_Inner_txtb2">
<br>好了，按上面新浪网友说的，一下子就成了。谢谢博主和新浪网友
</div>
</div>
</li>
<li id="linedot3">
<div id="revert_Cont3">
<p>
<span id="revert_Tit3">新浪网友</span>
<span id="revert_Time3">
<time datetime="2011-03-31T14:33:38"pubdate>
2011-03-31 14:33:38
</time>
</span>
</p>
<div id="revert_Inner_txtb3">
<br>问下<br>from in db.A
<br>join b in
db.B on a.BId equery equals b.Id
<br>select new <br>{
<br>a.Aname,<br>b.Bname<br>}这样这么返回给View
</div>
<div id="nlinedot1">
<p>
<span id="revert_Tit4">博主回复：</span>
<span id="revert_Time4">
</p>
<p id="myReInfo1">
没有太大分别，把模型组建好，然后把模型传给视图，可以在模型中用一个类包含另一个类，方法可以参照ASP.NET MVC3书店中的有关做法
</p>
</div>
</div>
</li>
<li id="linedot4">
<div id="revert_Cont4">
<p>
<span id="revert_Tit5">新浪网友</span>
<span id="revert_Time5">
<time datetime="2011-04-01T12:03:33"
pubdate>
2011-04-01 12:03:33
</time>
</span>
</p>
<div id="revert_Inner_txtb4">
EdmMetadata 是什么表啊
</div>
<div id="nlinedot2">
<p>
<span id="revert_Tit6">博主回复：</span>
<span id="revert_Time6">
</p>
<p id="myReInfo2">
Entity Framework code-first使用的系统表
</p>
</div>
</div>
</li>
<li id="linedot5">
<div id="revert_Cont5">
<p>
<span id="revert_Tit7">
<a href="#" target="_blank">qmialo</a>
</span>
<span id="revert_Time7">
<time datetime="2011-04-01T12:30:59"
pubdate>
2011-04-01 12:30:59
</time>
</span>
</p>
<div id="revert_Inner_txtb5">
<br>var genreModel =
storeDB.Genres.Include("Books").Single(g
> g.GenreId ==id);
<br>这种方法确实不错，在查询类别的同时把该类别下的书籍也查出来了，但是如果类别下的书籍有几千，几万本，一次性查出可能就很慢了，博主是咋解决的
</div>
<div id="nlinedot3">
<p>
<span id="revert_Tit8">博主回复：</span>
<span id="revert_Time8">
<time
datetime="2011-04-01T18:32:59"
pubdate>
2011-04-01 18:32:59
</time>
</span>
</p>
<p id="myReInfo3">数据量大的时候还是建议使用存储过程</p>
</div>
</div>
</li>
</ul>
</div>
<div id="writeComm">
<iframe src="writeComm.jsp" width="90%" height="300">
</iframe>
</div>
</section>
</article>
</div>
</section>
</div>
1.2 案例2：用HTML 5中的结构元素构建一个企业网站
本节通过一个使用HTML 5中各种结构元素构建企业网站的案例来讲述如何使用HTML 5中的各种新增元素，搭建出一个语义清晰、结构分明的HTML 5版的企业网站。本节所介绍的网站是根据江苏省常州市蓝博纺织机械有限公司正在运行的HTML 4版的网站改编的，而非该企业正在运行的网站。
本案例主要讲述该网站的两个页面，一个页面为该网站的首页，即本节的主要内容，另一个为该网站的联系方式页面，作为补充内容，该网站中其他页面结构均与这两个页面类似，故不做介绍。
1.2.1 首页的实现
1.页面显示效果
首先来看一下本节要介绍的网站的首页在浏览器中的显示效果，如图1-26所示。
图1-26 网站的首页
该页面主要分为四个部分，第一部分为网页标题部分，显示该企业网站的网站标题，网站导航链接。第二部分为网页侧边栏，显示该企业的产品分类与联系方式。第三部分为该企业网站首页中所展示的主要内容，第四部分为页面底部的企业版权信息与联系方式显示。
该页面的整体结构图如图1-27所示。
图1-27 网站首页的整体结构图
该页面生成的大纲如图1-28所示。
图1-28 网站首页的大纲
接下来具体介绍在该页面的各个部分中是如何使用HTML 5的各种结构元素来搭建这个首页的组织结构并生成这个大纲的。
2.构建网页标题
首先来看一下该首页的网页标题部分。该部分在浏览器中的显示效果如图1-29所示。
图1-29 网站首页的网页标题部分
该部分被放置在一个header元素中。在企业网站中，通常将企业名称、企业logo图片、整个网站的导航链接，以及一些广告图片、广告Flash等放置在header元素中，作为网页标题部分。
网页标题部分的结构图如图1-30所示。
图1-30 网页标题部分的结构图
在这个网页标题部分中，使用了一个nav元素来显示整个网站的导航链接。
该部分的结构代码如下所示。
<header>
<h1>
<img id="imglogo1" src="images/logo.jpg" alt="常州蓝博纺织机械有限公司"/>
</h1>
<nav>
...
</nav>
...
</header>
在该网站首页中，由于使用图片来显示企业名称，因此通过将图片放在h1元素中并将图片元素img的alt属性设置为企业名称的办法在大纲中将企业名称作为整个网页的标题。
在该网页中，这段结构代码生成的大纲如图1-31所示。
图1-31 网页标题部分生成的大纲
由于在header元素中使用了nav元素来显示网站导航链接，并且没有给这个nav元素添加标题，因此生成“1.Untitled Section”一节。
网页标题部分的完整代码如代码清单1-13所示。
代码清单1-13 网页标题部分的完整代码
<!DOCTYPE html>
<meta charset=utf-8 />
<title>常州蓝博纺织机械有限公司</title>
<link href="main.css" type="text/css" rel="stylesheet"/>
<header id="webTitle">
<div id="divTop1">
<div id="TopLeft">
<h1>
<img id="imglogo1" src="images/logo.jpg"
alt="常州蓝博纺织机械有限公司"/>
</h1>
</div>
<div id="TopMid"></div>
<div id="TopRight"><img id="imglogo2" src="images/logo_2.jpg"
usemap="#Map"></div>
<map name="Map">
<area shape="rect" coords="32,5,93,21" href="#"
alt="常州蓝博纺织机械有限公司">
<area shape="rect" coords="103,3,167,22" href="#"
alt="常州蓝博纺织机械有限公司" >
</map>
</div>
<nav>
<ul id="topNavUrl">
<li><img id="img1" src="images/menu/menu_1.jpg"/>
</li><li>
<a href="index.asp"><img id="img_even1"
src="images/menu/menu_2.jpg"/></a>
</li><li><img id="img_old1" src="images/menu/menu_3.jpg"/>
</li><li>
<a href="about.asp">
<img id="img_even2" src="images/menu/menu_4.jpg"/>
</a>
</li><li><img id="img_old2" src="images/menu/menu_5.jpg"/>
</li><li>
<a href="product.asp"><img id="img_even3"
src="images/menu/menu_6.jpg"/></a>
</li><li><img id="img_old3" src="images/menu/menu_7.jpg"/>
</li><li>
<a href="news.asp"><img id="img_even4"
src="images/menu/menu_8.jpg"/></a>
</li><li><img id="img_old4" src="images/menu/menu_9.jpg"/>
</li><li>
<a href="download.asp"><img id="img_even5"
src="images/menu/menu_10.jpg"/></a>
</li><li><img id="img_old5" src="images/menu/menu_11.jpg"/>
</li><li>
<a href="gbook.asp"><img id="img_even6"
src="images/menu/menu_12.jpg"/></a>
</li><li><img id="img_old6" src="images/menu/menu_13.jpg"/>
</li><li>
<a href="contact.asp"><img id="img_even7"
src="images/menu/menu_14.jpg"/></a>
</li><li><img id="img_old7" src="images/menu/menu_15.jpg"/>
</li><li>
<a href="http://mail.czlbkj.cn"><img id="img_even8"
src="images/menu/menu_16.jpg"/></a>
</li><li><img id="img_old8" src="images/menu/menu_17.jpg"/></li>
</ul>
<nav>
<div id="sectionTop2">
<div id="Bottom1"><img src="images/index_4.jpg"/></div>
<div id="FlashDiv">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=6,0,29,0"
type="application/x-shockwave-flash"
width="900" height="200" >
<param name="movie" value="images/index.swf">
<param name="quality" value="high">
<param name=wmode value=transparent>
<embed src="images/index.swf"
quality="high"
pluginspage="http://www.macromedia.com/go/
getflashplayer"
type="application/x-shockwave-flash"
width="900"
height="200"/>
</object>
</div>
<div id="Bottom2"><img src="images/index_6.jpg"/></div>
</div>
</header>
在这段代码中，在nav元素内部，使用了ul列表来显示网站导航链接，为了避免在li列表项目元素的背景中使用的图片与图片之间存在裂痕，必须将前一个li元素的结束标记</li>与后一个li元素的开始标记<li>写在同一行中，书写成“</li><li>”的形式。另外，在样式代码中，需要使用如下的代码，使li列表项目元素的项目编号不显示，并且并排显示。
<ul#topNavUrl li{
list-style::none;
display: inline-block;
}
3.构建侧边栏
接下来介绍网站首页的侧边栏部分，该部分在浏览器中的显示效果如图1-32所示。
图1-32 网站首页的侧边栏部分
该侧边栏部分的结构图如图1-33所示。
图1-33 侧边栏部分的结构图
在企业网站中，一般可以将所有产品分类以及产品分类下每个产品的页面链接作为一个链接组放在nav元素中，然后将该nav元素放在侧边栏中，也可以将企业的联系方式和友情链接等用户浏览整个网站时始终可以看见的重要信息放在侧边栏中。
这个示例网站首页的侧边栏分为两个部分，第一部分是用来显示所有产品分类及其产品链接的nav元素，第二部分为该企业的联系信息。由于直接使用ul列表元素直接显示企业的联系信息，因此在结构中第二部分没有体现出来。
侧边栏部分的结构代码如下所示。
<aside>
<nav>
...
</nav>
...
</aside>
由于没有对显示侧边栏的aside元素及其内部显示产品分类链接组的nav元素使用标题（在HTML 5中，不强求对aside元素以及nav元素使用标题），因此生成的大纲如图1-34所示。
图1-34 根据侧边栏及其内部的nav元素生成的大纲
该侧边栏元素的内部代码如代码清单1-14所示。
代码清单1-14 示例网站中侧边栏元素的内部代码
<aside>
<nav>
<img id="img11" src="images/in_left1.gif"/>
<ul>
<li><a href="show.asp?cid=29">定型机尾气余热回收</a></li>
<li><a href="show.asp?cid=27">GTG-600-X盘式水热能交换器</a></li>
<li><a href="show.asp?cid=25">GTL热能回收系统</a></li>
<li><a href="show.asp?cid=18">GTL-10热能回收系统</a></li>
<li><a href="show.asp?cid=19">GTL-20热能回收系统</a></li>
<li><a href="show.asp?cid=17">布面含潮率控制仪</a></li>
<li><a href="show.asp?cid=16">丝光机自动配碱系统</a></li>
<li><a href="show.asp?cid=20">自动加料系统主图</a></li>
</ul>
<img id="img21" src="images/in_left3.gif">
</nav>
<div>
<ul>
<li><img id="img12" src="images/in_left5.gif"/></li>
<li><address>地址：常州市青洋北路1号天宁经济开发区新动力创业中心
</address></li>
<li><address>电话：86-519-88257109、<br/>88116975</address></li>
<li><address>传真：86-519-88254120</address></li>
<li><address>E-mail:lanbo@czlbkj.cn</address></li>
<li><img id="img22" src="images/12.gif"/></li>
</ul>
</div>
</aside>
在这段代码中，使用了address元素来显示企业的联系信息。在HTML 5中，address元素是一种专门用来显示联系信息的元素，可以使用它来显示网站链接、电子邮箱、真实地址和电话号码等各种联系信息。
4.构建主体内容
接下来看一下该网站首页的主要展示的内容部分，该部分在浏览器中的显示效果如图1-35所示。
图1-35 网站首页的主要展示内容部分
该部分被放置在一个article元素中，该article元素的结构图如图1-36所示。
图1-36 显示首页中主要展示内容的article元素的结构图
该article元素内部的结构代码如下所示。
<article>
<header><h1>您的位置：首页</h1></header>
<section>
<h1>
<img src="images/in_c2.gif" id="section1_img1" alt="公司动态">
</h1>
...
</section>
<section>
<h1>
<img src="images/in_c3.gif" id="section2_img2" alt="公司简介">
</h1>
...
</section>
<section>
<h1>
<img src="images/in_c4.gif" id="section3_img3" alt="推荐产品">
</h1>
...
</section>
</article>
在该网站首页中，由这段结构代码生成的大纲如图1-37所示。
图1-37 首页主要展示内容部分生成的大纲
在这个article元素内部，首先使用了一个header元素，header元素内部又放置了一个标题元素h1，标题文字为“您的位置：首页”，该部分在大纲中生成的标题为“3. 您的位置：首页”。在article元素内部，还放置了三个section元素，其中分别放置了标题 “公司动态”、“公司简介”与“推荐产品”，所以在大纲中分别生成标题为“1.公司动态”、“2.公司简介”与“3.推荐产品”的三个节。
这个article元素的内部代码如代码清单1-15所示。
代码清单1-15 显示首页中主要展示内容的article元素的内部代码
<article id="main" >
<header><h1>您的位置：首页</h1></header>
<section id="section1">
<div id="topdiv1">
<h1>
<img src="images/in_c2.gif" id="section1_img1" alt="公司动态">
</h1>
</div>
<div id="bottomdiv1">
<div id="div1" >
<ul>
<li>
<ul>
<li id="li1_1"><img src="images/inc2.gif"></li>
<li id="li1_2">
<a href="newsinfo.asp?id=45" class="path">
2011年春节放假通知
</a>
</li>
<li id="li1_3">
<time datetime="2011-01-20" pubdate>
2011-1-20
</time>
</li>
</ul>
</li>
<li id="line1"></li>
<li>
<ul>
<li id="li2_1"><img src="images/inc2.gif"></li>
<li id="li2_2">
<a href="newsinfo.asp?id=44" class="path">
2010纺织印染行业年会
</a>
</li>
<li id="li2_3">
<time datetime="2010-11-13" pubdate>
2010-11-13
</time>
</li>
</ul>
</li>
<li id="line2"></li>
<li>
<ul>
<li id="li3_1"><img src="images/inc2.gif"></li>
<li id="li3_2">
<a href="newsinfo.asp?id=42" class="path">
2010中国柯桥国际纺织品博览会（秋季）
</a>
</li>
<li id="li3_3">
<time datetime="2010-11-02" pubdate>
2010-11-2
</time>
</li>
</ul>
</li>
<li id="line3"></li>
<li>
<ul>
<li id="li4_1"><img src="images/inc2.gif"></li>
<li id="li4_2">
<a href="newsinfo.asp?id=41" class="path">
声明</a>
</li>
<li id="li4_3">
<time datetime="2010-08-17" pubdate>
2010-8-17
</time>
</li>
</ul>
</li>
<li id="line4"></li>
<li>
<ul>
<li id="li5_1"><img src="images/inc2.gif"></li>
<li id="li5_2">
<a href="newsinfo.asp?id=40" class="path">
高温下的激情
</a>
</li>
<li id="li5_3">
<time datetime="2010-08-17" pubdate>
2010-8-17
</time>
</li>
</ul>
</li>
<li id="line5"></li>
</ul>
</div>
<div id="div2">
<img src="images/company.jpg">
</div>
</div>
</section>
<section id="section2">
<div id="topdiv2">
<h1>
<img src="images/in_c3.gif" id="section2_img2" alt="公司简介">
</h1>
</div>
<div id="bottomdiv2">
<div id="div3" >
<ul>
<li id="li6"><img src="images/comp.jpg"></li>
<li id="li7"> 随着全球能源的紧张,环境变化对人类生存的不断威胁.国家对节能减排尤为重视.也相应的出台了一些政策法规,在这样的环境下,目前国内一些纺织印染企业就很难适应形势发展,都面临着利润空间越来越小,行业内竞争越来越激烈的局面.纺织印染企业怎么样能够在这样的环境下摆脱困境,是我们蓝博人面临的主要威胁。<br>
常州蓝博纺织机械有限公司不断研究国外先进节能环保技术 ,通过我们的不断努力 ,相继开发出印染污水热能回收系统、布面含潮率控制仪、自动配碱系统等国家科技领先的产品。</li>
</ul>
</div>
</div>
</section>
<section id="section3">
<div id="topdiv3">
<h1>
<img src="images/in_c4.gif" id="section3_img3" alt="推荐产品">
</h1>
</div>
<div id="bottomdiv3">
<ul>
<li>
<ul>
<li>
<a href="show.asp?cid=32">
<img src="admin/upimg/201137112037_QQ
%E6%88%AA%E5%9B%BE%E6%9C%AA%E5%91%BD%E5%90
%8D.jpg" >
</a>
</li>
<li>LQW静电除油系列</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="show.asp?cid=31">
<img src="admin/upimg/20101228141434_%E8%B0%8 3%E6%95%B4%E5%A4%A7%E5%B0%8F%20%E8%B0%83%E6%95%B4%E5%A4%A7%E5%B0%8F%20%E7%83%AD%E7%AE%A1%E9%83%A8%E5%88%86.jpg" />
</a>
</li>
<li>热管</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="show.asp?cid=31">
<img src="admin/upimg/2011122134624_%E8%B0%83%E6%95%B4%E5%A4%A7%E5%B0%8F%20%E8%B0%83%E6%95%B4%E5%A4%A7%E5%B0%8F%20SDC11449.JPG" >
</a>
</li>
<li>定型机尾气余热回收</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="show.asp?cid=31">
<img src="admin/upimg/2010626142757_%E8%B0%83%E6%95%B4%E5%A4%A7%E5%B0%8F%20%E7%9B%98%E5%BC%8F%E8%BF%87%E6%BB%A41.jpg55555.jpg" >
</a>
</li>
<li>GTG-600-X盘式水热能交换器</li>
</ul>
</li>
</ul>
</div>
</section>
</article>
在article元素内部的第三个section元素中（“推荐产品”部分），使用了ul列表中嵌套ul列表的布局方式，外层ul列表中的li列表项目元素的排列方向为纵向排列，内层ul列表中的li列表项目元素的排列方向为横向排列。这些ul列表元素与li列表项目元素的样式代码如下所示。
li{
font-weight: normal;
font-size: 12px;
color: #000000;
line-height: 20px;
font-family: 宋体;
text-decoration: none;
list-style:none;
}
article#main section [id^=bottomdiv]{
display: -moz-box;
display: -webkit-box;
-moz-box-orient: horizontal;
-webkit-box-orient:horizontal;
}
section#section3 #bottomdiv3 ul
{
display: -moz-box;
display: -webkit-box;
-moz-box-orient: horizontal;
-webkit-box-orient:horizontal;
-moz-box-align: center;
-webkit-box-align: center;
}
section#section3 #bottomdiv3 ul{
width:620px;
height:99px;
list-style:none;
}
section#section3 #bottomdiv3 ul li{
height:99px;
}
section#section3 #bottomdiv3 ul li ul{
display: -moz-box;
display: -webkit-box;
-moz-box-orient: vertical;
-webkit-box-orient:vertical;
width:100%;
}
section#section3 #bottomdiv3 ul li ul li{
align:center;
}
5.构建版权信息
最后来看一下位于首页底部的版权信息显示部分，该部分在浏览器中的显示效果如图1-38所示。
图1-38 版权信息显示部分
该部分被放置于一个footer元素中，因为没有使用标题，所以也没有被显示在大纲中。
本部分代码相对来说比较简单，只需使用适当的div元素，然后在其中放入版权信息文字即可，故不再赘述。
1.2.2 联系方式页面的实现
接下来介绍一下本网站中的联系方式页面，该页面在浏览器中的显示效果如图1-39所示。
图1-39 网站的联系方式页面
该页面的整体结构图与网站首页的整体结构图大致相同，只是将显示网页主体内容的article元素中的内容换成了联系方式页面中的内容，如图1-40所示。
图1-40 联系方式页面的整体结构图
该页面生成的大纲如图1-41所示。
图1-41 联系方式页面生成的大纲
显示联系方式的article元素中的内部代码如代码清单1-16所示。
代码清单1-16 联系方式页面中显示联系方式的article元素中的内部代码
<article id="main" >
<header><h1>您的位置：首页 >> 联系我们</h1></header>
<div id="top"><img id="img3" src="images/contact.gif"/></div>
<div id="left"><img id="img4" src="images/contactImg.gif"/></div>
<div id="right">
<ul>
<li></li>
<li>常州蓝博纺织机械有限公司</li>
<li id="space"></li>
<li>
<img id="img_1" src="images/ico.gif"/>
传真：86-519-88254120
</li>
<li><img id="img_line1" src="images/line.gif"/></li>
<li>
<img id="img_2" src="images/ico.gif"/>
手机：13186695633
</li>
<li><img id="img_line2" src="images/line.gif"/></li>
<li><img id="img_3" src="images/ico.gif"/> 联系人：冯先生</li>
<li><img id="img_line3" src="images/line.gif"/></li>
<li>
<img id="img_4" src="images/ico.gif"/>
网址：http://www.czlbkj.cn
</li>
<li><img id="img_line4" src="images/line.gif"/></li>
<li>
<img id="img_5" src="images/ico.gif"/>
邮件地址：E-mail:lanbo@czlbkj.cn
</li>
<li><img id="img_line5" src="images/line.gif"/></li>
</ul>
</div>
</article>
本网站中其他几个主要页面的整体结构均与这个联系方式页面的整体结构大致相同，只不过将显示网页主体内容的article元素中的内容换成每个页面中各自要展示的主体内容，故不再介绍。
1.3 本章小结
本章通过利用HTML 5制作的一个博客网站与一个企业网站，重点阐述了如何使用HTML 5的结构元素来制作语义清晰、结构分明的Web 3.0时代的网站，力求使读者通过本章的阅读，能够对HTML 5中的结构元素以及使用这些结构元素所制作出来的网页大纲有一个比较详细的了解，能够利用这些结构元素与网页大纲的知识制作出属于自己的HTML 5网站。
下一章将通过两个案例来阐述如何使用HTML 5中的结构元素与表单元素制作Web应用程序，如何对用户在HTML 5中新增的表单元素中输入的内容进行验证，如何让服务器端能够正确获取用户在HTML 5中新增表单元素中输入的内容并将其保存在数据库中。