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

news2024/11/16 2:31:23

前言

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

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