上一节我们说了,使用<ol>标签来定义有序列表,并使用<li>标签来定义列表项。和无序列表一样,也是使用<li>标签来定义列表项。
先看效果:
可以看到,列表项前面有序号标出,1、2、3等,无序的时候前面是 .
接下来看看代码样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表</title>
</head>
<body>
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
</ol>
</body>
</html>
可以看到<ol>和<li>的使用,有序列表在实际工作中用的不是很多。
接着说下自定义列表,自定义列表常用于对术语名词进行解释和描述,定义列表的列表项前没有任何项目符号(没有点和数字)。说下自定义列表的语法
<dl>标签用于定义描述列表(或定义列表),该标签会与<dt> 定义项目和名字,还有<dd> 描述每一个项目和名字,一起使用。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
先看看效果图:
关注我们,dt中,剩下的三个都在<dd>中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>自定义列表</title>
</head>
<body>
<dl>
<dt>
关注我们
</dt>
<dd>
新浪微博
<dd>
官方微信
</dd>
<dd>
联系我们
</dd>
</dl>
</body>
</html>
<dl></dl>中只能包含<dt>和<dd>
<dt>和<dd>包含个数没有限制,通常是一个<dt>包含很多<dd> 可以再来一组数据
<body>
<dl>
<dt>
关注我们
</dt>
<dd>
新浪微博
<dd>
官方微信
</dd>
<dd>
联系我们
</dd>
<dt>
关注我们
</dt>
<dd>
新浪微博
<dd>
官方微信
</dd>
<dd>
联系我们
</dd>
</dl>
</body>
我们来看下效果:
<dt>和<dd>是兄弟关系,并列的,不是包含关系
接着做下列表的总结:
<ul> 无序标签,里面只能包含<li>, 没有顺序,li里面可以包含任何标签
<ol> 有序标签,里面只能包含<li>,有顺序,li里面可以包含任何标签
<dl> 自定义标签,里面只能包含<dt>和<dd>,dt和dd里可以放任何标签
后两者了解就可以了
好的,今天就先到这里了