嵌套列表
知識準備
-
無序列表（ul）
無序列表是一個項目的列表，此列項目使用粗體圓點進行標記（可以由ul的CSS屬性list-style-type進行設置）
- disc（默認，實心圓）
- square（方形）
- circle（空心圓）
- ……
無序列表始于<ul>標簽，每個列表項始于<li>
代碼實例
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
-
有序列表（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>
效果圖
