区包含公司的名字（虚构的），即 Acme United，而 区包含的信息表明副标题为 “一个简单的 HTML5 示例”。清单 14. 标记和 标记示例清单 15 显示了目前为止构建页面所使用的 CSS3。这个 还包含
2. Acme United Web 页面
现在，让我们开始构造页面吧。首先，让我们先关注一下 <!doctype>。在 HTML5 中，对 <!doctype>进行了简化：您只需要记住 html即可。这不仅简化了标记的输入，而且该标记在以后也不需要进行修改。注意，它不是 html5，而是 html。不管 HTML 以后会有多少个版本，<!doctype>只能是 html。
<html>标记包含除 <!doctype>以外的所有其他 HTML 元素。所有这些元素都应当被嵌套到 <html>和 </html>标记之间。参见清单 12。
清单 12. <!doctype> 标记示例
表明文档类型为 html和使用语言为英语后，将要使用 <head>元素。该元素将包含脚本、浏览器支持信息、样式表链接、元信息和其他初始化功能。可以在 head部分中使用以下标记：
<base>
<link>
<meta>
<script>
<style>
<title>
<title>标记用于包含文档的实际标题，是 <head>中必须包含的元素。您将在浏览页面时在浏览器的顶部看到该标记包含的标题。清单 13 中的 <link>标记识别将用于呈现 HTML5 页面的 CSS3 样式表。调用的样式表为 main-stylesheet.css。
清单 13. <head> 标记示例
接下来将使用 <body>标记，之后是 <header>和 <hgroup> 标记，这些标记已经在前面进行了介绍。本例中的 <h1>区包含公司的名字（虚构的），即 Acme United，而 <h2>区包含的信息表明副标题为 “一个简单的 HTML5 示例”。清单 14 显示了标记。
清单 14. <body> 标记和 <header> 标记示例
清单 15 显示了目前为止构建页面所使用的 CSS3。首先，为页面定义字体，然后定义正文的细节。在定义正文的大小后，为一级和二级标题标记设计标题段落结构。这些都是将在页面中使用的标题。(www.xing528.com)
清单 15. CSS3 示例 #1
清单 16 展示了 <nav>标记，该标记将用于处理主站点的导航。
清单 16. <nav> 示例
HTML5 还包含一个 <menu>标记 —该标记一度令一些设计师和开发人员感到困惑。这是因为导航功能常常被称为 “导航菜单”。HTML 版本 4.01 不赞成使用 <menu>标记，但是 HTML5 重新启用了该标记并使用它增强交互性。它不应当用于实现主导航。唯一用于实现主导航的标记应当为 <nav>标记。您将在本示例后面的部分使用 <menu>标记。
导航的格式由 CSS3 实现。清单 17 中显示的每个 <nav>标记的定义都表示 <nav>标记内部的 <ul>和 <li>元素的特定状态。
清单 17. CSS3 示例 #2
接下来是 Article 区。这个区由 <article>标记定义，包含其自己的 <header>信息。<article>中的 <section>也包含它自己的 <header>标记。参见清单 18。
清单 18. <article> 和 <section> 示例
清单 19 显示了呈现页面格式的 CSS3 标记。注意，paragraph、header和 section区的定义都是针对它们所在的 <article>标记定义的。这里定义的 <h1>标记使用了与为页面级 <h1>标记定义的 <h1>标记不同的格式。
清单 19. CSS3 示例 #3
<article>中包含的第二个 <section>标记包含与第一个 <section>相同的基本信息，但是这一次将使用 <aside>、<figure>、<menu>以及 <mark>标记。参见清单 20。
<aside>标记在这里用于显示不属于文本流部分的信息。<figure> 标记包含一个 Stonehenge 图形。这个 <section> 还包含 <menu>标记，您可以用来创建带有四个 Muse 名字的按钮。当单击其中一个按钮时，它将提供有关特定 Muse 的信息。<mark>标记在 <p>标记的内部使用，用于突出显示 veni、vidi、vici。
清单 20. <article> 和 <section> 示例
本部分的 CSS3 包含了 <p>标记的新定义，该标记的宽度要比页面的宽度小一些。这种改变允许将旁白显示在右侧，而不会与文本相互重叠。清单 21 显示了标记。
清单 21. CSS3 示例 #4
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
