HTML列表元素详解：ol, ul, dl及其属性-优快云博客

本文链接：https://blog.youkuaiyun.com/hsjajwbsbsjs/article/details/123647105

HTML定义了几个用来生成内容项目列表的元素。列表的类型有有序列表、戊戌列表和说明列表。

html列表

li元素
- 局部属性
ol元素

li元素

li代表列表中的项目（list item）。它可以与ul、ol和menu元素（目前还没有主流浏览器支持menu，仍处于试验截断）。

元素	`li`
元素类型	无
允许具有的父元素	`ul` `ol` `menu`
局部属性	`value`（仅用于父元素为`ol`时）
内容	流内容
标签用法	开始标签和结束标签
默认样式	`li { display: list-item; }`

局部属性

局部属性value在li元素的value属性讲解。

ol元素

ol元素用来生成有序列表（ordered list）。列表项目用li表示。

元素	`ol`
元素类型	流元素
允许具有的父元素	任何可以包含流元素的元素
局部属性	`start` `reversed` `type`
内容	`li`
标签用法	开始标签和结束标签
默认样式	`ol { display: block; list-style-type: decimal;-webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0; -webkit-margin-end: 0; padding-start: 40px; }`

入门示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ol示例</title>
</head>
<body>
<div style="background: gray;
            border: solid;
            border-radius: 40px;
            display: flex;
            align-content: center;
            justify-content: center;">
    <div style="background: yellow;
                color: deepskyblue;">
        编程语言排行榜
        <ol>
            <li>Python</li>
            <li>Java</li>
            <li>C</li>
            <li>C++</li>
            <li>...</li>
        </ol>
    </div>
</div>
</body>
</html>

运行结果
我们可以看到，浏览器为ol的每一个li前面悬挂了一个序号，按文档升序。这种排序可以改变起始值，也可以改变排序的编号类型。通过ol元素的局部属性来控制。

局部属性

start

start属性用来定义开始的顺序。默认为“1”。下面为将start设置为其他值的效果：

<ol start="0">

start为0

<ol start="-1">

start为-1

<ol start="2">

start=2
可见列表从所设置的start开始升序。

type

type属性用来设定显示在各列表项旁的编号类型。它支持“1”、“a”、“A”、“i”、“I”（大写英文字母I）。

1

辞职为默认值，表示阿拉伯数字。

<ol type="1">

type=1

a

此值表示从英语字母序小写排列。

<ol type="a">

type=a

A

此值表示按英文字母序大写排列。

<ol type="A">

type=A

i

此值代表按小写罗马数字序排列。

<ol type="i">

type=i

I

此值代表按大写罗马数字序排列。

<ol type="I">

type=I

reversed

此属性为布尔属性，设置后列表按照从start开始降序排列，而start为最后一个li的序号。

li元素value属性

设置某个li在该ol中的序号。该元素之后的元素默认情况下从该元素的value值开始以reversed定义的升降序来排列。
注意：

取值应为阿拉伯数字，会自动映射到type定义的类型上。
取值应为整数，否则无效。

ul元素

ul元素表示无序列表。与ol元素一样，ul列表项用li元素。

元素	`ul`
元素类型	无
允许具有的父元素	任何可以包含流元素的元素
局部属性	无
内容	`li`
标签用法	开始标签和结束标签
默认样式	`ul { display: block; list-style--type: disc; -webkit-margin-before: 1em; -wbkit-margin-after: 1em; -webkit-margin-start: 0; -webkit-margin-end: 0;-webkit-padding-start: 40px; }`

将上面编程语言排行的文档用ul重写

<html>
<head>
    <meta charset="utf-8">
    <title>ol示例</title>
</head>
<body>
<div style="background: gray;
            border: solid;
            border-radius: 40px;
            display: flex;
            align-content: center;
            justify-content: center;">
    <div style="background: yellow;
                color: deepskyblue;
                ">
        编程语言排行榜
        <ul>
            <li>Python</li>
            <li value="d">Java</li>
            <li>C</li>
            <li>C++</li>
            <li>...</li>
        </ul>
    </div>
</div>
</body>
</html>

ul重写版

dl元素

dl元素用来生成说明列表（declare list）。说明列表包含着一系列术语/说明组合（也即一系列附带定义的术语）。定义说明列表要用到三个元素：dl dt dd。

元素	`dl`
元素种类	流元素
允许具有的父元素	任何能包含流元素的元素
局部属性	无
内容	`dt` `dd`
标签用法	开始标签和结束标签
默认样式	`dl { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0; -webkit-margin-end: 0; }`

dl元素的CSS样式和ol或ul没什么不同。只是其子元素前面不再有前缀符了。
代码示例在讲解了dt和dd元素之后给出。

dt元素

dt元素表示说明列表中的术语（declare term）。

元素	`dt`
元素种类	无
允许具有的父元素	`dl`
局部属性	无
内容	流内容
标签用法	开始标签和结束标签
默认样式	`dt { display: block; }`

dd元素

dd元素表示说明列表中的定义（declare definition）。
dt元素表示说明列表中的术语（declare term）。

元素	`dd`
元素种类	无
允许具有的父元素	`dl`
局部属性	无
内容	流内容
标签用法	开始标签和结束标签
默认样式	`dt { display: block; }`

说明列表代码示例

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>说明列表示例</title>
    <style>
        dt{
            color: blue;
            font-size: larger;
            font-weight: bolder;
            padding-left: 1em;
        }
        dd{
            color: brown;
            text-indent: 2ch;
        }
    </style>
</head>
<body>
<div style="display: flex;
            align-content: center;
            justify-content: center;
            background: gray;
            border: solid;
            border-radius: 40px;
            ">
    <div>
        <dl style="background: yellow;
                    margin: 5em 5em;">
            <dt>Python</dt>
            <dd>Python由荷兰数学和计算机科学研究学会的吉多·范罗苏姆 于1990 年代初设计，作为一门叫做ABC语言的替代品。
                [1]  Python提供了高效的高级数据结构，还能简单有效地面向对象编程。Python语法和动态类型，以及解释型语言的本质，使它成为多数平台上写脚本和快速开发应用的编程语言，
                [2]  随着版本的不断更新和语言新功能的添加，逐渐被用于独立的、大型项目的开发。</dd>
            <dt>Java</dt>
            <dd>Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。
                Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程 [1]  。</dd>
            <dt>C</dt>
            <dd>C语言是一门面向过程的、抽象化的通用程序设计语言，广泛应用于底层开发。C语言能以简易的方式编译、处理低级存储器。C语言是仅产生少量的机器语言以及不需要任何运行环境支持便能运行的高效率程序设计语言。
                尽管C语言提供了许多低级处理的功能，但仍然保持着跨平台的特性，以一个标准规格写出的C语言程序可在包括类似嵌入式处理器以及超级计算机等作业平台的许多计算机平台上进行编译。</dd>
            <dt>C++</dt>
            <dd>C++是一种计算机高级程序设计语言，由C语言扩展升级而产生 [17]  ，最早于1979年由本贾尼·斯特劳斯特卢普在AT&T贝尔工作室研发。 [2]
                C++既可以进行C语言的过程化程序设计，又可以进行以抽象数据类型为特点的基于对象的程序设计，还可以进行以继承和多态为特点的面向对象的程序设计。C++擅长面向对象程序设计的同时，还可以进行基于过程的程序设计。
                C++拥有计算机运行的实用性特征，同时还致力于提高大规模程序的编程质量与程序设计语言的问题描述能力。</dd>
        </dl>
    </div>
</div>
</body>
</html>