第3次 列表

知识点

1. 会使用有序列表实现数据展示

2. 会使用无序列表实现数据展示【重点】

3. 会使用定义列表实现数据展示【重点】

一、 列表

(一) 列表简介

什么是列表？简单来说，列表就是数据的一种展示形式。如下图所示，数据信息就是采用列表完成的。

[图片上传失败...(image-dff8a8-1551315831648)]

通过上图，大家已经大致了解了什么是列表，列表可以做什么，那么接下来再来看看在HTML中，列表是如何进行分类的。

(二) 列表分类

1. 无序列表

无序列表是一个项目列表，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。

2. 有序列表

同样，有序列表也由一个个列表项组成，列表项目既可使用数字标记，也可以使用字母进行标记。

3. 定义列表

定义列表是当无序列表和有序列表都不适合时，通过自定义列表来完成数据展示，所以定义列表不仅仅是一个项列表，而是项目及其注释的组合。

定义列表在使用时，在每一列项目前不会添加任何标记。

[图片上传失败...(image-b3950f-1551315831648)]

二、 列表的应用

通过前面的列表介绍，大家已经了解了HTML中列表的作用及使用列表的效果。那么，该如何使用列表呢？这就是下面将要讲解的内容—列表的使用方法

(一) 无序列表

1. 描述

(1) . 无序列表使用<ul>和<li>标签组成，

(2) . <ul>作为无序列表的声明，<li>作为每个列表项的起始。

2. 案例演示

效果

[图片上传失败...(image-bdd562-1551315831648)]

核心代码

<ul>

<li>桔子</li>

<li>香蕉</li>

<li>苹果</li>

</ul>

3. 无序列表的类型

无序列表前面的符号，可以通过<ul>的type属性来指定

type的取值

|

取值

|

说明

|
|

disc

|

项目符号显示为实体圆心,****默认值

|
|

square

|

项目符号显示为实体方心

|
|

circle

|

项目符号显示为空心圆

|

案例演示

[图片上传失败...(image-724a66-1551315831648)]

核心代码

<h4>type=circle 时的无序列表：</h4>

<ul type="circle">

<li>桔子</li>

<li>香蕉</li>

<li>苹果</li>

</ul>

<h4>type=disc 时的无序列表：</h4>

<ul type="disc">

<li>桔子</li>

<li>香蕉</li>

<li>苹果</li>

</ul>

<h4>type=square 时的无序列表：</h4>

<ul type="square">

<li>桔子</li>

<li>香蕉</li>

<li>苹果</li>

</ul>

(二) 有序列表

1. 描述

(1) . 无序列表与有序列表的区别就在于，有序列表的各个列表项有先后顺序，所以会使用数字进行标识。

(2) . 有序列表使用<ol>和<li>标签组成，使用<ol>标签作为有序列表的声明，同样使用<li>标签作为每个列表项的起始。

2. 案例演示

效果

[图片上传失败...(image-a9ef08-1551315831647)]

3. 有序列表的类型

与无序列表一样，也可以使用type改变有序列表的项目符号

type取值

|

取值

|

说明

|
|

1

|

使用数字作为项目符号

|
|

A/a

|

使用大写/****小写字母作为项目符号

|
|

I/i

|

使用大写/****小写罗马数字作为项目符号

|

案例演示

[图片上传失败...(image-438c4f-1551315831647)]

核心代码

<table border="0">

<tr>

<td width="200" align="center">

<h4>type=1 时的有序列表</h4>

<ol type="1">

<li>桔子</li>

<li>香蕉</li>

<li>苹果</li>

</ol>

<h4>type=a 时的有序列表</h4>

<ol type="a">

<li>桔子</li>

<li>香蕉</li>

<li>苹果</li>

</ol>

</td>

<td width="200" align="center">

<h4>type=I 时的有序列表</h4>

<ol type="I">

<li>桔子</li>

<li>香蕉</li>

<li>苹果</li>

</ol>

<h4>type=i 时的有序列表</h4>

<ol type="i">

<li>桔子</li>

<li>香蕉</li>

<li>苹果</li>

</ol>

</td>

</tr>

</table>

(三) 定义列表

1. 描述

(1) . 定义列表是一种很特殊的列表形式，它是标题及注释的结合。

(2) . 它使用<dl>标签作为列表的开始，使用<dt>标签作为每个列表项的起始，而对于每个列表项的定义则使用<dd>标签来完成。

2. 案例演示

实现效果

[图片上传失败...(image-1f0e63-1551315831647)]

核心代码

<dl>

<dt>所属学院</dt>

<dd>计算机应用</dd>

<dt>所属专业</dt>

<dd>计算机软件工程</dd>

</dl>

三、 总结

到这里，我们已经学习了在HTML中3种列表的使用方式，归纳起来如下表所示：

|

类型

|

说明

|

项目符号

|
|

无序列表

|

以<ul>标签来实现

以<li>标签表示列表项

|

通过type属性设置项目符号

disc（默认）、square和circle

|
|

有序列表

|

以<ol>标签来实现

以<li>标签表示列表项

|

通过type属性设置项目顺序

1(数字，默认)、A（大写字母）、a（小写字母）、I（大写罗马数字）和i（小写罗马数字）

|
|

定义类表

|

以<dl>标签是实现

以<dt>标签定义列表项

以<dd>标签定义内容

|

无项目符号和显示顺序

|

最后总结一下列表常用的一些技巧，包括列表常用场合及列表使用中的注意事项。

1. 无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性的网页内容。而有序列表则会依据列表项的顺序进行显示。

2. 在实际的网页应用中，无序列表比有序列表应用更加广泛。

3. 定义列表dl-dt-dd,一般适用于带有标题几标题解释性内容或图片和文本内容混合排列的场合。

四、 课堂作业

(一) 制作树形菜单

1. 需求说明

模拟我的电脑中的磁盘文件管理，显示磁盘与文件夹之间的关系

2. 效果

[图片上传失败...(image-ff35fe-1551315831646)]

(二) 制作模拟考试试卷

1. 需求说明

模拟考试试卷的选择题的题型格式，使用有序列表完成模拟试卷

2. 效果

[图片上传失败...(image-4ba716-1551315831646)]

(三) 制作易趣商品列表

1. 需求说明

使用定义列表制作易趣商品列表页面

2. 效果

[图片上传失败...(image-847f72-1551315831646)]

五、 课后作业

(一) 需求

制作百度知道页面中的“品牌全知道”板块，页面效果如下图所示：

[图片上传失败...(image-76536-1551315831646)]