在上一篇文章中,我们学习了下图所示的几个文本格式标签,分别是加粗、斜体、下划线、删除线、下标和上标,忘记了的小伙伴可以回去再看看哦。
在网页中,我们也会经常看到列表,比如某资讯网页的信息列表,某购物网页的商品列表等等。那么在HTML中,列表用什么标签来表示呢?其实就是列表标签,在HTML中,列表可以大致分为三类,分别是无序列表、有序列表和自定义列表。其实对应到我们经常用的word中,就是下图所示的几个列表。
无序列表顾名思义就是没有特定顺序的列表,也叫做项目列表,对应word中的第一个列表。无序列表的标签代码是:
<ul>
<li></li>
</ul>
<ul></ul>标签其实就是unordered lists的首字母缩写,表示无顺序的列表,当你想要使用无序列表的时候,就可以使用<ul></ul>这个标签,告诉浏览器我这是一个无序列表,然后再用嵌套在这个标签里面的子元素<li></li>标签,来表示这个列表里的每一个列表项。
这里要注意的是,<ul></ul>这个标签里面必须且只能包裹<li></li>标签作为它的一级子元素,就是说ul必须有儿子标签,不然他自己一个人是不生效的。然后他的儿子标签只能是<li></li>标签,你要是把<p></p>标签当做<ul></ul>的儿子标签,这会导致报错的。
让我们来试试看,代码如下:
<!DOCTYPE html>
<html>
<head>
<title>列表标签-水泥学习</title>
<meta charset="UTF-8">
</head>
<body>
<h1>无序列表</h1>
<ul>
<li>宝总</li>
<li>汪小姐</li>
<li>玲子</li>
</ul>
</body>
</html>
看看效果:
<li></li>标签相对就没有那么多规矩了,它里面可以直接包裹文本,也可以包裹图片标签、超链接标签等,包容性就很强了。
在无序列表中,<li></li>包裹的各个列表项之间是没有先后顺序的区分的,而且在每个列表项前面会有一个小符号,也叫项目符号。这个项目符号是可以通过<ul></ul>标签的type属性进行配置的,但是在html5(就是最新一代的html语法规范)中已经摒弃了这种配置方式,都是使用CSS的list-style来代替。后续等我们学习了css,还可以自定义自己喜欢的项目符号。
不过这里我们还是简单了解一下type属性有哪几个可配置的值:
1、disc(实心圆点)
2、circle(空心圆点)
3、square(实心方块)
4、none(无项目符号)
大家可以跟着下面试试:
有序列表就是各个列表项之间有明确顺序的列表,有序列表的标签代码是:
<ol>
<li></li>
</ol>
<ol></ol>标签和无序列表标签<ul></ul>一样,里面都必须也只能包裹<li></li>标签来作为其一级子标签,形成父子标签才可以进行使用。嵌套在<ol></ol>标签里面的<li></li>标签是有顺序的,一般是利用阿拉伯数字进行对每个列表项进行排序,每个<li></li>标签里面也同样可以包裹文本、图片、超链接等内容。
<ol></ol>标签也有几个属性,分别是type、start属性。type属性就是用来配置每个列表项前面的排序序号,可以设置为整数、大小字母和罗马字母几种。start属性是用来重置列表项开始项的序号值的,比如设置为“5”,那这个列表第一项序号就是从5开始。
有序列表的<li></li>标签也有一个属性value可以配置,该属性是用来重定义某个列表项的序号值的。
让我们来试试看,代码如下:
<h1>有序列表</h1>
<ol>
<li>至真园</li>
<li>金美林</li>
<li>红鹭</li>
</ol>
看看效果:
除了有序列表和无序列表外,我们还可以自定义列表。
自定义列表的标签是三件套:
<dl>
<dt></dt>
<dd></dd>
</dl>
自定义列表中的<dl></dl>标签说明这是一个自定义的列表,然后同样的这个标签里面必须也只能跟着<dt></dt>和<dd></dd>,其他的不能直接放在<dl></dl>标签里面。这种列表常用于对术语或名词进行解释和描述,其中<dt></dt>是用来定义一个术语或者名词,而<dd></dd>则是对这个名词的解释和说明。
让我们来试试看,代码如下:
<h1>自定义列表</h1>
<dl>
<dt>宝总</dt><dd>黄河路牛逼人物</dd>
<dt>汪小姐</dt><dd>27号外贸公司职员</dd>
<dt>玲子</dt><dd>夜东京老板娘</dd>
</dl>
看看效果:
当然,列表也可以不中规中矩,咱们可以循环嵌套!有序列表里面可以嵌套有序列表,也可以嵌套无序列表。反过来也一样!嵌套怎么嵌套呢?上面我们说到<li></li>标签包容万物。所以我们可以在<li></li>标签里面再嵌套一个列表标签,比如嵌套一个无序列表<li><ul></ul></li>。
嵌套的列表的列表项的项目符号都会默认与外层的列表不一样的,具体大家可以多试试,看看效果。
代码:
<h1>嵌套列表</h1>
<ul>
<li>这是顶层列表第一项
<ul>
<li>侬试试这个嵌套</li>
<li>这个嵌套很灵活</li>
</ul>
</li>
<li>这是顶层列表第二项
<ul>
<li>侬试试这个嵌套</li>
<li>这个嵌套很灵活</li>
</ul>
</li>
</ul>
运行效果:
本篇内容介绍了HTML常用的列表标签,大家有空可以跟着敲一敲,自己也可以调整标签参数试试看不同的效果,另外有兴趣的同学可以去了解一下css设置列表布局、格式等,后续我们也会针对css进行介绍学习。