HTML列表

下面我们来介绍一下如何实现下图所示的列表

list.png

Step 1

观察所需完成列表的结构和构成
经过前期 html 基础知识的学习，可将列表进行如下简单划分

列表.png

观察所需完成列表可知，该列表由无序列表和有序列表嵌套构成。

Step 2

将整个列表由外到内进行如下分解：
首先，最外层是两个无序列表项，且无序列表前的符号为实心圆点。则第一层代码如下：

  
JavaScript
  
Java

运行结果：

• JavaScript


• Java

然后，每一个无序列表包含两个有序列表项，且有序列表前的符号为从1开始的阿拉伯数字。则第二层代码如下：

    
JavaScript
     

       
第一章
        
 第二章
     
    
    
Java
        

            
第一章
            
 第二章
        
    

注意：无序列表的默认符号为实心原点，而有序列表序号默认从1开始，所以以上代码中，无序列表的type 和有序列表的 start 可以不写。
运行结果：

• JavaScript
  
  
  
  1. 第一章
  
  
  2. 第二章
  
  
  
  


• Java
  
  
  
  1. 第一章
  
  
  2. 第二章
  
  
  
  

最后，第二层的每个有序列表包含两个无序列表项，且无序列表前的符号为实心方块。则最终代码如下：

    
JavaScript
     

       
第一章
         

             
const
             
let
         
        
        
 第二章
           

               
function
               
object
           
        
     
    
    
Java
        

            
第一章
               

                   
class
                   
package
               
            
            
 第二章
              

                  
private
                  
public
              
            
        
    

运行结果：

• JavaScript
  
  
  
  1. 第一章
     
     
     
     • const
     
     
     • let
     
     
     
     
  
  
  2. 第二章
     
     
     
     • function
     
     
     • object
     
     
     
     
  
  
  
  


• Java
  
  
  
  1. 第一章
     
     
     
     • class
     
     
     • package
     
     
     
     
  
  
  2. 第二章
     
     
     
     • private
     
     
     • public
     
     
     
     
  
  
  
  

这样整个列表就完成啦！
代码点这里
运行结果点这里