HTML小白入门学习-列表标签

发布时间:2024年01月24日

前言

在上一篇文章中,我们学习了下图所示的几个文本格式标签,分别是加粗、斜体、下划线、删除线、下标和上标,忘记了的小伙伴可以回去再看看哦。
在这里插入图片描述

在网页中,我们也会经常看到列表,比如某资讯网页的信息列表,某购物网页的商品列表等等。那么在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进行介绍学习。

文章来源:https://blog.csdn.net/weixin_45125466/article/details/135815622
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。