嵌套列表

---

知识准备

1. 无序列表（ul）

无序列表是一个项目的列表，此列项目使用粗体圆点进行标记（可以由ul的CSS属性list-style-type进行设置）

• disc（默认，实心圆）
• square（方形）
• circle（空心圆）
• ……

无序列表始于<ul>标签，每个列表项始于<li>

代码实例

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

2. 有序列表（ol）

有序列表与无序列表用法相同，只是列表项目使用数字进行标记

• decimal （默认，数字）
• lower-roman（小写罗马数字）
• upper-roman（大写罗马数字）
• ……

有序列表始于<ol>标签，每个列表项始于<li>标签

代码实例

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

---

作业题目

嵌套列表

题目分析

这是一个典型的有序无序嵌套的列表，我们从外到内逐层分析。

• 首先最外层JavaScript和Java是一个典型的无序列表，因此我们首先可以先写一个无序列表

<ul>
    <li>JavaScript</li>
    <li>Java</li>
</ul>

第一步

• 然后在往里走一层，这里我们应该抛开外层的东西，只看里面的东西。对于每一个列表项，它们分别又都包含一个有序列表。所以我们在第一步的基础上在写一个有序列表。

  <ul>
    <li>JavaScript
        <ol>
            <li>第一章</li>
            <li>第二章</li>
        </ol>
    </li>
    <li>Java
        <ol>
            <li>第一章</li>
            <li>第二章</li>
        </ol>
    </li>
  </ul>

第二步

• 同样，将我们之前写的都忘记，1.第一章下面是一个无序列表，但是和之前不同的是这个无序列表项的标记是正方形，因此我们在上一步基础上再写一个正方形标记的无序列表就大功告成了！

  <ul class="disc">
    <li>JavaScript
      <ol>
        <li>第一章
          <ul class="square">
            <li>const</li>
            <li>let</li>
          </ul>
        </li>
        <li>第二章
          <ul class="square">
            <li>function</li>
            <li>object</li>
          </ul>
        </li>
      </ol>
    </li>
    <li>Java</li>
  </ul>
  

  需要注意的是这里由于无序列表默认是小圆球，因此我们需要用class来指定其样式，目前HTML5并不赞成这种方式实现标记，应该用我们之前说过的CSS属性实现，这里为了方便展示就用这种方式来实现

  第三步

总结

可以看到对于循环嵌套的列表，我们只需要一层一层拆着看，就会简单很多，并不需要考虑过多的复杂结构。

---

实现代码

<ul class="disc">
  <li>JavaScript
    <ol>
      <li>第一章
        <ul class="square">
          <li>const</li>
          <li>let</li>
        </ul>
      </li>
      <li>第二章
        <ul class="square">
          <li>function</li>
          <li>object</li>
        </ul>
      </li>
    </ol>
  </li>
  <li>Java
    <ol>
      <li>第一章
        <ul class="square">
          <li>class</li>
          <li>package</li>
        </ul>
      </li>
      <li>第二章
        <ul class="square">
          <li>private</li>
          <li>public</li>
        </ul>
      </li>

    </ol>
  </li>
</ul>

效果图