HTML列表实现

一. 初步了解####

先简单了解下（有序列表）和（无序列表）的实现吧。

无序列表

  
Coffee
  
Milk

浏览器显示如下：
Coffee
Milk

有序列表

 
Coffee
 
Milk

浏览器显示如下：
1.Coffee
2.Milk

ul 和 li 列表项内部也可使用段落、换行符、图片、链接以及其他列表等。

二 .列表任务####

1 预期完成图

预期完成图.png

2 DOM树
为了分解上述任务的结构，我画了个DOM树图。

DOM树图.png

3 有了DOM树图，代码很好编写，如下

    

        

            javascript
            

                
第一章
                    

                        
const
                        
let
                    
                
                
第二章
                    

                        
function
                        
object
                    
                
            
        
        

            java
            

                
第一章
                    

                        
class
                        
package
                    
                
                
第二章
                    

                        
private
                        
public
                    
                
            
        
    

这样，就完成了上述列表。

总结：
-在官网上学到基础概念
-解决任务学会了 任务分解+代码实现
-写博客可以可视化自己的思路，方便以后查看

每天都努力一点
谢谢你看完

---