四时宝库

程序员的知识宝库

「测试开发全栈化--HTML前端知识」(12)有序列表

上一节我们说了,使用<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里可以放任何标签


后两者了解就可以了


好的,今天就先到这里了

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接