下载掌阅APP，畅读海量书库
立即打开
这是一个可以提高基础技能的实例
实例位置：光盘\mingrisoft\02\022
实例说明
在HTML5新增的主体结构元素中，section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，本实例将使用section元素对页面内容进行分块显示。其运行结果如图2.12所示。
图2.12 使用section元素对页面内容进行分块
技术要点
section元素代表文档或应用程序中一般性的“段”或者“节”。“段”在这里的上下文中，指的是对内容按照主题的分组，通常还附带标题。一个section元素通常由内容及其标题组成。示例代码如下：
<section>
<h2>巨峰</h2>
<p>欧美杂交，为四倍体葡萄品种...</p>
</section>
<section>
<h2>赤霞珠</h2>
<p>本身带有黑加仑、黑莓子等香味...</p>
</section>
实现过程
在页面中定义3个section元素，每个section元素内部都有一个h2标题和一个p元素。关键代码如下：
<section>
<h2>HTML</h2>
<p>HTML语言（Hypertext Markup Language，中文通常称为超文本置标语言或超文本标记语言）是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML文件。</p>
</section>
<section>
<h2>PHP</h2>
<p>PHP是Hypertext Preprocessor（超文本预处理器）的缩写，是一种服务器端、跨平台、HTML嵌入式的脚本语言。其独特的语法混合了C语言、Java语言和Perl语言的特点，是一种被广泛应用的开源的多用途脚本语言，尤其适合Web开发。</p>
</section>
<section>
<h2>JavaScript</h2>
<p>JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成可以和用户交互并响应相应事件的动态页面。</p>
</section>
举一反三
根据本实例，读者可以进行以下操作。
使用section元素对文章进行分段。
使用section元素对评论信息进行分块显示。
本实例可以方便操作、提高效率
实例位置：光盘\mingrisoft\02\023
实例说明
在HTML5 的新增结构元素中，article元素表示文档、页面、应用程序或站点中的独自包含成分所构成的一个页面的一部分，并且这部分专用于独立地分类或复用，本实例以博客为例来介绍一下article元素的使用。实例运行结果如图2.13所示。
图2.13 article元素的实例运行效果
技术要点
本实例主要应用HTML5新增结构元素中的article元素，一个article元素中除了内容部分之外，通常还有它自己的标题（通常放在一个 header元素里面），有时还有自己的脚注（通常放在一个footer元素里面）。
实现过程
创建index.html文件，定义article元素，首先在该元素中定义一个header元素，在header元素中嵌入文章的标题和发表日期；然后定义一个p元素，在该元素中嵌入一大段该博客文章的正文；最后在结尾处定义footer元素，在该元素中嵌入文章的著作权作为脚注。关键代码如下：
<article>
<header>
<h1>编程词典简介</h1>
<p>发表日期:<timepubdate="pubdate">2011/10/11</time></p>
</header>
<p><b>编程词典</b>，是明日科技公司数百位程序员...（“编程词典”文章正文）</p>
<footer>
<p><small>著作权归***公司所有。</small></p>
</footer>
</article>
举一反三
根据本实例，读者可以进行以下操作。
在新闻内容页面应用article元素。
在论坛帖子页面应用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元素嵌入评论的内容。具体代码如下：
<article>
<header>
<h1>编程词典简介</h1>
<p>发表日期:
<timepubdatedatetime="2010/10/09">2011/10/09</time>
</p>
</header>
<p><b>编程词典</b>，是明日科技公司研发...（"编程词典"文章正文）</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>发表者：小米</h3>
<p><timepubdatedatetime="2011-10-10T19:10-08:00">1小时前</time></p>
</header>
<p>编程词典，里面的内容很全面。</p>
</article>
<article>
<header>
<h3>发表者：大麦</h3>
<p><timepubdatedatetime="2011-10-10T19:15-08:00">1小时前</time></p>
</header>
<p>编程词典个人版，在哪里能有卖的啊！</p>
</article>
</section>
</article>
举一反三
根据本实例，读者可以进行以下操作。
应用article元素的嵌套构建新闻内容页面。
在博客中应用article元素的嵌套。
本实例可以美化界面、简化操作
实例位置：光盘\mingrisoft\02\025
实例说明
article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。下面就来看一个通过article元素表示插件的实例，其运行结果如图2.15所示。
图2.15 应用article元素表示插件的运行效果
技术要点
实现本实例的关键是在article元素中嵌入一个object元素，object元素用于包含对象，该对象可以是图像、音频、视频等文件。
实现过程
创建index.html文件，在文件中首先定义article元素，在该元素中定义一个h1标题，然后通过object元素与embed元素嵌入一个视频文件，代码如下：
<article>
<h1>电子商务网站</h1>
<object>
<paramname="allowFullScreen"value="true">
<embed src="z/aa.avi" width="400" height="295"></embed>
</object>
</article>
举一反三
根据本实例，读者可以进行以下操作。
在article元素中嵌入音频文件。
在article元素中嵌入Flash动画。
本实例可以美化界面、简化操作
实例位置：光盘\mingrisoft\02\026
实例说明
在HTML5新增的主体结构元素中，section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，但是不要与article混淆，因为article有着自己完整的、独立的内容。下面是一个联合使用<section>和<article>标签的实例，其运行结果如图2.16所示。
图2.16 联合使用<section>和<article>标签
技术要点
在本实例中，首页整体呈现的是一段完整独立的内容，所有我们要用article元素包起来，这其中又可分为两段，所以选用section为其分段。这样就使文档的结构显得很清晰。
实现过程
在页面中定义一个article元素，在其内部首先定义一个h1标题和一个p元素，然后再定义两个 section元素，每个 section元素内部都有一个 h2 标题和一个 p元素。关键代码如下：
<article>
<h1>脚本语言</h1>
<p>通过专门编写的脚本程序，不仅可以生成静态的内容，而且可以生成动态的内容！</p>
<section>
<h2>PHP</h2>
<p>一种服务器端、跨平台、HTML嵌入式的脚本语言...</p>
</section>
<section>
<h2>JavaScript</h2>
<p>Web页面中的一种脚本编程语言...</p>
</section>
</article>
举一反三
根据本实例，读者可以进行以下操作。
联合使用<section>和<article>标签构建目录。
在博客文章的评论中使用HTML5的新增元素。
本实例可以美化界面、简化操作
实例位置：光盘\mingrisoft\02\027
实例说明
我们知道，section元素代表文档或应用程序中一般性的“段”或者“节”。我们可以把网页中的联系信息看成是网页中的一个“节”。本实例将在网页中使用section元素显示关于联系方式的信息，运行结果如图2.17所示。
图2.17 显示联系信息
技术要点
本实例应用section元素在网页中显示联系信息。由于一个section元素通常由标题和内容组成，因此在本实例中，把“联系方式”作为标题，把具体的联系信息作为内容输出到页面中。
实现过程
创建index.html文件，定义<section>标签，在该标签中首先定义一个h3元素作为标题，然后定义一个p元素用于输出具体的联系信息，主要代码如下：
<section>
<h3>联系方式</h3>
<p>
公司名称：吉林省****公司<br>
公司地址：吉林省长春市<br>
联系电话：0431-8899****<br>
电子邮箱：mm@sohu.com<br>
邮政编码：130000
</p>
</section>
举一反三
根据本实例，读者可以进行以下操作。
在网页中通过section元素显示新闻列表。
在网站主页介绍中使用section元素。
本实例可以美化界面、简化操作
实例位置：光盘\mingrisoft\02\028
实例说明
下面是一个nav元素的使用实例，在这个实例中，一个页面由几部分组成，每个部分都带有链接，但只将最主要的链接放入了nav元素中。实例运行结果如图2.18所示。
图2.18 nav元素的使用实例
技术要点
nav元素用来构建导航。导航定义为一个页面中（例如，一篇文章顶端的一个目录，它可以链接到同一页面的锚点）或一个站点内的链接。但是，并不是链接的每一个集合都是一个 nav，只需要将主要的、基本的链接组放进nav元素即可。
实现过程
创建index.html文件，在文件中定义两个nav元素，第一个nav元素用于页面的导航，将页面跳转到其他页面上去（跳转到网站主页或开发文档目录页面）；第二个nav元素放置在article元素中，用作这篇文章中组成部分的页内导航。具体代码如下：
<!DOCTYPEhtml>
<meta charset="UTF-8"/>
<title>nav元素的使用实例</title>
<body>
<h1>编程词典简介</h1>
<nav>
<ul>
<li><a href="/">主页</a></li>
<li><a href="/mr">简介文档</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1>编程词典功能介绍</h1>
<nav>
<ul>
<li><a href="#gl">管理功能</a></li>
<li><a href="#kf">开发功能</a></li>
...more...
</ul>
</nav>
</header>
<section id="rum">
<h1>编程词典的入门模式</h1>
<p>编程词典的入门模式介绍</p>
</section>
<section id="kf">
<h1>编程词典的开发模式</h1>
<p>编程词典的开发模式介绍</p>
</section>
...more...
<footer>
<p>
<ahref="?edit">编辑</a>|
<ahref="?delete">删除</a>|
<ahref="?rename">重命名</a>
</p>
</footer>
</article>
<footer>
<p><small>版权所有：明日科技</small></p>
</footer>
</body>
注意：在HTML5中不要用menu元素代替nav元素。因为menu元素是用在一系列发出命令的菜单上的，是一种交互性的元素，或者更确切地说是使用在Web应用程序中的。
举一反三
根据本实例，读者可以进行以下操作。
把边栏导航定义在nav元素中。
在nav元素中定义服务条款。
本实例可以美化界面、简化操作
实例位置：光盘\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>
<meta charset=UTF-8/>
<title>文章内部的aside元素示例</title>
<body>
<header>
<h1>宋词赏析</h1>
</header>
<article>
<h1><strong>水调歌头</strong></h1>
<p>...但愿人长久，千里共婵娟(文章正文）</p>
<aside>
<!--因为这个aside元素被放置在一个article元素内部，所以分析器将这个aside元素的内容理解成是和article元素的内容相关联的。-->
<h1>名词解释</h1>
<dl>
<dt>宋词</dt>
<dd>词，是我国古代诗歌的一种。它始于梁代，形成于唐代而极盛于宋代。（全部文章）</dd>
</dl>
<dl>
<dt>婵娟</dt>
<dd>美丽的月光</dd>
</dl>
</aside>
</article>
</body>
举一反三
根据本实例，读者可以进行以下操作。
在aside元素中定义友情链接。
在aside元素中定义广告标题。