任务1.4　在网页中添加列表

☑学习目标

①能够表述网页中列表的常见类型。

②能够按要求使用有序列表和无序列表。

☑任务描述

根据“网页广告单页”效果图，制作该网页中的导航。

☑知识学习与课堂练习

在网页中大部分信息都是通过列表形式显示的，如信息分类、新闻列表、菜单、排行榜等，除了网页正文的段落文本和标题文本外，其他信息都需要列表结构进行组织和管理。

HTML提供的常用列表结构有无序列表和有序列表，这两者可以通用。

1.无序列表＜ul＞

无序列表＜ul＞元素用来将“标签内容”以列表的方式显示，列表项目无先后顺序之分，也就是没有编号。

列表内的数据项以＜li＞元素来列举，＜ul＞元素标签中的＜li＞元素项目数据默认会加上一个圆点符号。无序列表是一个项目的列表，此列项使用实心圆进行标记。

其语法形式如下：

【课堂练习1.4-1】无序列表的简单应用。

打开Visual Studio Coder软件，在＜body＞标签中输入如下代码：

显示效果如图1.4-1所示。

2.有序列表＜ol＞

有序列表＜ol＞元素用来将“标签内容”以列表的方式显示，列表项目有先后顺序之分，也就是有顺序编号。

列表内项目内容是以＜li＞元素来列举，＜ol＞元素标签中的＜li＞元素项目内容默认会顺序加上1、2、3、…的数字编号。

其语法形式如下：

【课堂练习1.4-2】有序列表的简单应用。

打开Visual Studio Coder软件，在＜body＞标签中输入如下代码：

显示效果如图1.4-2所示。

3.嵌套列表

当一个列表内容中还有细分的列表时，就需要嵌套一个列表进去。同样是在＜li＞标签中放入＜ul＞或＜ol＞标签。

【课堂练习1.4-3】列表的嵌套使用。

打开Visual Studio Coder软件，在＜body＞标签中输入如下代码：

显示效果如图1.4-3所示。

【课堂练习1.4-4】有序列表和无序列表的嵌套使用。

打开Visual Studio Coder软件，在＜body＞标签中输入如下代码：

显示效果如图1.4-4所示。

☑任务实施

①打开任务1.3中的index.html文件。

②完成“网页广告单页”中菜单栏的显示效果。

☑任务回顾

网页中的列表是一个非常有用的元素。列表用于包含内容相同或相近的元素。

常用列表有三种类型：无序列表、有序列表和定义列表。

在实际运用中，常使用无序列表来实现导航和新闻列表的设置；使用有序列表实现条文款项的表示；使用定义列表来制作图文混排的排版模式。

☑任务拓展

HTML提供的常用列表结构除了无序列表和有序列表外，还有定义列表＜dl＞。定义列表＜dl＞不仅仅是一列项目，而且是项目及其注释的组合。用来将“标签内容”中的定义项目内容以缩排的方式显示，定义项目无先后顺序之分，没有编号也没有项目符号。

自定义列表以＜dl＞标签开始，每个自定义列表项以＜dt＞开始，每个自定义列表项的定义以＜dd＞开始。

其语法形式如下：

【课后练习】完成图1.4-5和图1.4-6所示的效果。