无序列表圆点距离_HTML+CSS 基础知识-列表

一、列表元素

1、概述

列表方式呈现一系列平行的内容，在 HTML 页面中同样提供了列表元素来完成类似的功能，可以划分为如下 3 列表：
​
有序列表（有数字顺序序号）
无序列表（全是 · 没有序号）
定义列表

2.1、有序列表

HTML <ol> 元素表示有序列表，默认情况下使用数字作为列表编号。
而 <li> 元素则表示列表项，定义在有序列表中。
​
例：
​
<ol>
  <li>iPhone手机</li>
  <li>小米手机</li>
  <li>华为手机</li>
</ol>
<ol> 元素默认使用数字作为编号，可以通过 type 属性进行修改，该属性的值具有 5 种类型，如下所示：
​
“a”：表示小写字母编号
“A”：表示大写字母编号
“i”：表示小写罗马数字编号
“I”：表示大写罗马数字编号
“1”：默认值，表示数字编号
type 属性的值默认情况下会作用到整个有序列表。
​
说明：type 属性在 HTML4 版本中被弃用，但在 HTML5 版本中被重新引入。如果不是为了元素的语义化的话，该属性可以使用 CSS 中的 list-style-type 属性进行替代。
​
除了 type 属性之外，在 HTML5 版本中新增了 2 个属性，如下所示：
​
1、reversed：布尔值，设置列表采用倒序的方式。
​
注意：该属性只需要定义属性名即可，而不需要设置属性值。
​
如下示例代码展示了 reversed 属性的用法：
​
<ol reversed>
  <li>iPhone手机</li>
  <li>小米手机</li>
  <li>华为手机</li>
</ol>
​
效果便是倒序输出
​
2、start：整数值，设置列表序号开始的值。
​
说明：该属性在 HTML4 版本中被弃用，在 HTML5 版本中被重新引入。
HTML <li> 元素也同样具有如下 2 个属性：
​
value：整数值，设置当前列表项在有序列表的序号。（如果和start一起使用，会执行value的作用）
​
说明：该属性在 HTML4 版本中被弃用，在 HTML5 版本中被重新引入。
​
type：设置有序列表的数字类型。
​
说明：该属性值会覆盖 <ol> 元素的 type 属性值。
​
由于 <li> 元素的 2 个属性，会导致两种比较特殊的情况出现：
​
<li> 元素通过 value 属性设置了该元素在有序列表的序号，但与默认的序号是不同的。
如下示例代码展示了这种情况：
​
<ol start="3">
  <li>iPhone手机</li>
  <li value="5">小米手机</li>
  <li>华为手机</li>
</ol>
​
结果是 3 5 6 ， 因为第二个li开始设置了value值，也导致了第三个默认升序

2.2、无序列表

HTML <ul> 元素表示无序列表，默认情况下使用 disc 作为列表编号。而 <li> 元素则表示列表项，定义在无序列表中。
​
如下示例代码展示了 HTML 中无序列表的用法：
​
<ul>
  <li>iPhone手机</li>
  <li>小米手机</li>
  <li>华为手机</li>
</ul>
<ul> 元素默认使用 disc 作为编号，可以通过 type 属性进行修改，该属性的值具有 3 种类型，如下所示：
​
disc：默认值，表示实心圆
circle：表示空心圆
square：表示实心方块
说明：type 属性已经被弃用，建议使用 CSS 中的 list-style-type 属性进行替代。
​
HTML <li> 元素的 value 属性或 type 属性都是针对有序列表的，对无序列表是无效的。

3、列表嵌套

在一个有序列表或无序列表中定义另一个有序或无序列表作为子列表，这样就构成了列表嵌套。列表嵌套会有如下 4 种情况：
​
有序列表嵌套有序列表：父级和子级列表默认使用数字作为序号。
​
如下示例代码所示：
​
<ol>
  <li>iPhone手机
    <ol>
      <li>iPhone 7</li>
      <li>iPhone 8</li>
      <li>iPhone X</li>
    </ol>
  </li>
  <li>小米手机</li>
  <li>华为手机</li>
</ol>
有序列表嵌套无序列表：父级有序列表默认使用数字作为序号，子级无序列表默认使用 circle 作为序号。
​
如下示例代码所示：
​
<ol>
  <li>iPhone手机
    <ul>
      <li>iPhone 7</li>
      <li>iPhone 8</li>
      <li>iPhone X</li>
    </ul>
  </li>
  <li>小米手机</li>
  <li>华为手机</li>
</ol>
无序列表嵌套无序列表：父级无序列表默认使用 disc 作为序号，子级无序列表默认使用 circle 作为序号。
​
如下示例代码所示：
​
<ul>
  <li>iPhone手机
    <ul>
      <li>iPhone 7</li>
      <li>iPhone 8</li>
      <li>iPhone X</li>
    </ul>
  </li>
  <li>小米手机</li>
  <li>华为手机</li>
</ul>
无序列表嵌套有序列表：父级无序列表默认使用 disc 作为序号，子级有序列表默认使用数字作为序号。
​
如下示例代码所示：
​
<ul>
  <li>iPhone手机
    <ol>
      <li>iPhone 7</li>
      <li>iPhone 8</li>
      <li>iPhone X</li>
    </ol>
  </li>
  <li>小米手机</li>
  <li>华为手机</li>
</ul>

4、定义列表

HTML <dl> 元素在 HTML4 版本中称为定义列表，在 HTML5 版本中称为描述列表。该元素是一个包含术语定义及描述的列表，其中术语定义使用的是 <dt> 元素，描述使用的是 <dd> 元素。该元素通常应用于例如词汇表、键值对列表等。
​
如下示例代码展示了定义列表的基本用法：
​
<dl>
  <dt>爱好</dt>
    <dd>抽烟</dd>
    <dd>喝酒</dd>
    <dd>烫头</dd>
  <dt>职业</dt>
    <dd>程序员</dd>
    <dd>讲师</dd>
    <dd>说书人</dd>
</dl>
​
说明：不要将定义列表用来实现缩进效果，因为这样做法导致语义化不清晰。

二、列表样式

1、概述

说明：h5版本以摒弃以往的type属性，只能用list-style代替

列表样式主要是针对 HTML 页面中的列表元 CSS 所提供的样式。具体来讲，主要就是 CSS 中的 list-style 属性以及相关属性内容。
​
由于 list-style 属性是简写形式，具体划分为如下 3 普通属性：
​
list-style-type 属性
list-style-image 属性
list-style-position 属性

2、项目符合样式

CSS list-style-type 属性用来设置列表元素的项目符号（编号/序号）。该属性可以被应用在 <ol> 元素、<ul> 元素和 <li> 元素中。
​
list-style-type 属性的值可以划分如下 2 种类型的值：
​
1、none：表示不显示任何项目符号。
​
2、关键字：表示特定含义的项目符号关键字。
关于 list-style-type 属性的值为关键字的情况，还可以划分为有序列表和无序列表 2 种：
​
（1）有序列表：
    decimal：十进制阿拉伯数字，从 1 开始
    decimal-leading-zero：十进制阿拉伯数字，例如 01、02、03… …
    lower-alpha：小写英文字母
    upper-alpha：大写英文字母
    lower-roman：小写罗马数字
    upper-roman：大写罗马数字
（2）无序列表：
    disc：实心圆点
    circle：空心圆点
    square：实心方块
​
如下示例代码展示了 list-style-type 属性的用法：
​
ul {
  list-style-type: circle;
}
​
ol {
  list-style-type: lower-alpha;
}

3、项目符号图像

说明：自己定义符号显示图标

CSS list-style-image 属性用来设置某个图像为列表元素的项目符号
该属性的值可以划分如下 2 种类型的值：
​
1、none：没有任何图像作为项目符号。这种情况下，将使用 list-style-type 属性的值来替代。
2、url() 函数：设置引入图像的路径。
​
如下示例代码展示了 list-style-image 属性的用法：
​
ul {
  list-style-image: url("files/rocket.svg");
}

4、项目符号定位

CSS list-style-position 属性用来设置列表元素的项目符号的位置，该属性的值可以划分如下 2 种类型的值：
​
1、inside：该值表示项目符号位于文本块的内部，同时文本会进行缩进。
2、outside：该值表示项目符号位于文本块的左侧。
​
如下示例代码展示了 list-style-position 属性的用法：
​
<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <title>项目符号定位</title>
  <style>
    li {
      background-color: lightcoral;
    }
​
    .inside {
      list-style-position: inside;
    }
​
    .outside {
      list-style-position: outside;
    }
  </style>
</head>
​
<body>
  <ul class="inside">
    <li>iPhone手机</li>
    <li>小米手机</li>
    <li>华为手机</li>
  </ul>
  <ul class="outside">
    <li>iPhone手机</li>
    <li>小米手机</li>
    <li>华为手机</li>
  </ul>
</body>
​
</html>
​

5、list-style 属性

说明：以上简写形式

CSS list-style 属性是一个简写属性，list-style-type 属性、list-style-image 属性和 list-style-position 属性的值可以同时定义在 list-style 属性中。
​
如下示例代码展示了 list-style 属性的用法：
​
ul {
  list-style: url("files/rocket.svg") outside;
}