共计 2611 个字符,预计需要花费 7 分钟才能阅读完成。
写在开篇
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…
正文完