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