HTML5基础实战 - 第一部分：初试锋芒(5) 构建页面
构建页面
现在你已经了解了需要用来创建一个HTML5页面的基本标签，让我们开始构建你的页面。你会为Acme United构建一个网页，完成后的页面如图2所示。
那么，让我们把页面装配起来吧。首先要处理的是这个<!doctype>，在HTML5中，<!doctype>被简化了：所有你需要记住就是html。这不仅是简化了这一标签的条目，而还把它变得更适应未来的发展。需要注意的是，它不是被称为html5，就只是html。不管来来去去的有多少个HTML版本，<!doctype>可以一直都是html。
<html>标签包含了所有除了<!doctype>标签之外的其他HTML元素，其他的每一个元素都必须嵌套在<html>和</html>标签之间，参见清单12。
清单12. < !doctype>标签的例子
<!doctype html> <html lang="en">
在指出了html和语言为英语之后，你就可以使用< head>元素，该元素可以包含脚本、浏览器支持信息、样式表链接、meta信息和其他的初始化函数。你可以在head这一区域中使用这些标签：
- <base>
- <link>
- <meta>
- <script>
- <style>
- <title>
<title>标签存放文档的实际标题，这是一个必需的<head>区元素，它的内容就是你在浏览该页面时会在浏览器的顶端看到的标题。清单13中的<link>标签标识了会被用来渲染HTML5页面的CSS3样式表，样式表的文件名为main-stylesheet.css。
清单13. <head>标签的例子
<head> <title>HTML5 Fundamentals Example< /title> <link rel="stylesheet" href="main-stylesheet.css" kesrc="main-stylesheet.css" /> </head>
接下来你会用到<body>标签，后面跟着<header>和<hgroup>标签，这已经在前面介绍过。本例中的<h1>区域包含了虚构公司的名称：Acme United，<h2>区域包含了让你知晓副标题是“A Simple HTML5 Example”的信息，清单14显示了这一标记。
清单14. <body>标签和<header>标签的例子
<body> <header> <hgroup> <h1>Acme United</h1> <h2>A Simple HTML5 Example</h2> </hgroup> </header>
到目前为止，被用来设置页面的CSS3如清单15所示。首先，你建立页面的字体，然后量身定做页面的主体，明确主体的维度，然后设计header段结构的第一级和第二级标题标签，这些是你要给页面使用的header。
清单15. CSS3例子1
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 800px;
margin: 0em auto;
}
header h1 {
font-size: 50px;
margin: 0px;
color: #006;
}
header h2 {
font-size: 15px;
margin: 0px;
color: #99f;
font-style: italic;
}
清单16展示了< nav>标签 ，其目的是处理主站点的导航。
清单16. < nav>例子
<nav> <ul> <li><a href="#" kesrc="#">Home</a></li> <li><a href="#" kesrc="#">About Us</a></li> <li><a href="#" kesrc="#">Contact Us</a></li> </ul> </nav>
HTML5还有一个<menu>标签——一个给一些设计者和开发者带来混乱的标签。这一混乱源于导航条通常被称为“导航菜单”。<menu>标签在HTML的4.01版本中被弃用，但在HTML5中又死里复生，目的是用来增强交互性。它不应该用来做主导航。唯一应该用来做主导航的标签是<nav>标签，你迟一些就会在本例中用到<menu>标签。
导航的格式化问题由CSS3来处理。清单17中给出的每个<nav>标签的定义都代表了<nav>标签内的<ul>和<li>元素的一个特定状态。
清单17. CSS3例子2
nav ul {
list-style: none;
padding: 0px;
display: block;
clear: right;
background-color: #99f;
padding-left: 4px;
height: 24px;
}
nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}
nav ul li a {
color: #006;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
接下来是Article区，这一区域由<article>标签来定义，其中包括了其自己的<header>信息。包含在<article>中的<section>也包含了一个自己的的<header>标签，参见清单18。
清单18. <article>和<section>的例子
<article> <header> <h1> <a href="#" kesrc="#" title="Link to this post" rel="bookmark">Article Heading</a> </h1> </header> <p> Primum non nocere ad vitam Paramus . . . </p> <section> <header> <h1>This is the first section heading</h1> </header> <p>Scientia potentia est qua nocent docentp . . .</p> </section>
清单19展示了渲染这一格式的CSS3标记，可以注意到，段落、header和section区的定义都定义在包含了它们的< article>标签上。这里定义的<h1>标签和页面级别定义的<h1>标签有着不同的格式。
清单19. CSS3例子3
article > header h1 {
font-size: 40px;
float: left;
margin-left: 14px;
}
article > header h1 a {
color: #000090;
text-decoration: none;
}
article > section header h1 {
font-size: 20px;
margin-left: 25px;
}
article p {
clear: both;
margin-top: 0px;
margin-left: 50px;
}
<article>中包含的第二个<section>标签包含了与第一个<section>相同的基本信息，但这一次你要用到一个<aside>、一个<figure>、一个<menu>和一个<mark>标签，参见清单20。
这里使用<aside>标签来表示的信息并非是围绕着它的那些连续内容的组成部分。<figure>标签包含了一个Stonehenge的图片。<section>标签还包含了一个<menu>标签，该标签被用来创建使用了四个缪斯女神的名字来命名的按钮。当某个按钮被点击时，其提供相应缪斯女神的的信息。<mark>标签被用在<p>标签中，以此来突出显示veni、vidi和vici等词。
清单20. <article>和<section>的例子
<section>
<header>
<h1>Second section with mark, aside, menu & figure</h1>
</header>
<p class="next-to-aside"> . . . < mark>veni, vidi, vici</mark>. Mater . . .</p>
<aside>
<p>This is an aside that has multiple lines. . . .</p>
</aside>
<menu label="File">
<button type="button" onClick="JavaScript:alert('Clio . . .')">Clio</button>
<button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia</button>
<button type="button" onClick="JavaScript:alert
('Urania . . .')">Urania</button>
<button type="button" onClick="JavaScript:alert
('Calliope . . .')">Calliope</button>
</menu>
<figure>
<img src="stonehenge.jpg" kesrc="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/>
<figcaption>Figure 1. Stonehenge</figcaption>
</figure>
</section>
这一部分的CSS3包括了一个新的<p>标签的定义，该标签有着比为页面所设的宽度更小的宽度。这种改动允许aside浮在右边而又不会遮盖到文字。清单21显示了这一标记。
清单21. CSS3例子4
article p.next-to-aside {
width: 500px;
}
article > section figure {
margin-left: 180px;
margin-bottom: 30px;
}
article > section > menu {
margin-left: 120px;
}
aside p {
position:relative;
left:0px;
top: -100px;
z-index: 1;
width: 200px;
float: right;
font-style: italic;
color: #99f;
}
视频部分的元素
这是<article>的最后一个组件：视频部分。例子视频是ogg格式的，在页面被载入后就自动播放，不断循环，并提供暂停和播放控制。在当前的许多实际情况中，ogg视频使用的是ogv（v表示视频）扩展名，如清单22所示。<audio>标签以同样的方式工作。
清单22. < article>和< section>的例子
<section> <header> <h1>This is a video section</h1> </header> <p><video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" kesrc="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" controls autoplay loop> <div class="no-html5-video"> <p>This video will work in Mozilla Firefox or Google Chrome only. </p> </div> </video> </p> </section> </article>
清单23提供了video部分的CSS3定义。
清单23. CSS3例子5
article > section video {
height: 200px;
margin-left: 180px;
}
article > section div.no-html5-video{
height: 20px;
text-align: center;
color: #000090;
font-size: 13px;
font-style: italic;
font-weight: bold ;
background-color: #99f;
}
页面的页脚和结束部分如清单24所示。
清单24. < footer>标签的例子
<footer> <p>Copyright: 2011 Acme United. All rights reserved.</p> </footer> </body> </html>
页脚的CSS3如清单25所示。
清单25. CSS3例子5
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}
结论
网页的构建完成结束了这一多部分组成的系列的第一部分。本篇文章的目的是介绍新的HTML5机制。HTML5不仅是HTML4的一个升级：它还是一种新的数字化通信方式。借助于CSS3和JavaScript的功能，HTML5接近于在一个伪包中为开发者提供了全部的一切。如果你愿意从已有的大量的HTML5信息中吸取你所需的内容来，并把它们用到我们的常见做法中的话，那么你将会加入到这一个由称职的的HTML5多媒体web设计者和开发者组成的正在不断壮大的军团中。这一系列的下一篇文章将着眼于如何编写和格式化HTML5的表单。
-
Adobe收购HTML5框架PhoneGap开发商
-
目标多平台：Rovio推HTML5版愤怒的小鸟
-
Facebook将在iPhone 5发布会推出基于HTML5的iPad应用
-
Pandora推出基于HTML5的音乐播放器
-
斯巴达计划：Facebook通过社交占领移动平台
-
HTML5基础实战 - 第一部分：初试锋芒(5) 构建页面
-
HTML5基础实战 - 第一部分：初试锋芒(4) Aside和Footer
-
HTML5基础实战 - 第一部分：初试锋芒(3) Article和Section
-
HTML5对SEO的辅助作用
-
HTML5基础实战 - 第一部分：初试锋芒(2) 规划页面的header与nav
发表评论