乐者为王

Do one thing, and do it well.

使用HTML5创建电子书网站

在项目开始前,先要了解下HTML5规范包含的一些有用的新的语义标签,用于提供HTML页面的各个区域或部分的意义,例如页眉、页脚、导航栏、边栏等等。在以前的HTML版本中,这些部分通常使用<div>标签来创建,通过id或class属性来区分。

HTML5引入的主要标签包括:

标签 说明
header 此标签用于定义页面某些部分的页眉,可以是整个页面、article标签或section标签
nav 这是页面上主要导航链接的容器。此标签不应用于所有链接组,而是应仅用于主要导航块。如果你有一个footer标签包含导航链接,不需要将这些链接封装在nav标签中,因为footer标签将可以独自包括这些链接
footer 此标签定义页面的某些部分的页脚。页脚不一定是在页面、文章或区域的结尾,但是它通常是在那个位置
article 定义文档或页面上的独立区块,例如新闻、杂志、博文或评论
section 此标签表示文档的一部分,例如,文章或教程的一章或一节。该标签通常具有一个页眉,虽然严格来说是不需要的
aside 用于标记边栏或一些将认为与其周围内容有点无关的内容。此项的一个例子就是广告块
hgroup 在某些情况下,页面、文章或区域可能需要多个标题,例如,你有一个标题和一个副标题。你可以在hgroup标签中封装这些标题,使用h1标签表示主标题,h2标签表示副标题

这些标签的基础结构遵循以下大纲:

1
2
3
4
5
6
7
8
header
  hgroup
nav
article
  header
  section
    header
footer

上面是网站的布局设计,主要有header、navigation、footer和main四个区块,实现代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!-- HTML5的DOCTYPE声明模式,它可以向后兼容,
     再也不用记忆XHTML中复杂的DOCTYPE了!-->
<!DOCTYPE html>
<html>
<head>
  <!-- 指定文档字符编码的写法,该写法在所有浏览器上都有效。-->
  <meta charset="utf-8" />
  <title>HTML5 Demo</title>
  <!-- link和script标签也无需提供type属性(No More Types for Scripts and Links),
       因为CSS和JavaScript是目前惟一受支持的样式表和脚本类型 -->
  <link href="style.css" rel="stylesheet" />
  <!-- 因为IE浏览器(甚至版本8)不支持新的HTML5标签,处理此问题的一个已知方法是使用
       JavaScript函数document.createElement()为每个标记创建虚拟标签。html5.js文件将
       为每个新的HTML标签进行此操作 -->
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
  <header>
    <hgroup>
      <h1>Logo</h1>
      <h2>Here is the slogan</h2>
    </hgroup>
  </header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Business</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Religion</a></li>
      <li><a href="#">Health</a></li>
      <li><a href="#">Science</a></li>
    </ul>
  </nav>

  <!-- main block begin -->
  <!-- main block end -->

  <footer>© 2013</footer>
</body>
</html>

对应的CSS文件内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
* {
  font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
  width: 768px;
  margin: 0px auto;
}

header h1 {
  font-size: 36px;
  margin: 0px;
}

header h2 {
  font-size: 18px;
  margin: 0px;
  color: #888;
  font-style: italic;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

nav ul:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

nav ul  li {
  float: left;
  width: 16.66%;
  text-align: center;
}

nav ul li a {
  display: block;
  background: #000;
  color: #fff;
  font-weight: bold;
  padding: 10px;
  border-right: 1px solid #fff;
  text-decoration: none;
}

nav ul li a:hover {
  background: #333;
}

footer {
  border-top: 1px solid #ccc;
  text-align: center;
  font-size: 12px;
  color: #888;
  margin-top: 24px;
}

整个网站主要有这么几个页面:首页、分类页、书目页、内容页,这些页面共用一个布局,主要区别在于main区块的不同。首页、分类页和书目页相似,都是由列表组成。

首页中有多个无序列表,列出网站中最新、最多被访问、最多被分享等的图书:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<h3>Latest</h3>
<ul>
  <li>Book's title</li>
  <li>Book's title</li>
  <li>Book's title</li>
</ul>

<h3>Most Viewed</h3>
<ul>
  <li>Book's title</li>
  <li>Book's title</li>
  <li>Book's title</li>
</ul>

<h3>Most Shared</h3>
<ul>
  <li>Book's title</li>
  <li>Book's title</li>
  <li>Book's title</li>
</ul>

分类页是单个无序列表,列出当前被访问分类下所有的图书:

1
2
3
4
5
6
<h3>Business</h3>
<ul>
  <li>Book's title</li>
  <li>Book's title</li>
  <li>Book's title</li>
</ul>

书目页是单个有序列表,列出某本书所有的章节:

1
2
3
4
5
6
<h3>Book's title</h3>
<ol>
  <li>Chapter 1</li>
  <li>Chapter 2</li>
  <li>Chapter 3</li>
</ol>

内容页,顾名思义就是显示具体内容的页面。文章内容用<article>标签表示,其中的标题、作者、发表时间等信息被包含在<header>标签中。主要代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<article>
  <header>
    <h1><a href="#">Chapter 1</a></h1>
    <p>By <a href="#">author</a> on <time>2013-05-24 14:54</time></p>
  </header>
  <p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
  diam nonummy nibh euismod tincidunt ut laoreet dolore magna
  aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
  nostrud exerci tation ullamcorper suscipit lobortis nisl ut
  aliquip ex ea commodo consequat.
  </p>
  <section>
    <header>
      <h1>Section heading</h1>
    </header>
    <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit
    esse molestie consequat, vel illum dolore eu feugiat nulla
    facilisis at vero eros et accumsan et iusto odio dignissim qui
    blandit praesent luptatum zzril delenit augue duis dolore te
    feugait nulla facilisi.
    </p>
  </section>
  <footer>
    <a href="#">Back</a>
    <a href="#">TOC</a>
    <a href="#">Forward</a>
  </footer>
</article>

在上面的代码里,<header>标签中我们仅使用了<h1>标签,这是因为HTML5会根据上下文计算出heading元素的层级,因此会有:

1
2
3
<body><h1>  <!-- 相当于heading 1 -->
<body><section><h1>  <!-- 相当于heading 2 -->
<body><section><section><h1>  <!-- 相当于heading 3 -->

最后顺便说一句,HTML5支持已存在的各种写法:xhtml1.0、xhtml1.1和html4.0,但建议使用xhtml1.1规范,即:

  1. 所有标签/属性都使用小写字母;
  2. 所有属性值都必须加引号;
  3. 使用闭合标签。

Comments