HTML 列表

前言

  • 列表由 <ul><ol><dl> 等标签来定义。
标签 描述 备注 🔗
<ul> </ul> 定义无序列表(unordered lists) 🔗
<ol> </ol> 定义有序列表(ordered lists) 🔗
<li> </li> 定义一个列表项(list item) 🔗
<dir> </dir> HTML5 不再支持HTML 4.01 已废弃。定义目录列表 🔗
<dl> </dl> 定义一个定义列表(definition lists) 🔗
<dt> </dl> 定义一个定义列表中的项目(definition term) 🔗
<dd> </dd> 定义定义列表中项目的描述(definition description) 🔗
<menu> </menu> 定义菜单列表 🔗
<command> </command> 定义用户可能调用的命令(比如单选按钮、复选框或按钮) H5 新加 🔗
  • 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
  • 有序列表也是一列项目,列表项目使用数字进行标记。
  • 自定义列表不仅仅是一列项目,而是项目及其注释的组合。

  • 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

1、语法

  • 列表使用列表标签 <ul><ol><dl> 来设置。

    1
    2
    3
    4
    5
    <ul>
    .
    列表 元素
    .
    </ul>

2、实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>

    <html>

    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>
    </head>

    <body>
    <ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    </ul>
    <ol>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
    </ol>
    </body>

    </html>
  • 效果

3、无序列表

  • 无序列表使用粗体圆点(典型的小黑圆圈)进行标记。
标签 描述 备注 🔗
<ul> </ul> 定义无序列表(unordered lists) 🔗
<li> </li> 定义一个列表项(list item) 🔗
  • 实例

    1
    2
    3
    4
    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>
  • 效果

4、有序列表

  • 有序列表使用数字进行标记。
标签 描述 备注 🔗
<ol> </ol> 定义有序列表(ordered lists) 🔗
<li> </li> 定义一个列表项(list item) 🔗
  • 实例

    1
    2
    3
    4
    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>
  • 效果

5、自定义列表

标签 描述 备注 🔗
<dl> </dl> 定义一个定义列表(definition lists) 🔗
<dt> </dl> 定义一个定义列表中的项目(definition term) 🔗
<dd> </dd> 定义定义列表中项目的描述(definition description) 🔗
  • 实例

    1
    2
    3
    4
    5
    6
    <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
    </dl>
  • 效果

6、属性

6.1 < ul > 标签属性

属性 描述 备注 🔗
compact compact HTML5 不支持HTML 4.01 已废弃。 规定列表呈现的效果比正常情况更小巧 🔗
type disc
square
circle
HTML5 不支持HTML 4.01 已废弃。 规定列表的项目符号的类型 🔗

6.2 < ol > 标签属性

属性 描述 备注 🔗
compact compact HTML5 不支持。不赞成使用。请使用样式取代它。 规定列表呈现的效果比正常情况更小巧 🔗
reversed reversed 指定列表倒序 (9, 8, 7 …) H5 新加 🔗
start number 一个整数值属性,指定了列表编号的起始值。这个属性在 HTML4 中弃用,但是在 HTML5 中被重新引入 🔗
type a 表示小写英文字母编号
A 表示大写英文字母编号
i 表示小写罗马数字编号
I 表示大写罗马数字编号
1 表示数字编号(默认)
规定列表的类型。不赞成使用。请使用样式代替 🔗

6.3 < li > 标签属性

属性 描述 备注 🔗
type 1
A
a
I
i
disc
square
circle
HTML5 不支持HTML 4.01 已废弃。不赞成使用。请使用样式取代它。 规定使用哪种项目符号 🔗
value number 不赞成使用。请使用样式取代它。 规定列表项目的数字 🔗

6.4 < dir > 标签属性

  • 在 HTML 4.01 中,<dir> 标签支持如下标准属性。
属性 描述 备注 🔗
class classname 规定元素的类名
dir rtl
ltr
规定元素中内容的文本方向
id id 规定元素的唯一 id
lang language_code 规定元素中内容的语言代码
style style_definition 规定元素的行内样式
title text 规定元素的额外信息
  • 在 HTML 4.01 中,<dir> 标签支持如下事件属性。
属性 描述 备注 🔗
onclick script 当鼠标被单击时执行脚本
ondblclick script 当鼠标被双击时执行脚本
onmousedown script 当鼠标按钮被按下时执行脚本
onmousemove script 当鼠标指针移动时执行脚本
onmouseout script 当鼠标指针移出某元素时执行脚本
onmouseover script 当鼠标指针悬停于某元素之上时执行脚本
onmouseup script 当鼠标按钮被松开时执行脚本
onkeydown script 当键盘被按下时执行脚本
onkeypress script 当键盘被按下后又松开时执行脚本
onkeyup script 当键盘被松开时执行脚本
  • 可选的属性。
属性 描述 备注 🔗
compact compact HTML5 不支持HTML 4.01 已废弃。 规定列表必须比常规状态小一号呈现 🔗

6.5 < dl > 标签属性

6.6 < dt > 标签属性

6.7 < dd > 标签属性

6.8 < menu > 标签属性

属性 描述 备注 🔗
label text 描述菜单项的标记 H5 新加 🔗
type context
toolbar
list
描述显示菜单类型. 默认为 “list” H5 新加 🔗

6.9 < command > 标签属性

属性 描述 备注 🔗
checked checked 规定当页面加载时,command 是否被选中。仅用于 radio 或 checkbox 类型 H5 新加 🔗
disabled disabled 规定 command 是否可用 H5 新加 🔗
icon URL 规定作为 command 来显示的图像的 URL H5 新加 🔗
label text 必需。规定 command 的名字,对用户可见 H5 新加 🔗
radiogroup groupname 规定可进行切换且将被切换的 command 所属的组名。仅在类型为 radio 时使用 H5 新加 🔗
type checkbox
command
radio
定义 command 的类型。默认是 “command” H5 新加 🔗

7、列表样式设置

7.1 设置无序列表项标记样式

属性 描述 备注 🔗
type disc
square
circle
HTML5 不支持HTML 4.01 已废弃。 规定列表的项目符号的类型 🔗
  • 在 HTML4 中 ul 属性已废弃,HTML5 已不支持该属性,因此此处使用 CSS 代替来定义不同类型的无序列表。
属性值 描述
list-style-type:disc 圆点列表(默认)
list-style-type:circle 圆圈列表
list-style-type:square 正方形列表
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <h4>圆点列表:</h4>
    <ul style="list-style-type: disc">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
    </ul>

    <h4>圆圈列表:</h4>
    <ul style="list-style-type: circle">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
    </ul>

    <h4>正方形列表:</h4>
    <ul style="list-style-type: square">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
    </ul>
  • 效果

7.2 设置有序列表项序号标记类型

属性 描述 备注 🔗
type a 表示小写英文字母编号
A 表示大写英文字母编号
i 表示小写罗马数字编号
I 表示大写罗马数字编号
1 表示数字编号(默认)
规定列表的类型。不赞成使用。请使用样式代替 🔗
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <h4>编号列表:</h4>
    <ol>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
    </ol>

    <h4>大写字母列表:</h4>
    <ol type="A">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
    </ol>

    <h4>小写字母列表:</h4>
    <ol type="a">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
    </ol>

    <h4>罗马数字列表:</h4>
    <ol type="I">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
    </ol>

    <h4>小写罗马数字列表:</h4>
    <ol type="i">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
    </ol>
  • 效果

7.3 设置有序列表项序号标记起始值

属性 描述 备注 🔗
start number 一个整数值属性,指定了列表编号的起始值。这个属性在 HTML4 中弃用,但是在 HTML5 中被重新引入 🔗
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <ol start="5">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>

    <ol type="A" start="3">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>

    <ol type="i" start="3">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
    </ol>
  • 效果

8、HTML 实例

文章目录
  1. 1. 前言
  2. 2. 1、语法
  3. 3. 2、实例
  4. 4. 3、无序列表
  5. 5. 4、有序列表
  6. 6. 5、自定义列表
  7. 7. 6、属性
    1. 7.1. 6.1 < ul > 标签属性
    2. 7.2. 6.2 < ol > 标签属性
    3. 7.3. 6.3 < li > 标签属性
    4. 7.4. 6.4 < dir > 标签属性
    5. 7.5. 6.5 < dl > 标签属性
    6. 7.6. 6.6 < dt > 标签属性
    7. 7.7. 6.7 < dd > 标签属性
    8. 7.8. 6.8 < menu > 标签属性
    9. 7.9. 6.9 < command > 标签属性
  8. 8. 7、列表样式设置
    1. 8.1. 7.1 设置无序列表项标记样式
    2. 8.2. 7.2 设置有序列表项序号标记类型
    3. 8.3. 7.3 设置有序列表项序号标记起始值
  9. 9. 8、HTML 实例
隐藏目录