小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
有序列表
HTML <ol> 元素表示有序列表，默认情况下使用数字作为列表编号。而 <li> 元素则表示列表项，定义在有序列表中。
<ol>
<li>小米手机</li>
<li>华为手机</li>
<li>魅族手机</li>
</ol>
<ol> 元素默认使用数字作为编号，可以通过 type 属性进行修改，该属性的值具有 5 种类型，如下所示：
- "a"：表示小写字母编号
- "A"：表示大写字母编号
- "i"：表示小写罗马数字编号
- "I"：表示大写罗马数字编号
- "1"：默认值，表示数字编号
type属性可以使用 CSS 中的 list-style-type 属性进行替代。
除了 type 属性之外，在 HTML5 版本中新增了 2 个属性，如下所示：
- reversed：布尔值，设置列表采用倒序的方式。
- start：整数值，设置列表序号开始的值。
HTML <li> 元素也同样具有如下 2 个属性：
- value：整数值，设置当前列表项在有序列表的序号。
- type：设置有序列表的数字类型。
无序列表
HTML <ul> 元素表示无序列表，默认情况下使用 disc 作为列表编号。而 <li> 元素则表示列表项，定义在无序列表中。
<ul>
<li>小米手机</li>
<li>华为手机</li>
<li>魅族手机</li>
</ul>
<ul> 元素默认使用 disc 作为编号，可以通过 type 属性进行修改，该属性的值具有 3 种类型，如下所示：
- disc：默认值，表示实心圆
- circle：表示空心圆
- square：表示实心方块
定义列表
TML <dl> 元素在 HTML4 版本中称为定义列表，在 HTML5 版本中称为描述列表。该元素是一个包含术语定义及描述的列表，其中术语定义使用的是 <dt> 元素，描述使用的是 <dd> 元素。该元素通常应用于例如词汇表、键值对列表等。
<!-- <dl>元素: 表示定义列表 -->
<dl>
<!-- <dt>元素: 表示术语定义 -->
<dt>于谦</dt>
<!-- <dd>元素: 表示术语描述 -->
<dd>抽烟</dd>
<dd>喝酒</dd>
<dd>烫头</dd>
<dt>手机</dt>
<dd>小米手机</dd>
<dd>华为手机</dd>
<dd>魅族手机</dd>
</dl>
列表样式
由于 list-style 属性是简写形式，具体划分为如下 3 普通属性：
list-style-type属性list-style-image属性list-style-position属性
项目符号
list-style-type 属性的值可以划分如下 2 种类型的值：
none：表示不显示任何项目符号。- 关键字：表示特定含义的项目符号关键字。
关于 list-style-type 属性的值为关键字的情况，还可以划分为有序列表和无序列表 2 种：
-
有序列表：
decimal：十进制阿拉伯数字，从 1 开始decimal-leading-zero：十进制阿拉伯数字，例如 01、02、03... ...lower-alpha：小写英文字母upper-alpha：大写英文字母lower-roman：小写罗马数字upper-roman：大写罗马数字
-
无序列表：
disc：实心圆点circle：空心圆点square：实心方块
项目符号图像
CSS list-style-image 属性用来设置某个图像为列表元素的项目符号，该属性的值可以划分如下 2 种类型的值：
none：没有任何图像作为项目符号。这种情况下，将使用 list-style-type 属性的值来替代。url()函数：设置引入图像的路径。
ol {
list-style-image: url(imgs/rocket.svg);
}
ul {
list-style-image: url(imgs/rocket.svg);
}
项目符号定位
CSS list-style-position 属性用来设置列表元素的项目符号的位置，该属性的值可以划分如下 2 种类型的值：
inside：该值表示项目符号位于文本块的内部，同时文本会进行缩进。outside：该值表示项目符号位于文本块的左侧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>项目符号定位</title>
<style>
.o1 {
list-style-position: inside;
}
.o2 {
list-style-position: outside;
}
/* list-style简写属性 -> 多个值之间是否存在设置的顺序 */
</style>
</head>
<body>
<ol class="o1">
<li>小米手机</li>
<li>华为手机</li>
<li>魅族手机</li>
</ol>
<ol class="o2">
<li>小米手机</li>
<li>华为手机</li>
<li>魅族手机</li>
</ol>
</body>
</html>
去掉项目符号
list-style: none; 或 list-style-type: none;
都是可以去掉项目符号
项目符号所在区域依旧显示在HTML页面中
ul {
list-style: none;
/* padding属性去掉列表中项目符号所在的区域 */
padding: 0;
/* margin属性去掉列表上下的空白区域 */
margin: 0;
}
