HTML基础内容-列表标签
列表标签通常有三种有无序列表、有序列表、定义列表标签,我们来学习这三种标签的使用方法,以及在网页中的应用场景。
一、无序列表
无序列表是一个项目的列表,每个项目的前面默认的使用了一个小黑圆点来进行标记,列表结构中的每项内容没有先后的顺序,在网页制作的过程中,无序列表使用的比较多。
| 无序列表 | |
| 值 |
描述 |
| disc |
实心圆(默认值) |
| square |
实心方块 |
| circle |
空心圆 |
代码演示
<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 |
<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
定义列表的实现方式代码演示:
<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>
