HTML5程序开发范例宝典最新章节_韩旭著

2.2 HTML5新增结构元素

实例022 应用section元素对页面上的内容进行分块

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\02\022

实例说明

在HTML5新增的主体结构元素中，section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，本实例将使用section元素对页面内容进行分块显示。其运行结果如图2.12所示。

图2.12 使用section元素对页面内容进行分块

技术要点

section元素代表文档或应用程序中一般性的“段”或者“节”。“段”在这里的上下文中，指的是对内容按照主题的分组，通常还附带标题。一个section元素通常由内容及其标题组成。示例代码如下：

<p>欧美杂交，为四倍体葡萄品种...</p>

</section>

<p>本身带有黑加仑、黑莓子等香味...</p>

</section>

实现过程

在页面中定义3个section元素，每个section元素内部都有一个h2标题和一个p元素。关键代码如下：

<p>HTML语言（Hypertext Markup Language，中文通常称为超文本置标语言或超文本标记语言）是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML文件。</p>

</section>

<p>PHP是Hypertext Preprocessor（超文本预处理器）的缩写，是一种服务器端、跨平台、HTML嵌入式的脚本语言。其独特的语法混合了C语言、Java语言和Perl语言的特点，是一种被广泛应用的开源的多用途脚本语言，尤其适合Web开发。</p>

</section>

<h2>JavaScript</h2>

<p>JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成可以和用户交互并响应相应事件的动态页面。</p>

</section>

举一反三

根据本实例，读者可以进行以下操作。

使用section元素对文章进行分段。

使用section元素对评论信息进行分块显示。

实例023 以博客为例了解 article元素的使用

本实例可以方便操作、提高效率

实例位置：光盘\mingrisoft\02\023

实例说明

在HTML5 的新增结构元素中，article元素表示文档、页面、应用程序或站点中的独自包含成分所构成的一个页面的一部分，并且这部分专用于独立地分类或复用，本实例以博客为例来介绍一下article元素的使用。实例运行结果如图2.13所示。

图2.13 article元素的实例运行效果

技术要点

本实例主要应用HTML5新增结构元素中的article元素，一个article元素中除了内容部分之外，通常还有它自己的标题（通常放在一个 header元素里面），有时还有自己的脚注（通常放在一个footer元素里面）。

实现过程

创建index.html文件，定义article元素，首先在该元素中定义一个header元素，在header元素中嵌入文章的标题和发表日期；然后定义一个p元素，在该元素中嵌入一大段该博客文章的正文；最后在结尾处定义footer元素，在该元素中嵌入文章的著作权作为脚注。关键代码如下：

<h1>编程词典简介</h1>

</header>

<p><b>编程词典</b>，是明日科技公司数百位程序员...（“编程词典”文章正文）</p>

</footer>

</article>

举一反三

根据本实例，读者可以进行以下操作。

在新闻内容页面应用article元素。

在论坛帖子页面应用article元素。

实例024 一个关于article元素嵌套的实例

本实例可以方便操作、提高效率

实例位置：光盘\mingrisoft\02\024

实例说明

article元素是可以嵌套使用的，在应用article元素的嵌套时，内层的内容在原则上需要与外层的内容相关联。下面来看一个关于article元素嵌套的实例。实例运行结果如图2.14所示。

图2.14 article元素嵌套博客评论

技术要点

article元素的嵌套就是在article元素内部包含 article元素。在本实例中，将文章标题放在header元素中，文章正文放在header元素后面的p元素中，然后section元素把正文与评论进行区分，在section元素中嵌入评论的内容，评论中每一个人的评论相对来说又是比较独立、完整的，因此对它们都使用一个 article元素。在评论的article元素中，又分为标题与评论内容部分，分别放在header元素与p元素中。

实现过程

创建index.html文件，定义article元素，首先在该元素中定义一个header元素和一个p元素，分别用来嵌入文章的标题、发表日期和该博客文章的正文；然后定义section元素，在该元素内部定义article元素嵌入评论的内容。具体代码如下：

<h1>编程词典简介</h1>

<p>发表日期:

<timepubdatedatetime="2010/10/09">2011/10/09</time>

</p>

</header>

<p><b>编程词典</b>，是明日科技公司研发...（"编程词典"文章正文）</p>

</header>

<p>编程词典，里面的内容很全面。</p>

</article>

</header>

<p>编程词典个人版，在哪里能有卖的啊！</p>

</article>

</section>

</article>

举一反三

根据本实例，读者可以进行以下操作。

应用article元素的嵌套构建新闻内容页面。

在博客中应用article元素的嵌套。

实例025 通过article元素表示插件的实例

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\025

实例说明

article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。下面就来看一个通过article元素表示插件的实例，其运行结果如图2.15所示。

图2.15 应用article元素表示插件的运行效果

技术要点

实现本实例的关键是在article元素中嵌入一个object元素，object元素用于包含对象，该对象可以是图像、音频、视频等文件。

实现过程

创建index.html文件，在文件中首先定义article元素，在该元素中定义一个h1标题，然后通过object元素与embed元素嵌入一个视频文件，代码如下：

<h1>电子商务网站</h1>

<paramname="allowFullScreen"value="true">

</object>

</article>

举一反三

根据本实例，读者可以进行以下操作。

在article元素中嵌入音频文件。

在article元素中嵌入Flash动画。

实例026 联合使用section和article标签

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\026

实例说明

在HTML5新增的主体结构元素中，section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，但是不要与article混淆，因为article有着自己完整的、独立的内容。下面是一个联合使用<section>和<article>标签的实例，其运行结果如图2.16所示。

图2.16 联合使用<section>和<article>标签

技术要点

在本实例中，首页整体呈现的是一段完整独立的内容，所有我们要用article元素包起来，这其中又可分为两段，所以选用section为其分段。这样就使文档的结构显得很清晰。

实现过程

在页面中定义一个article元素，在其内部首先定义一个h1标题和一个p元素，然后再定义两个 section元素，每个 section元素内部都有一个 h2 标题和一个 p元素。关键代码如下：

<p>通过专门编写的脚本程序，不仅可以生成静态的内容，而且可以生成动态的内容！</p>

<p>一种服务器端、跨平台、HTML嵌入式的脚本语言...</p>

</section>

<h2>JavaScript</h2>

<p>Web页面中的一种脚本编程语言...</p>

</section>

</article>

举一反三

根据本实例，读者可以进行以下操作。

联合使用<section>和<article>标签构建目录。

在博客文章的评论中使用HTML5的新增元素。

实例027 在网页中显示联系信息

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\027

实例说明

我们知道，section元素代表文档或应用程序中一般性的“段”或者“节”。我们可以把网页中的联系信息看成是网页中的一个“节”。本实例将在网页中使用section元素显示关于联系方式的信息，运行结果如图2.17所示。

图2.17 显示联系信息

技术要点

本实例应用section元素在网页中显示联系信息。由于一个section元素通常由标题和内容组成，因此在本实例中，把“联系方式”作为标题，把具体的联系信息作为内容输出到页面中。

实现过程

创建index.html文件，定义<section>标签，在该标签中首先定义一个h3元素作为标题，然后定义一个p元素用于输出具体的联系信息，主要代码如下：

<p>

公司名称：吉林省****公司<br>

公司地址：吉林省长春市<br>

联系电话：0431-8899****<br>

电子邮箱：mm@sohu.com<br>

邮政编码：130000

</p>

</section>

举一反三

根据本实例，读者可以进行以下操作。

在网页中通过section元素显示新闻列表。

在网站主页介绍中使用section元素。

实例028 一个nav元素的使用实例

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\028

实例说明

下面是一个nav元素的使用实例，在这个实例中，一个页面由几部分组成，每个部分都带有链接，但只将最主要的链接放入了nav元素中。实例运行结果如图2.18所示。

图2.18 nav元素的使用实例

技术要点

nav元素用来构建导航。导航定义为一个页面中（例如，一篇文章顶端的一个目录，它可以链接到同一页面的锚点）或一个站点内的链接。但是，并不是链接的每一个集合都是一个 nav，只需要将主要的、基本的链接组放进nav元素即可。

实现过程

创建index.html文件，在文件中定义两个nav元素，第一个nav元素用于页面的导航，将页面跳转到其他页面上去（跳转到网站主页或开发文档目录页面）；第二个nav元素放置在article元素中，用作这篇文章中组成部分的页内导航。具体代码如下：

<!DOCTYPEhtml>

<title>nav元素的使用实例</title>

<body>

<h1>编程词典简介</h1>

<nav>

<ul>

...more...

</ul>

</nav>

<h1>编程词典功能介绍</h1>

<nav>

<ul>

...more...

</ul>

</nav>

</header>

<h1>编程词典的入门模式</h1>

<p>编程词典的入门模式介绍</p>

</section>

<h1>编程词典的开发模式</h1>

<p>编程词典的开发模式介绍</p>

</section>

...more...

<p>

<ahref="?edit">编辑</a>|

<ahref="?delete">删除</a>|

<ahref="?rename">重命名</a>

</p>

</footer>

</article>

</footer>

</body>

注意：在HTML5中不要用menu元素代替nav元素。因为menu元素是用在一系列发出命令的菜单上的，是一种交互性的元素，或者更确切地说是使用在Web应用程序中的。

举一反三

根据本实例，读者可以进行以下操作。

把边栏导航定义在nav元素中。

在nav元素中定义服务条款。

实例029 一个在文章内部的 aside元素实例

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\02\029

实例说明

aside元素是由与其周围内容无关的内容所组成的一个页面的一节，也可以认为该内容与aside周围的内容是分开独立的。下面就是一个在文章内部应用aside元素的实例。实例运行效果如图2.19所示。

图2.19 在文章内部的aside元素示例

技术要点

aside元素主要有以下两种使用方法。

（1）被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的信息、名词解释等。

（2）在article元素之外使用，可以作为页面或站点全局的附属信息部分。最典型的形式就是侧边栏，其中的内容可以是友情链接、博客中其他文章列表、广告单元等。

实现过程

创建index.html文件，将网页的标题放在header元素中，在header元素的后面将所有关于文章的部分放在一个article元素中，将文章的正文部分放在一个p元素中，在p元素的下部又放置一个aside元素，用来存放名词解释部分的内容。具体代码如下：

<!DOCTYPEhtml>

<title>文章内部的aside元素示例</title>

<body>

</header>

<p>...但愿人长久，千里共婵娟(文章正文）</p>

<aside>

<dl>

<dd>词，是我国古代诗歌的一种。它始于梁代，形成于唐代而极盛于宋代。（全部文章）</dd>

</dl>

<dl>

<dd>美丽的月光</dd>

</dl>

</aside>

</article>

</body>

举一反三

根据本实例，读者可以进行以下操作。

在aside元素中定义友情链接。

在aside元素中定义广告标题。