有序列表
ol
li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>火龙果</li>
<li>哈密瓜</li>
</ol>
</body>
</html>
运行结果:
有序列表嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>水果
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>火龙果</li>
<li>哈密瓜</li>
</ol>
</li>
<li>蔬菜
<ol>
<li>白菜</li>
<li>胡萝卜</li>
<li>南瓜</li>
<li>西红柿</li>
</ol>
</li>
</ol>
</body>
</html>
运行结果:
ol 的type属性 的不同值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
1 表示列表项目用数字标号(1,2,3,...)默认!
<ol type="1">
<li>花生</li>
<li>地瓜</li>
<li>玉米</li>
<li>豆角</li>
</ol>
a 列表项目用小写字母标号(a,b,c,...)
<ol type="a">
<li>花生</li>
<li>地瓜</li>
<li>玉米</li>
<li>豆角</li>
</ol>
A 列表项目用大写字母标号(A,B,C,...)
<ol type="A">
<li>花生</li>
<li>地瓜</li>
<li>玉米</li>
<li>豆角</li>
</ol>
i 列表项目用小写罗马数字标号(i,ii,iii,...)
<ol type="i">
<li>花生</li>
<li>地瓜</li>
<li>玉米</li>
<li>豆角</li>
</ol>
I 列表项目用大写罗马数字标号(I,II,III,...)
<ol type="I">
<li>花生</li>
<li>地瓜</li>
<li>玉米</li>
<li>豆角</li>
</ol>
</body>
</html>
运行结果:
无序列表
ul
li
无序列表常用场景大多数是无序的列表效果和导航效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
无序列表
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>火龙果</li>
<li>哈密瓜</li>
</ul>
</body>
</html>
运行结果:
ul 的type属性 的不同值
自定义列表
dl
dt:列表名称
dd:列表内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>水果</dt><!-- dt:定义列表的标题 -->
<dd>苹果</dd><!-- dd:定义列表中的项目 -->
<dd>香蕉</dd>
<dd>橘子</dd>
<dd>菠萝</dd>
</dl>
</body>
</html>
运行结果:
还有很多待更新中... ...
以上为本人记录资料,如果有哪里不明白或有错误的地方,可以留言讨论,我收到消息后会及时回复、改正、讲解!