HTML中的列表以及对列表样式的处理

一碗周
1,064 阅读9分钟

这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战

Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端👨🏻‍💻，如果我写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第二十五篇-《HTML中的列表以及对列表样式的处理》

本系列文章在掘金首发，编写不易转载请获得允许

写在前面

本篇文章我们将来学习HTML中的列表以及CSS中对列表的样式操作，本篇文章涉及的内容如下所示：

00_列表和列表样式(导读).png

什么是列表元素

编写文档时经常会使用列表方式呈现一系列平行的内容，在 HTML 页面中同样提供了列表元素来完成类似的功能，可以划分为如下3列表：

  • 有序列表

  • 无需列表

  • 描述列表

如下图所示展示了有序列表和无序列表默认的效果：

01_有序列表和无需列表.png

如上图所示，左边是无序列表的效果，右边是有序列表的效果。

有序列表

HTML中使用<ol>元素表示有序列表，默认情况下使用数字作为列表编号。而<li>元素则表示列表项，定义在有序列表中。

如下示例代码展示了 HTML 中有序列表的用法：

<ol>
    <li>涂山</li>
    <li>北山</li>
    <li>西西域</li>
</ol>

代码运行结果如下所示：

02_有序列表.png

<ol>元素默认使用数字作为编号，可以通过type属性进行修改，该属性的值具有5种类型，如下所示：

  • "a"：表示小写字母编号

  • "A"：表示大写字母编号

  • "i"：表示小写罗马数字编号

  • "I"：表示大写罗马数字编号

  • "1"：默认值，表示数字编号

type属性的值默认情况下会作用到整个有序列表。

除了type属性之外，在HTML5中新增了2个属性，如下所示：

  • reversed：布尔值，设置列表采用倒序的方式。该属性只需要定义属性名即可，而不需要设置属性值。

    如下代码展示了reversed属性的用法：

    <ol reversed>
    <li>涂山</li>
    <li>北山</li>
    <li>西西域</li>
</ol>

    代码运行结果如下所示：

    03_reversed属性.png

  • start：整数值，设置列表序号开始的值，默认为1。

HTML<li>元素也同样具有如下 2 个属性：

  • value：整数值，设置当前列表项在有序列表的序号，当前列表项以后的会按照该项的顺序依次排列。

  • type：设置有序列表的数字类型。该属性值会覆盖<ol>元素的type属性值。

无序列表

HTML中的<ul>元素表示无序列表，默认情况下使用disc作为列表编号。而<li>元素则表示列表项，定义在无序列表中。

如下示例代码展示了HTML中无序列表的用法：

<ul>
    <li>涂山</li>
    <li>北山</li>
    <li>西西域</li>
</ul>

代码运行结果如下所示：

04_无序列表.png

<ul>元素默认使用disc作为编号，可以通过type属性进行修改，该属性的值具有3种类型，如下所示：

  • disc：默认值，表示实心圆

  • circle：表示空心圆

  • square：表示实心方块

值得注意的是<ul>元素的type属性已经被废弃，可以通过CSS进行修改，还有就是<li>元素的value属性或type属性都是针对有序列表的，对无序列表是无效的。

列表嵌套

在一个有序列表或无序列表中定义另一个有序或无序列表作为子列表，这样就构成了列表嵌套。列表嵌套会有如下4种情况：

  • 有序列表嵌套有序列表：父级和子级列表默认使用数字作为序号。

  • 有序列表嵌套无序列表：父级有序列表默认使用数字作为序号，子级无序列表默认使用circle作为序号。

  • 无序列表嵌套无序列表：父级无序列表默认使用disc作为序号，子级无序列表默认使用circle作为序号。

  • 无序列表嵌套有序列表：父级无序列表默认使用disc作为序号，子级有序列表默认使用数字作为序号。

描述列表

HTML提供的<dl>元素称为描述列表，也叫定义列表。该元素是一个包含术语定义及描述的列表，其中术语定义使用的是<dt>元素，描述使用的是<dd>元素。该元素通常应用于例如词汇表、键值对列表等。

如下示例代码展示了描述列表的基本用法：

<dl>
    <dt>涂山</dt>
        <dd>红红</dd>
        <dd>苏苏</dd>
        <dd>蓉蓉</dd>
    <dt>西西域</dt>
        <dd>梵云飞</dd>
        <dd>厉雪扬</dd>
</dl>

代码运行结果如下所示：

05_描述列表.png

列表样式

列表样式主要是针对HTML页面中的列表元素CSS所提供的样式。具体来讲，主要就是 CSS中的list-style属性以及相关属性内容。

该属性是一个简写属性，具体可以拆分为如下三个普通属性：

  • list-style-type属性

  • list-style-image属性

  • list-style-position属性

项目符号样式

CSS中提供的list-style-type属性用来设置列表元素的项目符号（编号/序号）。该属性可以被应用在<ol>元素、<ul>元素和<li>元素中。

list-style-type属性的值可以划分如下两种类型的值：

  • none：表示不显示任何项目符号。

  • 关键字：表示特定含义的项目符号关键字。

关于list-style-type属性的值为关键字的情况，还可以划分为有序列表和无序列表两种：

  • 有序列表：

    • decimal：十进制阿拉伯数字，从 1 开始

    • decimal-leading-zero：十进制阿拉伯数字，例如 01、02、03... ...

    • lower-alpha：小写英文字母

    • upper-alpha：大写英文字母

    • lower-roman：小写罗马数字

    • upper-roman：大写罗马数字

  • 无序列表：

    • disc：实心圆点

    • circle：空心圆点

    • square：实心方块

如下示例代码展示了list-style-type属性的用法：

ul {
    list-style-type: square;
}

ol {
    list-style-type: lower-roman;
}

代码运行结果如下所示：

06_list-style-type属性.png

项目符号图像

CSS中list-style-image属性用来设置某个图像为列表元素的项目符号，该属性的值可以划分如下两种类型的值：

  • none：没有任何图像作为项目符号。这种情况下，将使用 list-style-type 属性的值来替代。

  • url() 函数：设置引入图像的路径。

如下示例代码展示了 list-style-image 属性的用法：

ul {
    list-style-image: url('../image/img/icon.png');
}

上述示例代码运行效果如下图所示：

07_list-style-image属性.png

项目符号定位

CSS中list-style-position属性用来设置列表元素的项目符号的位置，该属性的值可以划分如下两种类型的值：

  • inside：该值表示项目符号位于文本块的内部，同时文本会进行缩进。

  • outside：该值表示项目符号位于文本块的左侧。

如下示例代码展示了list-style-position属性的用法：

li {
    background-color: lightcoral;
}

.inside {
    list-style-position: inside;
}

.outside {
    list-style-position: outside;
}

上述示例代码运行效果如下图所示：

08_list-style-position属性.png

计数器

计数器本质上就是有CSS维护的变量，计数器的值可以通过CSS规则递增来跟踪计数器使用次数，例如我们可以使用计数器来自动为网页中的标题编号。

简单来说，有序列表就是一个比较简单的计数器，但计数器可以实现编号更为复杂的情况。如下示例代码展示了 CSS 中的计数器的用法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>计数器示例</title>
    <style>
        #demo ol {
            counter-reset: section;
            list-style-type: none;
        }

        #demo ol li {
            counter-increment: section;
        }

        #demo ol li:before {
            content: counters(section, ".") "_";
        }
    </style>
</head>

<body>
    <div id="demo">
        <ol>
            <li>JavaScript基础语法
                <ol>
                    <li>数据类型</li>
                    <li>语句</li>
                    <li>函数</li>
                </ol>
            </li>
            <li>HTML和CSS
                <ol>
                    <li>HTML的概念</li>
                    <li>
                        CSS的概念
                        <ol>
                            <li>CSS是什么</li>
                            <li>CSS的语法结构</li>
                            <li>CSS中的注释</li>
                        </ol>
                    </li>
                    <li>CSS选择器</li>
                </ol>
            </li>
            <li>DOM编程</li>
        </ol>
    </div>
</body>

</html>

代码运行结果如下所示：

09_计数器demo.png

上面的效果，如果我们单纯的使用JavaScript来写，可以说挺不好写的。现在我们就来学习一下如何使用CSS来写出这个效果。

上面涉及到的主要包括如下内容：

  • counter-reset属性
  • counter-increment属性
  • counter()函数
  • counters()函数

counter-reset属性

CSS中的counter-reset属性用来将计数器重置为给定的值。该属性的默认值为none，其值的类型具有如下3种情况：

  • 要重置为计数器的名称。
  • 重置后的值，默认为0。
  • none：不执行计数器复位

该属性可以设置多个计数器，只需用空格分隔即可。示例代码如下：

h1 {
  counter-reset: chapter section 1 page;
}

上述示例代码的含义是：

  • 将chapter和page两个计数器复位为0。
  • 将section计数器复位为1。

counter-increment属性

CSS中的counter-increment属性用来设置计数器每次增加的值。该属性的默认值为none，其值的类型具有如下3种情况：

  • 要递增的计数器的名称。
  • 每次递增的值，默认为1。
  • none：任何计数器都不能递增

该属性也可以设置多个值，也是通过空格分隔，具体代码如下：

h1 {
  counter-increment: chapter section 2 page;
}

上述示例代码的含义是：

  • 将chapter和page两个计数器递增为1。
  • 将section计数器递增为2。

counter()函数与counters()函数

CSS中的counter()函数与counters()函数，都是用于将计数器显示在HTML页面中，不同的是后者一般用于嵌套的结构中，这两个函数的语法都是差不多的，counters()函数比counter()函数多个一个参数，表示计数器嵌套的分隔符。

counters()函数的语法结构如下：

conter(custom-ident, string, counter-style)

上述语法结构具体说明如下：

  • custom-ident参数：表示计数器的名称。
  • string参数：表示计数器嵌套的分隔符，可以是任意数量的文本字符。
  • counter-style参数：表示显示的样式。

如下示例代码展示了counters()函数的用法：

li::before {
   content: counters(listCounter, ".", decimal)'_';
}

代码运行结果如下所示：

10_counters()函数.png

总结

本篇文章讲解了HTML中列表的用法以及CSS中对列表样式的操作，涉及到的CSS属性只有一个list-style属性，还是比较简单的。

本篇文章的难点在于计数器，相对来说比较难于理解。

avatar
文章
阅读
粉丝