vlambda博客
学习文章列表

HTML基础内容-列表标签

    列表标签通常有三种有无序列表、有序列表、定义列表标签,我们来学习这三种标签的使用方法,以及在网页中的应用场景。

一、无序列表

    无序列表是一个项目的列表,每个项目的前面默认的使用了一个小黑圆点来进行标记,列表结构中的每项内容没有先后的顺序,在网页制作的过程中,无序列表使用的比较多。

无序列表

描述
disc
实心圆(默认值)
square
实心方块
circle
空心圆

代码演示

<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"></head><body> <!--实心圆--> <ul type="disc"> <li>床前明月光,</li> <li>疑是地上霜。</li> <li>举头望明月,</li> <li>低头思故乡。</li> </ul> <!--正方形--> <ul type="square"> <li>床前明月光,</li> <li>疑是地上霜。</li> <li>举头望明月,</li> <li>低头思故乡。</li> </ul> <!--空心圆--> <ul type="circle"> <li>床前明月光,</li> <li>疑是地上霜。</li> <li>举头望明月,</li> <li>低头思故乡。</li> </ul></body></html>

二、有序列表

有序列表也是一列项目,列表项目是使用数字进行标记。

有序列表就是列表结构中的列表项有先后顺序的列表形式,从上到下可以有各种不同的列表序号。

有序列表

描述
1
数字1,2...
a
小写字母a,b...
A 大写字母A,B...
i
小写罗马数字i
I
大写罗马数字I
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title></title></head><body><!--数字1,2...--><h1>静夜思</h1><ol type="1"> <li>床前明月光,</li> <li>疑是地上霜。</li> <li>举头望明月,</li> <li>低头思故乡。</li></ol><!--小写字母a,b...--><h1>从军行</h1><ol type="a"> <li>青海长云暗雪山,</li> <li>孤城遥望玉门关。</li> <li>黄沙百战穿金甲,</li> <li>不破楼兰终不还。</li></ol><!--大写字母A,B...--><h1>早发白帝城 </h1><ol type="A"> <li>朝辞白帝彩云间,</li> <li>千里江陵一日还。</li> <li>两岸猿声啼不住,</li> <li>轻舟已过万重山。</li></ol><!--小写罗马数字i--><h1>送友人</h1><ol type="i"> <li>青山横北郭,白水绕东城。</li> <li>此地一为别,孤蓬万里征。</li> <li>浮云游子意,落日故人情。</li> <li>挥手自兹去,萧萧班马鸣。</li></ol><!--大写罗马数字I--><h1>使至塞上</h1><ol type="I"> <li>单车欲问边,属国过居延。</li> <li>征蓬出汉塞,归雁入胡天。</li> <li>大漠孤烟直,长河落日圆。</li> <li>萧关逢候骑,都护在燕然。</li></ol></body></html>


三、定义列表

定义列表不仅仅是一列项目,而是项目及项目描述的组合。

通俗来说是,标题+描述内容

<dl> <dt>定义列表项</dt> <dd>列表项描述</dd> <dd>列表项描述</dd> <dt>定义列表项</dt> <dd>列表项描述</dd></dl>

注意:

1.定义标签内可以有多个<dt>

2.对于每一个<dt>可以有多个<dd>

3.并且<dt>和<dd>要放到<dl>标签内

4.<dt>和<dd>是同级标签,也就是<dd>标签不能放在<dt>标签内,<dt>标签也不能放在<dd>标签内

5.注意:<dl><dt><dd>组合使用,同时不能不加dl单独使用dt


定义列表的实现方式代码演示:

<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title></title></head><body><dl> <dt>什么是HTML</dt> <dd>HTML是用来描述网页的一种语言。</dd> <dd>HTML超文本标记(Hyper Text Markup Language)</dd> <dt>HTML标签</dt> <dd>HTML标记标签通常被称为HTML标签</dd></dl></body></html>