写在开篇
html列表热身
HTML支持有序、无序和定义列表，本篇笔者对每个知识点进行剖析，跟紧步伐，我们一起出发吧！
无序列表
无序列表以ul标签开始，每个列表项都以li标签开始，无序列表是一个项目的列表，默认情况下，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
废话不说，直接看下面小栗子，代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>陪你复习巩固，攻破前端技能</title>
</head>
<body>
<h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
<p>我们目前在做：</p>
<ul>
<li>分享数据库方面技术文章</li>
<li>分享监控方面技术文章</li>
<li>分享Linux方面技术文章</li>
</ul>
</body>
</html>效果如下图：
有序列表
有序列表以ol标签开始，每个列表项以li标签开始，列表项目使用数字进行标记
废话不说，直接看下面小栗子，代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>陪你复习巩固，攻破前端技能</title>
</head>
<body>
<h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
<p>我们目前在做：</p>
<ol>
<li>分享数据库方面技术文章</li>
<li>分享监控方面技术文章</li>
<li>分享Linux方面技术文章</li>
</ol>
</body>
</html>注意到了吗？只是将ul变成了ol，就是辣么简单。
效果图下图：
自定义列表
自定义列表以dl标签开始，每个自定义列表项以dt开始，每个自定义列表项的定义以dd开始。
废话不说，直接看下面小栗子，代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>陪你复习巩固，攻破前端技能</title>
</head>
<body>
<h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
<p>欢迎广发盆友来稿，知识点不限！</p>
<dl>
<dt>Linux知识点：</dt>
<dd>route</dd>
<dd>iptable</dd>
<dd>LVM</dd>
<dd>等等</dd>
<dt>编程语言：</dt>
<dd>Go</dd>
<dd>Python</dd>
<dd>Shell</dd>
<dt>云原生：</dt>
<dd>Docker</dd>
<dd>K8S</dd>
<dt>监控：</dt>
<dd>Prometheus</dd>
<dd>Zabbix</dd>
<dt>数据库：</dt>
<dd>Oracle</dd>
<dd>MySql</dd>
</dl>
</body>
</html>效果如下图：
关于列表标签的知识点做个小总结
<ul>是定义无序列表
<ol>是定义有序列表
<li>是定义列表项
<dl>是定义定义列表
<dt>是定义定义项目
<dd>是定义定义的描述接下来我们继续进阶，深入剖析和实战
HTML无序列表解剖
通过css来控制无序列表的样式
先看小栗子，通过css的list-style-type:disc;属性来控制了样式，不过这个是默认的样式，哪怕不指定，也是这样的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>陪你复习巩固，攻破前端技能</title>
</head>
<body>
<h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
<p>运维开发工程师必须掌握的语言</p>
<ul style="list-style-type:disc;">
<li>Go</li>
<li>Python</li>
<li>Shell</li>
</ul>
</body>
</html>效果如下图：
接着，来个不一样的小栗子，看下面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>陪你复习巩固，攻破前端技能</title>
</head>
<body>
<h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
<p>运维开发工程师必须掌握的语言</p>
<ul style="list-style-type:circle;">
<li>Go</li>
<li>Python</li>
<li>Shell</li>
</ul>
</body>
</html>效果如下图：
这会无序列表的样式是变了吧？变成了空心的圆圈。嘿嘿！
再来个小栗子，我们让它变成正方形，看下面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>陪你复习巩固，攻破前端技能</title>
</head>
<body>
<h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
<p>运维开发工程师必须掌握的语言</p>
<ul style="list-style-type:square;">
<li>Go</li>
<li>Python</li>
<li>Shell</li>
</ul>
</body>
</html>效果如下图：
看到效果了吗？真变成了正方形的无序列表，这就是通过CSS属性来控制的样式
再看一个粒子，如果CSS的属性是none，是什么效果？看下面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>陪你复习巩固，攻破前端技能</title>
</head>
<body>
<h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
<p>运维开发工程师必须掌握的语言</p>
<ul style="list-style-type:none;">
<li>Go</li>
<li>Python</li>
<li>Shell</li>
</ul>
</body>
</html>效果如下图：
字体有限，喜欢的盆友关注公众，本文转载于：https://mp.weixin.qq.com/s/CW...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。