项目2利用HTML5搭建网页结构录ul元素的应用ol元素的应用dl元素的应用列表的嵌套应用录header元素的应用nav元素的应用article、section、aside、footer元素的应用figure和figcation元素的应用

0910目录hgroup与figcation元素的应用details和summary元素的应用

项目描述某学员想要在制作网页时先搭建好网页的基本结构再去填充相应模块内容，会更加有条理一些，HTML5新增了一些结构性元素正好可以解决这个问题，它们可以很方便地将各个主题和概念分隔开来，能使网页文档的结构更加清晰，更容易阅读。本项目主要利用HTML5结构元素进行网页结构的搭建，通过这些标签以及相应的属性设置我们就可以制作出一个有层次结构的网页。

项目效果图项目二效果图-1项目二效果图-2

项目效果图项目二效果图-3

知识储备

知识目标掌握结构元素的使用方法和用途掌握页面交互元素的使用方法和用途熟悉并理解分组元素的使用方法和用途010203

任务1ul元素的应用01

任务描述利用无序列表元素制作一个简易的导航列表。效果图如右图所示。

知识点拨?ul元素01为了使网页内容便于阅读，也为了网页内容排列有序，条理清晰，网页设计中我们常用到列表元素，常用的列表元素有无序列表ul元素、有序列表ol元素和定义列表dl元素（后两个后面逐一介绍），ul元序列表是网页中最常用的元素，它的各个列表项之间的元素没有顺序之分，元素间是并列的关系。例如各大网站的导航一般都是用无序列表做出来的，整齐美观。通过设置无序列表的type属性，可以改变列表前的项目符号，但一般不常用，如ultype=circle可以将默认的实心点改为空心圆圈，type还有disc、square这两个属性值，可自行尝试，这里不再详述。无序列表的语法格式如下：ul li列表项1/li li列表项2/li li列表项3/li ....../ul

ol元素的应用02

任务描述利用有序列表元素，制作一个简易的“国庆热榜”页面，要求要有多条热榜新闻有序排列。效果如右图所示。

知识点拨ol元素01有序列表ol用法和无序列表类似，每对ol/ol中也至少应包含一对li/li。它有3个属性，分别为type、start和reversed。通过设置type属性可以修改有序列表的编号方式，可以是默认的数字编号，也可以是字母等其他编号。start属性可以更改列表编号的起始值，reversed属性表示是否对列表进行反向排序，默认值为true，如olstart=2reversed那就表示列表是反向排序的，起始值是2，排序就是2，1，0，-1...。

dl元素的应用03

任务描述利用定义列表元素，制作一个简易的“信息技术系的专业概况”页面。效果如右图所示。

知识点拨dl元素01定义列表常用于对术语或名词进行描述和说明，它的前面没有任何项目符号，用法如下：dl dt定义描述的术语/dt dd描述上面定义的术语/dd dd描述上面定义的术语/dd ....../dl上面，dt与dd是并列的兄弟关系。

列表的嵌套应用04

任务描述利用上面所学的列表元素，制作一个有内步嵌套的“校园网导航”页面。效果如右图所示。

知识点拨列表的嵌套应用01在实际网站开发中，简单的列表结构往往不能满足我们的需求，比如购物网站的商品若干小分类，小分类又有子类，这样在使用列表时就会用到列表嵌套，做出的效果又整齐又层次分明。

header元素的应用05

任务描述利用结构元素header，制作一个的“安全教育”页面的头部，要求体现出header元素的用法和意义。效果如右图所示。

知识点拨header元素01header元素通常用来放置整个页面或页面内内一个内容区块的标题、logo图片、搜索表单等相关内容。该元素可以包含所有通常放在页面头部的内容。它和网页结构中的head元素不是一回事。

nav元素的应用06

任务描述利用结构元素nav，结合前面学过的无序列表制作一个“学生德育教育”网页的简易导航。

知识点拨nav标签01nav标签定义导航链接的部分。并不是所有的HTML文档都要使用到nav元素,它只是作为标注一个导航链接的区域。nav标签支持所有HTML事件属性。

article、section、aside、footer元素的应用07

任务描述利用HTML5的article、section、aside、footer元素设计一个“读书月”活动宣传的简易网页，要求结构完整，效果如右图所示。

知识点拨?article元素01section元素0203?sectio