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

2次阅读

共计 2611 个字符，预计需要花费 7 分钟才能阅读完成。

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> 是定义定义的形容

接下来咱们持续进阶，深刻分析和实战

先看小栗子，通过 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…

正文完