HTML5基础，第1部分：初试锋芒
[2] HTML5基础，第1部分：初试锋芒
Aside区
Acme United规划中的Aside区可通过使用<aside>标签来创建。这一标签被看作是用来存放补充内容的地方，这些内容不是其所补充的一篇连续文章的组成部分。在杂志上，插入语（aside）通常被用来突出文章本身所制造的一个观点。<aside>标签包含的内容可被删除，而这不会影响到包含了该内容的文章、章节或是页面所要传达的信息。
清单10提供了<aside>标签用法的一个例子。
清单10. <aside>标签的例子
<p>My family and I visited Euro Disney last year.</p>
<aside>
<h4>Disney in France< /h4>
<p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>
Footer区
<footer>元素包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或是日期。作为页面的页脚，其有可能包含了版权或是其他重要的法律信息，如清单11所示。
清单11. <footer>标签的例子
<footer>
<p>Copyright 2011 Acme United. All rights reserved.</p>
</footer>
构建页面
现在你已经了解了需要用来创建一个HTML5页面的基本标签，让我们开始构建你的页面。你会为Acme United构建一个网页，完成后的页面如图2所示，该页面可以下载供你使用（参见下载一节）。
图2. Acme United的网页
那么，让我们把页面装配起来吧。首先要处理的是这个<!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"/>
</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="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">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="#" 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">Clio< /button>
<button type="button">Thalia< /button>
<button type="button"color:#0021b0;background-color:#e2f0fe;"> ('Urania . . .')">Urania< /button>
<button type="button"color:#0021b0;background-color:#e2f0fe;"> ('Calliope . . .')">Calliope< /button>
</menu>
<figure><img src="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" 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的表单。
下载
示例的HTML、CSS3文件（HTML5Fundamentals.zip）10K （关于下载方法的说明）
学习资料
1. Create modern Web sites using HTML5 and CSS3（developerWorks，March 2010）是一篇有着多节内容的HTML5和CSS3文章。
2. 在New elements in HTML 5（developerWorks，August 2007）这一文章中，你会找到HTML5中的几个新元素的一些资料。
3. 5doctor网站提供了一种关于HTML5当前趋势的非常棒的看法。
4. W3Schools.com HTML5 Tag Reference提供了一个无所不包的HTML5标签、定义和例子的清单。
5. WHATWG网站提供了HTML5规范的详尽内容。
6. W3Schools.com CSS3 Reference提供了CSS版本3的详尽内容。
7. Web development zone特定于涵盖了各种基于Web的解决方案的文章。
8. 随时关注developerWorks的technical events and webcasts。
9. developerWorks on-demand demos：观看各种演示，范围从为初学者提供的产品安装和设置到为有经验的开发者提供的高阶功能都有。
10. 关注developerWorks on Twitter。
讨论
1. 现在就创建你的developerWorks个人资料，并设置一个关于HTML的观看列表。与developerWorks社区建立联系并保持联系。
2. 找到其他在web开发方面感兴趣的developerWorks成员。
3. 分享你的知识：加入一个关注web专题的developerWorks组。
4. Roland Barcia在他的博客中谈论Web 2.0和中间件。
关于作者
Grace Walker是位于伊利诺斯州的芝加哥的Walker Automated Services公司的合伙人，她是一位有着多重背景和丰富经验的IT顾问。她在IT行业担任过经理、管理员、程序员、讲师、业务分析师、技术分析师、系统分析师和Web开发者，工作的背景环境也各不相同，其中包括了电信、教育、金融服务和软件等。
