嵌套列表

嵌套列表

---

知识准备

1. 无序列表（ul）

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

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

无序列表始于

标签，每个列表项始于

代码实例

    
Coffee
    
Milk

2. 有序列表（ol）

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

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

有序列表始于

标签，每个列表项始于
1. 标签

代码实例

    
Coffee
    
Milk

---

作业题目

嵌套列表

题目分析

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

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

    
JavaScript
    
Java

第一步

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

  

    
JavaScript
        

            
第一章
            
第二章
        
    
    
Java
        

            
第一章
            
第二章
        
    
  

第二步

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

  
    
  JavaScript
      
  
        
  第一章
          
  
            
  const
            
  let
          
        
        
  第二章
          
  
            
  function
            
  object
          
        
      
    
    
  Java
  
  

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

  

  第三步

总结

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

---

实现代码

  
JavaScript
    

      
第一章
        

          
const
          
let
        
      
      
第二章
        

          
function
          
object
        
      
    
  
  
Java
    

      
第一章
        

          
class
          
package
        
      
      
第二章
        

          
private
          
public
        
      

    
  

效果图