HTML中的列表 - 技术栈

列表

有序列表

语法

html 复制代码

<ol>
  <li>有序列表1</li>
  <li>有序列表2</li>
  <li>有序列表3</li>
</ol>

注意：

复制代码

1.ol 里面只能包含 li 标签
2.li 里面可以包含万物，甚至是一个其他列表
3.有序列表在我们需要按照顺序来展示内容使用。

html 复制代码

有序列表的li中放置有序列表
<ol>
  <li>
    <ol>
      <li>有序列表1</li>
      <li>有序列表2</li>
      <li>有序列表3</li>
    </ol>
  </li>
  <li>有序列表2</li>
  <li>有序列表3</li>
</ol>

序号的样式：

html 复制代码

<ol type="A">
  <li>有序列表1</li>
  <li>有序列表2</li>
  <li>有序列表3</li>
</ol>

type="A" 大写字母
type="a" 小写字母
type="1" 数字
type="i" 小写罗马数字
type="I" 大写罗马数字

无序列表

语法

html 复制代码

<ul>
  <li>无序列表1</li>
  <li>无序列表2</li>
  <li>无序列表3</li>
</ul>

注意：

复制代码

1.ul 里面只能包含 li 标签
2.li 里面可以包含万物，甚至是一个其他列表
3.无序列表用的比较多。因为很多时侯，我们可以在无序列表内加上序号。且，很多时候不太注重顺序

html 复制代码

无序列表的li中放置有序列表
<ul>
  <li>
    <ol>
      <li>有序列表1</li>
      <li>有序列表2</li>
      <li>有序列表3</li>
    </ol>
  </li>
  <li>无序列表2</li>
  <li>无序列表3</li>
</ul>

无序列表的样式，及 type 的值

html 复制代码

<ul type="disc">
  <li>无序列表1</li>
  <li>无序列表2</li>
  <li>无序列表3</li>
</ul>

type="disc" 实心圆
type="circle" 空心圆
type="square" 实心方

自定义列表/描述列表

语法.

dl 是整个外部套子

dt 是描述项

dd 是描述项的详细描述

即 dl 包裹一对又一对的 dt、dd

html 复制代码

<dl>
  <dt>描述项1</dt>
  <dd>描述项1的详细描述</dd>
  <dt>描述项2</dt>
  <dd>描述项2的详细描述</dd>
</dl>

例如：

html 复制代码

<dl>
  <dt>家电</dt>
  <dd>冰箱</dd>
  <dd>洗衣机</dd>
  <dd>空调</dd>
  <dt>汽车</dt>
  <dd>轿车</dd>
  <dd>suv</dd>
  <dt>数码</dt>
  <dd>手机</dd>
  <dd>平板</dd>
</dl>

注意：描述列表的使用场景一般为：

展示商品的详细信息

展示产品的规格参数

展示服务的详细描述