运维开发之路：带你解剖html列表，一个看似简单而又不简单的知识点。

写在开篇

html列表热身

HTML支持有序、无序和定义列表，本篇笔者对每个知识点进行剖析，跟紧步伐，我们一起出发吧！

无序列表

无序列表以ul标签开始，每个列表项都以li标签开始，无序列表是一个项目的列表，默认情况下，此列项目使用粗体圆点（典型的小黑圆圈）进行标记

废话不说，直接看下面小栗子，代码如下：

    
        
        
    
    
        
彩虹运维技术栈社区，公众号ID：TtrOpsStack
        
我们目前在做：
        

            
分享数据库方面技术文章
            
分享监控方面技术文章
            
分享Linux方面技术文章
        
    

效果如下图：

有序列表

有序列表以ol标签开始，每个列表项以li标签开始，列表项目使用数字进行标记

废话不说，直接看下面小栗子，代码如下：

    
        
        
    
    
        
彩虹运维技术栈社区，公众号ID：TtrOpsStack
        
我们目前在做：
        

            
分享数据库方面技术文章
            
分享监控方面技术文章
            
分享Linux方面技术文章
        
    

注意到了吗？只是将ul变成了ol，就是辣么简单。

效果图下图：

自定义列表

自定义列表以dl标签开始，每个自定义列表项以dt开始，每个自定义列表项的定义以dd开始。

废话不说，直接看下面小栗子，代码如下：

    
        
        
    
    
        
彩虹运维技术栈社区，公众号ID：TtrOpsStack
        
欢迎广发盆友来稿，知识点不限！
        

            
Linux知识点：
            
route
            
iptable
            
LVM
            
等等
            
编程语言：
            
Go
            
Python
            
Shell
            
云原生：
            
Docker
            
K8S
            
监控：
            
Prometheus
            
Zabbix
            
数据库：
            
Oracle
            
MySql
        
    

效果如下图：

关于列表标签的知识点做个小总结

是定义无序列表
是定义有序列表
是定义列表项
是定义定义列表
是定义定义项目
是定义定义的描述

接下来我们继续进阶，深入剖析和实战

HTML无序列表解剖

通过css来控制无序列表的样式

先看小栗子，通过css的list-style-type:disc;属性来控制了样式，不过这个是默认的样式，哪怕不指定，也是这样的效果。

    
        
        
    
    
        
彩虹运维技术栈社区，公众号ID：TtrOpsStack
        
运维开发工程师必须掌握的语言
        

            
Go
            
Python
            
Shell
        
    

效果如下图：

接着，来个不一样的小栗子，看下面代码：

    
        
        
    
    
        
彩虹运维技术栈社区，公众号ID：TtrOpsStack
        
运维开发工程师必须掌握的语言
        

            
Go
            
Python
            
Shell
        
    

效果如下图：

这会无序列表的样式是变了吧？变成了空心的圆圈。嘿嘿！

再来个小栗子，我们让它变成正方形，看下面代码：

    
        
        
    
    
        
彩虹运维技术栈社区，公众号ID：TtrOpsStack
        
运维开发工程师必须掌握的语言
        

            
Go
            
Python
            
Shell
        
    

效果如下图：

看到效果了吗？真变成了正方形的无序列表，这就是通过CSS属性来控制的样式

再看一个粒子，如果CSS的属性是none，是什么效果？看下面代码：

    
        
        
    
    
        
彩虹运维技术栈社区，公众号ID：TtrOpsStack
        
运维开发工程师必须掌握的语言
        

            
Go
            
Python
            
Shell
        
    

效果如下图：

字体有限，喜欢的盆友关注公众，本文转载于：https://mp.weixin.qq.com/s/CW...