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

最新推荐文章于 2024-05-22 13:52:22 发布
最新推荐文章于 2024-05-22 13:52:22 发布
阅读量62 收藏
点赞数
分类专栏： html 文章标签： 前端 html
原文链接：https://mp.weixin.qq.com/s/CWKngvwYvnOKsRPaGCwcDg
版权

写在开篇：对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

不背锅运维
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
云计算平台运维与开发教案：云计算的服务模式,Linux云容器的应用目标.pdf
07-08
云计算平台运维与开发教案：云计算的服务模式,Linux云容器的应用目标.pdf云计算平台运维与开发教案：云计算的服务模式,Linux云容器的应用目标.pdf云计算平台运维与开发教案：云计算的服务模式,Linux云容器的应用目标...
知乎问答：一个新手面试 Linux 运维工作至少需要知道哪些知识？
weixin_30611509的博客
03-03 113
知乎问答：一个新手面试 Linux 运维工作至少需要知道哪些知识？ 提问： 一个新手面试 Linux 运维工作至少需要知道哪些知识？ 陈湛翀的回答： 1，Linux 基础命令及脚本 shell 是基本要求，最好懂perl 或 python 等。如果不懂脚本，怎么把重复的劳动变得简单呢？ 2，系统监控命令 目的是获取系统当前的运行状态，遇到故障...
你想面试运维看一下你合格了吗？
weixin_33749242的博客
05-20 111
今天小编为大家盘点一下，一个新手面试Linux 运维工作至少需要知道哪些知识？一、什么是大型网站运维？首先明确一下，全文所讲的”运维“是指：大型网站运维，与其它运维的区别还是蛮大的；然后我们再对大型网站与小型网站进行范围定义，此定义主要从运维复杂性角度考虑，如网站规范、知名度、服务器 量级、pv量等考虑，其它因素不是重点；因此，我们先定义服务器规模大于1000台，pv每天至少上亿（至少国内排名前1...
linux运维面试前，先来检查这些基础知识忘了没？
dbna5213的博客
07-16 129
知乎上有这样一个问题：一个新手面试 Linux 运维工作至少需要知道哪些知识？其中有一个答案对这一话题的解读非常深入，今天特别分享给大家。 一、什么是大型网站运维？ 首先明确一下，全文所讲的”运维“是指：大型网站运维，与其它运维的区别还是蛮大的；然后我们再对大型网站与小型网站进行范围定义，此定义主要从运维复杂性角度考虑，如网站规范、知名度、服务器 量级、pv量等考虑，其它因素不是重点...
面试 Linux 运维工作至少需要知道哪些知识？
weixin_30920513的博客
07-29 65
前言 我们已经发过不少Linux 面试题，但是单独的面试题总感觉会过于零碎，没有体系化内容给人的帮助大。 知乎上有这样一个问题：一个新手面试 Linux 运维工作至少需要知道哪些知识？其中有一个答案对这一话题的解读非常深入，今天特别分享给大家。 什么大型网站运维 首先明确一下，全文所讲的”运维“是指：大型网站运维，与其它运维的区别还是蛮大的；然后我们再对大型网站与小型网站进行范围定义，此...
携程运维架构揭秘：高可用架构最佳实践之路
02-25
每次迭代都有其背景和出发点，都解决了前一个版本的痛点又不可避免带来一些新的问题或遗漏一些问题。这种迭代过去、现在、将来一直持续着，其中经历可圈可点，值得技术人细细品味。本文先从总体介绍携程架构的组成，...
云计算平台的运维与开发教案：Docker容器.docx
06-27
云计算平台的运维与开发教案：Docker容器.docx云计算平台的运维与开发教案：Docker容器.docx云计算平台的运维与开发教案：Docker容器.docx云计算平台的运维与开发教案：Docker容器.docx云计算平台的运维与开发教案：...
Ansible：自动化运维必须技术之一
01-27
ansible是一个轻量级的运维自动化配置管理和配置工具，基于Python研发。集合了众多老牌运维工具（puppet、cfengine、chef、func、fabric）的优点，实现了批量系统配置、批量程序部署、批量运行命令等功能。 这是一款...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 775
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
【Web】CISCN 2024初赛 题解(全)
uuzeray的博客
05-21 1045
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
Nodejs util file getpost web express child_process mogodb
ooo
05-18 935
Nodejs util file getpost web express child_process mogodb
Web Speech API（2）—— SpeechSynthesis
LiangRZ
05-21 406
Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。语音合成 (也被称作是文本转为语音，英语简写是 tts) 包括接收 app 中需要语音合成的文本，再在设备麦克风播放出来这两个过程。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其他相关命令的信息。控制器，从而获取语音合成功能的入口。
前端-移动端布局
Kongfutu的博客
05-21 167
可以在浏览器里打开检查 点击一下移动端按钮 然后选择一下对应的手机型号可以切换到对应的手机端。进阶学习建议 Vue.js 和 微信小程序。如何在PC端模拟移动端设备。
springboot+vue2+elementui实现时间段查询
2301_76604664的博客
05-20 374
将前端传来的时间数组，赋值给对应的属性；
【VueRouter 的基本使用】
2302_76611599的博客
05-17 242
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
前端开发攻略---用Vue实现无限滚动的几种方法
最新发布
nibabaoo的博客
05-22 551
用vue实现无限滚动
性能监控系统搭建——node_koa实现性能监控数据上报（第一章）
编程知识分享，主打前端
05-19 805
大家好，我是yma16，本文分享node_koa实现性能监控数据上报（第一章）。为了实现前端性能耗时的数据监控，前端对外发布js的sdk，sdk的功能主要是性能耗时计算和数据上报。同时使用vue3和node开发一个数据监控的后台管理系统，主要功能是展示数据，提供一个api_key和token对外暴露的api接口去添加数据监控数据。对外暴露性能上报接口，用户通过api_key请求上报数据到后台。
笔记：前端知识梳理
weixin_46691179的博客
05-17 228
让JavaScript能够在目标机器上能够正常运行的一种实现方式，浏览器不同，JavaScript引擎的实现也不同，如：谷歌的v8、火狐的spidermonkey、IE的chakra、Edge的chakracore。：在v8引擎的基础上又新增了很多js库，换句话说：Node.js内置了自身实现的js变量和函数，功能类似C/C++的标准库。：脚本语言的标准，不同版本的标准称为ESx，如：ES5、ES6。：对ES标准的一种实现，ES标准的其他实现还有JScript。：Node.js的包（库）管理工具。
运维工程师完整知识点
08-29
运维工程师的知识点包括以下内容： 1. 分工：运维工程师可以分为开发运维、应用运维和系统运维。开发运维负责开发运维工具和运维平台，应用运维负责业务上线、维护和故障排除，系统运维负责提供业务上的基础设施，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值