HTML——列表

我就是我 2022-06-11 06:47 150阅读 0赞

本篇博客简要讲讲制作网页时如何建立列表。

HTML中列表主要分为三种类型：有序列表(Ordered List)；无序列表(Unordered List)；定义列表(Definition List)。

下面分别对这三个例子进行举例简单讲解一下：

一、有序列表(Ordered List)：

**※ **有序列表是一列项目，列表项目使用数字进行标记，也可以使用罗马数字、大写或小写字母进行标记。

※ 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

※ 下面举几个例子：

1、建立数字编号的列表

（1）、先举个单用<ol>和<li>标签创建带数字编号的列表：（理科科目）

![Center][]

（2）平常大多数人做列表都从1开始，但是有些人不喜欢从1开始，下面就讲讲如何设置列表不从1开始：

∮ 首先讲讲设置时需要用到的属性：

① 设置起始的序号：使用<ol>标签中的start属性

②改变列表内的编号顺序：使用<li>标签中的value属性

∮ 例子：把上边的理科科目起始序号改成从20开始，设置《化学》下边的科目都从40开始

![Center 1][]

2、建立指定编号的格式和顺序列表：用<ol>和<li>标签的type属性指定编号系统的类型。

![Center 2][]

例子：用小写字母将第（1）个理科项目的列表进行修改

![Center 3][]

二、无序列表(Unordered List)：

※ 无序列表是一个项目的列表，此列项目使用实心的圆圈、实心方块等进行标记。  
     ※ 无序列表始于 <ul> 标签。每个列表项始于 <li>。

※ 建立带有项目符号的列表：主要使用用<ul>的type属性指定符号的样式

![Center 4][]

※ 例子：

![Center 5][]

三、定义列表(Definition List)：  
    ※ 自定义列表不仅仅是一列项目，而是项目及其注释的组合。  
    ※ 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

※ 例子：

1、建立无符号无数字的列表：用<dl>和<dd>标签创建

2、建立无符号无数字缩进的列表：用<dl>和<d>标签创建

3、建立术语列表：在<dl>元素中同时使用<dt>和<dd>标签创建术语列表。

∮ 术语列表中的列表项由两部分组成：

①术语：<dt>标签指定

②术语的说明：<dd>标签指定

∮ 例子：

<dl>
            <dt>HTML</dt>
            <dd>超文本标记语言</dd>
            <dt>HTTP</dt>
            <dd>超文本传输协议</dd>
        </dl>

![Center 6][]

[Center]: /images/20220611/4813c1e830eb42b6a8706e6c5dcb6816.png
[Center 1]: /images/20220611/be7144e657324e5397758ebd496a1b5c.png
[Center 2]: /images/20220611/3a41ad498d9f44c19ff5d46855b8586f.png
[Center 3]: /images/20220611/146a08a7c45b49de8fc1674cca75ec08.png
[Center 4]: /images/20220611/df0db20a02ec4d4397358c058061d002.png
[Center 5]: /images/20220611/47810b1063524601b2763db5dc5aef90.png
[Center 6]: /images/20220611/2336ee5f3cc2418f885e440b0abf4767.png