HTML5超详细知识点笔记3---HTML列表

HTML列表

1. 无序列表

无序列表适用于无顺序级别的项目，以符号作为前缀。

• 语法：

  <ul>
    <li> 第1项 </li>
    <li> 第2项 </li>
  </ul>
  

• type属性：用于调整项目符号类型。

  • disc：默认符号（●）。
  • circle：空心圆圈（○）。
  • square：方块（■）。
  • none：无符号。

• 语法：

  <ul type="符号类型">
    <li> 项目 </li>
  </ul>
  

• 特殊用法：可为单个

• 标签设置type属性实现不同符号。

2. 有序列表

有序列表适用于有先后顺序的项目。

• 语法：

  <ol>
    <li> 第1项 </li>
    <li> 第2项 </li>
  </ol>
  

• type 属性：用于调整序号类型。

  <ol type="序号类型">
    <li> 项目 </li>
  </ol>
  

  • 1：数字（默认）。
  • a：小写字母（a, b, c…）。
  • A：大写字母（A, B, C…）。
  • i：小写罗马数字（i, ii, iii…）。
  • I：大写罗马数字（I, II, III…）。
  • none：无序号。

• start 属性：调整起始编号。

  <ol start="起始数值">
  

  起始数值为数字（如start="3"对应数字3、字母c、罗马数字III）

3. 定义列表

定义列表用于解释名词，包含名词层（<dt>）和解释层（<dd>）

• 语法：

  <dl>
    <dt> 名词1 </dt>
    <dd> 解释1 </dd>
      
    <dt> 名词2 </dt>
    <dd> 解释2 </dd>
  </dl>
  

• 特点：一个<dt>可对应多个<dd>，解释内容自动缩进。

4. 嵌套列表

支持列表间互相嵌套，实现多级结构。

• 语法：

• <ol>
    <li>项目1</li>
    <li>项目2
      <ul>
        <li>子项1</li>
        <li>子项2</li>
      </ul>
    </li>
  </ol>
  

有序列表之间的嵌套

• 语法：

  <ol>
    <li>项目1</li>
    <li>项目2
      <ol>
        <li>子项1</li>
        <li>子项2</li>
      </ol>
    </li>
  </ol>
  

定义列表的嵌套

• 语法：

  <dl>
    <dt>分类1</dt>
    <dd>
      <dl>
        <dt>子类</dt>
        <dd>解释</dd>
      </dl>
    </dd>
  </dl>