标签之列表

有序列表

有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol> 标签。每个列表项始于 <li>标签。

ol 的 type 属性

• 1 表示列表项目用数字标号（1,2,3...）
• a 表示列表项目用小写字母标号（a,b,c...）
• A 表示列表项目用大写字母标号（A,B,C...）
• i 表示列表项目用小写罗马数字标号（i,ii,iii...）
• I 表示列表项目用大写罗马数字标号（I,II,III...）

<ol>
  <li>第一</li>
  <li>第二</li>
</ol>

提示

有序列表是可以进行嵌套的

效果展示

<ol type="A">
  <li>第一</li>
  <li>第二</li>
  <li>
    <ol>
      <li>水果</li>
      <li>蔬菜</li>
    </ol>
  </li>
</ol>

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表始于 <ul> 标签。每个列表项始于<li> 标签。

ul 的 type 属性

• disc 默认实心圆
• circle 空心圆
• square 小方块
• none 不显示

<ul>
  <li>哈哈</li>
  <li>嘿嘿</li>
</ul>

提示

无序列表是可以进行嵌套的

效果展示

<ul>
  <li>老师</li>
  <li>
    <ul type="square">
      <li>阿里</li>
      <li>京东</li>
    </ul>
  </li>
  <li>嘉美</li>
</ul>

自定义序列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
  <dt>web</dt>
  <dd>vue</dd>
  <dt>uniapp</dt>
  <dd>react</dd>
</dl>

应用场景

在一些需要对列表进行解释的部分，可以使用自定义列表

效果展示

<dl>
  <dt>web</dt>
  <dd>vue</dd>
  <dd>react</dd>
  <dt>java</dt>
  <dd>springboot</dd>
</dl>

随堂训练

轻松一刻 🎧

音乐

音乐

视频教程 🎥

A video

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。