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>