HTML5教程

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

本文主要是介绍运维开发之路:带你解剖html列表,一个看似简单而又不简单的知识点。,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

写在开篇:对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的无序列表、有序列表、自定义列表的复习巩固就到此为止了。抽空撸文不易,希望本文能帮助到有需要的朋友。望广大朋友能对我们持续保持关注,迫切的希望能多多关注、点赞、收藏、转发,非常感谢!

本文转载于:https://mp.weixin.qq.com/s/CWKngvwYvnOKsRPaGCwcDg

这篇关于运维开发之路:带你解剖html列表,一个看似简单而又不简单的知识点。的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!