从屌丝到架构师的飞越（HTML篇）-HTML列表

一、介绍

列表是一种数据项构成的有限序列，即按照一定的线性顺序，排列而成的数据项的集合，在这种数据结构上进行的基本操作包括对元素的的查找，插入，和删除

从某种意义上讲，不是描述性文本的任何内容都可以认为是列表。人口普查、太阳系、餐馆菜单等都可以表示为一个列表或列表的列表。列表分为无序列表、有序列表

二、知识点介绍

1、列表标签

2、无序列表

3、有序列表

4、嵌套列表

5、定义列表的标记

6、目录列表

和菜单列表

三、上课对应视频的说明文档

1：列表标签：

在 html 页面中，合理的使用列表标签可以起到提纲和格式排序文件的作用。

列表分为两类：一是无序列表，一是有序列表，

无序列表就是项目各条列间并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。

有序条列就是指各条列之间是有顺序的，比如从1、2、3…一直延伸下去

2、无序列表

无序列表使用的一对标签是

，无序列表指没有进行编号的列表, 每一个列表项前使用

。

的属性type 有三个选项,这三个选项都必须小写:

disc 实心园

circle 空心园

square 小方块

实例：

• 默认的无序列表加"实心园"

• 默认的无序列表"实心园"

• 默认的无序列表"实心园"

• 无序列表square 加方块

• 无序列表square 加方块

• 无序列表square 加方块

• 无序列表circle 加空心园

• 无序列表circle 加空心园

• 无序列表circle 加空心园

3、有序列表

有序列表使用标签

，每一个列表项前使用

。

列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项，编号会自动调整。

顺序编号的设置是由

的两个属性type 和start 来完成的。

start=编号开始的数字，如果从1 开始可以省略，或是在

1. 标签中设定value＝"n"改变列表行项目的特定编号，例如
7. 。

   type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母。为了使用这些属性，把它们放在

   或
   1. 的的初始标签中。

      有序列表

   5. 第1 项

   6. 第2 项

   7. 第3 项

   20. 第4 项

   2. 第1 项

   3. 第2 项

   4. 第3 项

   4、嵌套列表

   将一个列表嵌入到另一个列表中，作为另一个列表的一部分，叫嵌套列表。无论是有序列表和无序列表的嵌套，浏览器都可以自动地分成排列。

   开头第一行内容

8. 这是以序号类型a 开头第二行内容

3. 这是以序号A 类型C 开头第一行内容

51. 这是以序号数字51 开头第一行内容
52. 这是以序号数字51 开头第二行内容
53. 这是以序号数字51 开头第三行内容

4. 这是以序号A 类型C 开头第三行内容

9. 这是以序号类型a 开头第三行内容

5、定义列表的标记

定义列表的标记也叫描述性列表，定义列表默认为两个层次，第一层为列表项标签

，第二层为注释项标签
。
和
标签通常是成对使用的。也可以一个列表项对应于几个解释项，这种方式很少用。

默认的注释是显示在另一行中,当使用

后,注释项和列表项将显示在同一行。其格式为：

第1 项

注释1

第2 项

注释2

第3 项

注释3

实例：

定义性列表

WWW：

WWW 是(World wide web)的缩写，也可简写web;

WWW：

WWW 又叫万维网;

WWW：

internet 提供的最常用的服务是WWW;

6、目录列表

和菜单列表

为目录列表标签,为菜单列表标签,它们的格式和无序列表

是一样的,例如:

格式1:

• 第一项

• 第二项

• 第三项

格式2：

• 第一项

• 第二项

• 第三项

实例：

• 默认的无序列表加"实心园"

• 默认的无序列表"实心园"

• 默认的无序列表"实心园"

• 默认的目录列表加"实心园"

• 默认的目录列表"实心园"

• 默认的目录列表"实心园"

• 默认的菜单列表加"实心园"

• 默认的菜单列表"实心园"

• 默认的菜单列表"实心园"

• 目录列表square 加方块

• 目录列表square 加方块

• 目录列表square 加方块

• 菜单列表circle 加空心园

• 菜单列表circle 加空心园

• 菜单列表circle 加空心园