HTML5基础，第1部分：初试锋芒 (2)



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页面的基本标签，让我们开始构建你的页面

让我们把页面装配起来吧。首先要处理的是这个< !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这一区域中使用这些标签：

1. < base>
2. < link>
3. < meta>
4. < script>
5. < style>
6. < 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的表单。