运维开发之路：带你解剖html列表，一个看似简单而又不简单的知识点.
导读：写在开篇：对html列表的热身HTML支持有序、无序和自定义列表，本篇笔者对这几个知识点进行剖析，跟紧步伐，我们一起出发吧！无序列表无序列表以ul标签开始，每个列表项都以li标签开始，无序列表是一个项目的列表，默认情况下，此列项目使用粗体圆...
写在开篇：对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>
效果如下图：
居然没有无序列表了，这就是css属性值为none的效果
那么通过css来控制无序列表的样式，都有哪些可用的值？做个小总结：
| 值 | 描述 |
| disc | 将列表项标记设置为项目符号（默认） |
| circle | 将列表项标记设置为圆形 |
| square | 将列表项标记设置为正方形 |
| 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:disc;
">
li>
数据库
ul style="list-style-type:circle">
li>
关系型
ul style="list-style-type:square">
li>
Oracle/li>
li>
MySQL/li>
/ul>
/li>
li>
非关系型
ul style="list-style-type:square">
li>
Mongodb/li>
li>
Redis/li>
/ul>
/li>
/ul>
/li>
li>
后端
ul style="list-style-type:circle">
li>
编译型
ul style="list-style-type:square">
li>
Go/li>
/ul>
/li>
li>
解释型
ul style="list-style-type:square">
li>
Python/li>
li>
Shell/li>
/ul>
/li>
/ul>
/li>
li>
前端
ul style="list-style-type:circle">
li>
基础
ul style="list-style-type:square">
li>
html/li>
li>
css/li>
li>
javascript/li>
/ul>
/li>
li>
框架
ul style="list-style-type:square">
li>
Vue.Js/li>
li>
Bootstrap/li>
/ul>
/li>
/ul>
/li>
/ul>
/body>
/html>
效果如下图：
有没有一种感觉？树形结构的分类，有条有理，非常不错哈！
水平设置列表样式，创建导航菜单案例
废话不说，先看下面代码
!DOCTYPE html>
html lang="zh">
head>
meta charset="UTF-8">
title>
陪你复习巩固，攻破前端技能/title>
style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
/style>
/head>
body>
h2>
彩虹运维技术栈社区公众号ID：TtrOpsStack/h2>
ul>
li>
a href="#ops">
运维技能/a>
/li>
li>
a href="#dev">
运维开发/a>
/li>
li>
a href="#draft">
有偿征稿/a>
/li>
li>
a href="#about">
关于我们/a>
/li>
/ul>
/body>
/html>
效果如下图：
上面的无序列表，完全通过CSS来控制，使其水平显示。
接下来，我们继续深入解剖有序列表相关的重要知识点
HTML有序列表解剖
有序列表中，有一个非常好玩的属性，叫做type，那么这个属性都有什么值呢？上来就先开门见山，见下表：
| 类型 | 描述 |
| type="1" | 列表项将用数字编号（默认） |
| type="A" | 列表项将用大写字母编号 |
| type="a" | 列表项将用小写字母编号 |
| type="I" | 列表项将用大写罗马数字编号 |
| type="i" | 列表项将使用小写罗马数字进行编号 |
都说了开门见山，开了门却没见到山啊，那么我们就继续看看山（小栗子）。废话不说，先来个使用大写字母的有序列表，看下面代码：
!DOCTYPE html>
html lang="zh">
head>
meta charset="UTF-8">
title>
陪你复习巩固，攻破前端技能/title>
/head>
body>
h2>
彩虹运维技术栈社区，公众号ID：TtrOpsStack/h2>
p>
欢迎广发盆友来稿，知识点不限！以下语言知识点可来稿：/p>
ol type="A">
li>
Go/li>
li>
Python/li>
li>
Shell/li>
/ol>
/body>
/html>
效果如下图：
通过上面的小栗子，相信都知道套路了，玩起来的套路很简单，笔者就不一一尝试了哈。
继续我们的小栗子，有序列表也是可以嵌套的，我们把之前无序列表的嵌套代码改改，代码如下：
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>
陪你复习巩固，攻破前端技能/title>
/head>
body>
h2>
彩虹运维技术栈社区，公众号ID：TtrOpsStack/h2>
p>
运维开发工程师涉猎技术栈/p>
ol>
li>
数据库
ol>
li>
关系型
ol>
li>
Oracle/li>
li>
MySQL/li>
/ol>
/li>
li>
非关系型
ol>
li>
Mongodb/li>
li>
Redis/li>
/ol>
/li>
/ol>
/li>
li>
后端
ol>
li>
编译型
ol>
li>
Go/li>
/ol>
/li>
li>
解释型
ol>
li>
Python/li>
li>
Shell/li>
/ol>
/li>
/ol>
/li>
li>
前端
ol>
li>
基础
ol>
li>
html/li>
li>
css/li>
li>
javascript/li>
/ol>
/li>
li>
框架
ol>
li>
Vue.Js/li>
li>
Bootstrap/li>
ol/>
/li>
/ol>
/li>
/ol>
/body>
/html>
效果如下图：
看到上面的效果了吗？只需摇身一变，就变成了有序列表，效果还不错哦！
写在最后
好啦！今晚对html的无序列表、有序列表、自定义列表的复习巩固就到此为止了。抽空撸文不易，希望本文能帮助到有需要的朋友。望广大朋友能对我们持续保持关注，迫切的希望能多多关注、点赞、收藏、转发，非常感谢！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 运维开发之路：带你解剖html列表，一个看似简单而又不简单的知识点.
本文地址： https://pptw.com/jishu/297174.html