第3章页面的布局与交互 前面章节讲解了网页的基本排版方法，学习者可以在此基础上制作出一些简单页面，但这些页面并未涉及元素的布局与页面交互。一个具有良好布局与交互的网页，才能美化页面的显示效果，并且更好地实现浏览者与网站管理者之间的信息交流。本章将重点讲解使用HTML标签布局页面及实现页面交互的方法，如图31所示。 图31页面布局与交互学习导图 3．1结构元素 HTML5可以使用结构元素构建网页布局，使Web设计和开发变得更加容易，并且对数据挖掘服务更加友好。HTML5提供了各种切割和划分页面的手段，允许用户创建的切割组件不仅能用来有逻辑地组织站点页面布局，而且能够赋予网站聚合的能力。HTML5可以称为“信息到网站设计的映射方法”，因为它体现了信息映射的本质，划分信息更加有逻辑，并给信息加上标签，使其变得容易使用和理解。 在HTML5中，为了使文档的结构更加清晰明确，使用了文档结构元素构建网页布局。其典型布局如图32所示。 微课： 使用结构元素构建网页布局 图32使用HTML5结构元素构建网页布局 HTML5中的主要文档结构元素见表31。 表31HTML5中的主要文档结构元素 元素 描述 header 用于设置页面的页眉 nav 用于构建导航 main 呈现或应用的主体部分，在一个文档中不能出现一个以上的
标签。目前IE浏览器不支持
,其经常被
代替 article 表示文档、页面、应用程序或网站中一体化的内容 aside 表示与页面内容相关、有别于主要内容的部分 section 用于对网站或应用程序中页面中的内容进行分块 footer 用于设置页面的页脚 figure、figcaption和hgroup用于对页面中的内容进行分组 3．1．1header元素 HTML5中的header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。其基本语法格式为

网页主题

．．．
例如，下面的代码定义了文档的欢迎信息。

欢迎光临H5创新学院主页

编程是一种信仰!

3．1．2nav元素 nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。例如，下面的代码定义了导航条中常见的首页、上一页和下一页链接。 3．1．3section元素 section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。在使用section元素时，需要注意以下3点。 （1） 不要将section元素用作设置样式的页面容器，那是div的特性。section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。 （2） 如果article元素、aside元素或nav元素更符合使用条件，那么建议不要使用section元素。 （3） 没有标题的内容区块不要使用section元素定义。 例如，下面的代码定义了文档中的区段，解释了HTML的含义。

HTML

Hypertext Markup Language，超文本标记语言

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

Copyright © 2018 H5创新学院 版权所有

3．1．5article元素 article元素用来定义独立的区块内容，该标签定义的内容可独立于页面中的其他内容使用。article元素经常用在论坛帖子、新闻文章、博客条目和用户评论等应用中。 section元素可以包含article元素，article元素也可以包含section元素。section元素用来对类似的信息进行分组，而article元素则用来放置诸如一篇文章或是博客一类的相对独立的信息，这些内容可在不影响整体内容的情况下被删除或是被放置到新的上下文中。article元素正如它的名称所暗示的那样，提供了一个完整的、相对独立的信息包。相比之下，section元素包含的是有关联的信息，但这些信息自身不能被放置到不同的上下文中，否则其代表的含义就会丢失。 除了内容部分，一个article元素通常有自己的标题(一般放在header标签中)，有时还有自己的脚注。 【例31】使用article元素定义新闻内容。本例文件31．html在浏览器中的显示效果如图33所示。 图33例31页面显示效果 代码如下： article元素示例

H5创新学院发布

发布日期:2018/08/10

新的学年已经到来，H5创新学院将发布新学期的培训计划……

Copyright © 2018 H5创新学院 版权所有

说明： 这个示例讲述的是使用article元素定义新闻的方法。在header元素中嵌入了新闻的标题部分，标题“H5创新学院发布”被嵌入

标签中，新闻的发布日期被嵌入

标签中； 在标题部分下面的

标签中，嵌入了新闻的正文； 在结尾处的footer元素中嵌入了新闻的版权作为脚注。整个示例的内容相对比较独立、完整，因此对这部分内容使用了article元素。 article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，针对该新闻的评论就可以使用嵌套article元素的方法实现； 用来呈现评论的article元素被包含在表示整体内容的article元素中。 【例32】使用嵌套的article元素定义新闻内容及评论。本例文件32．html在浏览器中的显示效果如图34所示。 图34例32页面显示效果 代码如下： 嵌套定义article元素示例

H5创新学院发布

发布日期:2018/08/10

新的学年已经到来，H5创新学院将发布新学期的培训计划……

评论

发表者： 郭靖

2小时前

我更想了解HTML5、CSS3的应用领域的发展状况，事关个人兴趣及职业生涯。

发表者： 老顽童

3小时前

我想了解前端工程师的待遇和未来职业走向。

Copyright © 2018 H5创新学院 版权所有

说明： ① 这个示例比例31的内容更加完整，添加了新闻的评论内容。示例的整体内容是比较独立、完整的，因此使用了article元素。其中，示例的内容又分为几个部分，新闻的标题放在了header元素中，新闻正文放在了header元素后面的

标签中。section元素把评论部分与正文进行了区分，在section元素中嵌入了“评论”标题，放在了

标签中。在每条评论的article元素中又可以分为标题与评论内容部分，分别放在header元素和

标签中。 ② 在HTML5中，article元素可以看作是一种特殊的section元素，它比section元素更强调独立性，即section元素强调分段或分块，而article元素强调独立性。具体来说，如果一块内容相对来说比较独立、完整的时候，应该使用article元素； 但是如果用户需要将一块内容分成几段的时候，应该使用section元素。另外要强调的是，用户不要对没有标题的内容区块使用section元素。 3．1．6aside元素 aside元素用来表示当前页面或新闻的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的、有别于主要内容的部分。 aside元素的用法主要分为以下两种： ① 被包含在article元素内作为主要内容的附属信息部分； ② 在article元素之外使用，作为页面或站点全局的附属信息部分。 图35例33页面显示效果 【例33】使用aside元素定义了网页的侧边栏信息。本例文件33．html在浏览器中的显示效果如图35所示。 代码如下： 侧边栏示例

说明： 本例为一个典型的博客网站中的侧边栏部分，因此放在了aside元素中； 该侧边栏又包含起导航作用的链接，因此放在nav元素中； 侧边栏的标题是“评论”，放在了

标签中； 在标题之后使用了一个无序列表
    标签，用来存放具体的导航链接。 3．1．7分组元素 分组元素用于对页面中的内容进行分组。HTML5中包含3个分组元素，分别是figure元素、figcaption元素和hgroup元素。 微课： figure元素和figcaption元素 1． figure和figcaption元素 figure元素用于定义独立的流内容(图像、图表、照片、代码等)，一般指一个单独的单元。figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。figcaption元素的含义是figure caption，用于为figure元素组添加标题。一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。 【例34】使用figure元素和figcaption元素分组页面内容。本例文件34．html在浏览器中的显示效果如图36所示。 图36例34页面显示效果 代码如下： figure和figcaption元素示例

    H5创新学院是一家专注于IT技术研发、培训等业务的企业，……(此处省略文字)

    H5创新学院总部

    作者： 李工 时间： 2018年9月

    说明： figcaption元素用于定义文章的标题。 2． hgroup元素 hgroup元素用于将多个标题(主标题和副标题或者子标题)组成一个标题组，经常与h1~h6标题元素组合使用。通常将hgroup元素放在header元素中。 在使用hgroup元素时要注意以下几点： ① 如果只有一个标题元素不建议使用hgroup元素； ② 当出现一个或者一个以上的标题与元素时，推荐使用hgroup元素作为标题元素； ③ 当一个标题包含副标题、section或者article元素时，建议将hgroup元素和标题相关元素存放到header元素容器中。 图37例35页面显示效果 【例35】使用hgroup元素分组页面内容。本例文件35．html在浏览器中的显示效果如图37所示。 案例： 制作H5创新学院项目发布页面 代码如下： hgroup元素示例

    H5创新学院网站

    H5创新学院新闻中心

    H5创新学院第三季度项目发布

    3．2页面交互元素 对于网站应用来说，在用户体验方面表现最为突出的就是客户端与服务器端的交互。HTML5增加了交互体验元素，本节将详细讲解这些元素。 3．2．1details和summary元素 微课： details元素和summary元素 details元素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为details定义标题。标题是可见的，当用户单击标题时，会显示或隐藏details中的其他内容。 【例36】使用details元素和summary元素描述文档。标题的折叠效果如图38所示，单击标题的展开效果如图39所示。 图38标题的折叠效果 图39标题的展开效果 代码如下： details和summary元素示例
    H5创新学院课程系列
    • 前端基础课程
    • 前端进阶课程
    • 前端框架课程
    3．2．2progress元素 progress元素用于表示一个任务的完成进度。这个进度的全程可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。 progress元素的常用属性值有两个，具体如下。 ① value： 已经完成的工作量。 ② max： 总共有多少工作量。 图310例37页面显示效果 其中，value和max属性的值必须大于0，且value的值要小于或等于max属性的值。 【例37】使用progress元素显示工程项目开发进度。本例文件37．html在浏览器中的显示效果如图310所示。 微课： progress元素和meter元素 代码如下： progress元素示例

    培训课程实施进度

    3．2．3meter元素 meter元素用于表示指定范围内的数值。例如，显示硬盘容量或者某个候选人的投票人数占投票总人数的比例等，都可以使用meter元素完成。meter元素的常用属性见表32。