【门户网站建设报价】使用结构元素构建网页布局 _网络营销推广_网站建设设计_网页制作

【门户网站建设报价】

HTML5引入了结构元素构建网页布局、表单控制、API、多媒体、数据库支持等高级应用功能，允许更大的灵活性，支持开发非常精彩的交互式网站。HTML5还提供了高效的数据管理、绘制、视频和音频工具，促进了Web和便携式设备的跨浏览器应用的开发。

5.1 使用结构元素构建网页布局

HTML5可以使用结构元素构建网页布局，使Web设计和开发变得容易起来。HTML5提供了各种切割和划分页面的手段，允许用户创建的切割组件不仅能用来逻辑地组织站点，而且能够赋予网站聚合的能力。HTML5可谓是“信息到网站设计的映射方法”，因为它体现了信息映射的本质，划分信息，并给信息加上标签，使其变得容易使用和理解。

在HTML5中，为了使文档的结构更加清晰明确，使用文档结构元素构建网页布局。HTML5中的主要文档结构元素如下。

<section>标签：代表文档中的一段或者一节。

<nav>标签：用于构建导航。

<header>标签：页面的页眉。

图5-1 使用结构元素构建网页布局

1．<section>标签

<footer>标签：页面的页脚。

<article>标签：文档、页面、应用程序或网站中一体化的内容。

<aside>标签：与页面内容相关、有别于主要内容的部分。

<hgroup>标签：段或者节的标题。

<time>标签：表示日期和时间。

<mark>标签：文档中需要突出的文字。

使用结构元素构建网页布局的典型布局如图5-1所示。

<section>标签用来定义文档中的节(section、他部分。例如，下面的代码定义了文档中的区段，区段），如章节、页眉、页脚或文档中的其解释了PRC的含义：

<p>The People's Republic of China was bom in 1949</p>

</section>

2．<nav>标签

<nav>标签用来定义导航链接的部分。例如，下面的代码定义了导航条中常见的首页、上一页和下一页链接：

<nav>

</n av>

3．<header>标签

<header>标签用来定义文档的页眉（介绍信息）。例如，下面的代码定义了文档的欢迎

信息：

<hl>欢迎光临我的主页</hl>

<p>我的名字是张三丰</p>

<／header>

4．<footer>标签

<footer>标签用来定义section或document的页脚，通常该标签包含网站的版权、创作者的姓名、文档的创作日期及联系信息。例如，下面的代码定义了网站的版权信息：

<／footer>

5．<article>标签

<article>标签用来定义独立的内容，该标签定义的内容可独立于页面中的其他内容使用。

<article>标签经常应用于论坛帖子、报纸文章、博客条目和用户评论等应用中。

<section>标签可以包含<article>标签，<article>标签也可以包含<section>标签。<section>标签用来分组相类似的信息，而<article>标签则用来放置诸如文章或博客一类的信息，这些内容可以在不影响内容含义的情况下被删除或被放置到新的上下文中。<article>标签，正如它的名称所暗示的那样，提供了一个完整的信息包。相比之下，<section>标签包含的是有关联的信息，但这些信息自身不能被放置到不同的上下文中，否则其代表的含义就会丢失。

除了内容部分，一个<article>标签通常有它自己的标题（一般放在<header>标签里面），有时还有自己的脚注。