HTML5与CSS3基础语法自学教程（二十二）

最新推荐文章于 2025-12-28 22:04:18 发布
原创 最新推荐文章于 2025-12-28 22:04:18 发布 · 108 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #css3 #前端 #html #css

本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注，第一时间看文章！

导读：本小节讲解 CSS 中的计数器，其中包含了计数器的概念，以及计数器中所包含的属性和函数等内容。计数器的应用场景主要集中在复杂编号的列表中，但涉及内容比较难懂。

什么是计数器

CSS 中的计数器本质上来说就是由 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>进风口的爽肤水
        <ol>
          <li>非进口商的</li>
          <li>非进口商的</li>
          <li>非进口商的</li>
        </ol>
      </li>
      <li>进风口的爽肤水
        <ol>
          <li>非进口商的</li>
          <li>
            非进口商的
            <ol>
              <li>将咖啡色的开发商</li>
              <li>将咖啡色的开发商</li>
              <li>将咖啡色的开发商</li>
              <li>将咖啡色的开发商</li>
            </ol>
          </li>
          <li>非进口商的</li>
        </ol>
      </li>
      <li>进风口的爽肤水</li>
    </ol>
  </div>
</body>

</html>

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

355bd7f0fdf8dd6cc58e50dda374ba66.jpeg
03-01.png

提示：上述示例代码仅做展示作用，不需要掌握。有关计数器的内容后续会详细讲解。

如上述示例所示，操作计数器的值是通过如下 2 个属性实现：

  • counter-reset 属性

  • counter-increment 属性

在 HTML 页面中显示计数器是通过如下 2 个函数实现：

  • counter() 函数

  • counters() 函数

counter-reset 属性

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

  • 要重置为计数器的名称。该名称可以是字母（A-Z，a-z）、十进制数字（0-9）、连接符（-）、下划线（_）以及转义字符。

  • 要在元素每次出现时将计数器重置为的值。如果没有指定，默认值为 0。

  • none：不执行计数器复位。

如下示例代码展示了 counter-reset 属性为 none 值的情况：

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

<head>
  <meta charset="UTF-8">
  <title>counter-reset属性</title>
  <style>
    #chapters {
      counter-reset: chapter-count;
    }

    h2 {
      counter-increment: chapter-count;
      font-size: 1em;
    }

    h2::before {
      content: "Chapter "counter(chapter-count) ": ";
    }

    #example-element {
      background-color: #add8e6;
      counter-reset: none;
    }
  </style>
</head>

<body>
  <div id="chapters">
    <h2>什么是计数器</h2>
    <h2 id="example-element">coutner-reset属性</h2>
    <h2>counter-increment属性</h2>
    <h2>counter()和counters()函数</h2>
  </div>
</body>

</html>

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

bfd5ea1f8a545f0b479ac35fc544cd74.jpeg
03-02.png

如上图所示，当 counter-reset 属性的值为 none 值时，计数器没有执行复位，而是继续增加操作。如果将 counter-reset 属性值设置为 chapter-count 的话，会如下图所示：

975c6f74a3224a3d612ad030876eb4c4.jpeg
03-03.png

如上图所示，当 counter-reset 属性值为 chapter-count 时，会将计数器重新复位为 0。这种情况下，与将 counter-reset 属性值为 chapter-count 0 的情况是相同的。

如果将 counter-reset 属性值设置为 chapter-count 5 的话，会如下图所示：

83b2a02b0aff80c0848a3a051f54b8f0.jpeg
03-04.png

如上图所示，当 counter-reset 属性值设置为 chapter-count 5 时，会将计数器重新复位为 5。

注意：counter-reset 属性必须配合 counter() 函数和 counter-increment 属性使用。

计数器的个数不一定是一个，也可以是多个。如果 counter-reset 属性的值是多个计数器的话，则计数器之间使用空格分隔。如下示例代码展示了 counter-reset 属性设置多个计数器：

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

上述示例代码的含义是：

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

  • 将 section 计数器复位为 1。

counter-increment 属性

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

  • 要增加为计数器的名称。该名称可以是字母（A-Z，a-z）、十进制数字（0-9）、连接符（-）、下划线（_）以及转义字符。

  • 要在元素每次出现时将计数器增加为的值。如果没有指定，默认值为 1。

  • none：任何计数器都不能递增。

如下示例代码展示了 counter-increment 属性为 none 值的情况：

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

<head>
  <meta charset="UTF-8">
  <title>counter-increment属性</title>
  <style>
    #chapters {
      counter-reset: chapter-count;
    }

    h2 {
      counter-increment: none;
      font-size: 1em;
    }

    h2::before {
      content: "Chapter "counter(chapter-count) ": ";
    }
  </style>
</head>

<body>
  <div id="chapters">
    <h2>什么是计数器</h2>
    <h2 id="example-element">coutner-reset属性</h2>
    <h2>counter-increment属性</h2>
    <h2>counter()和counters()函数</h2>
  </div>
</body>

</html>

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

ca689356764bbd314e67e76b92eee85b.jpeg
03-05.png

如上图所示，当 counter-increment 属性值为 none 值时，计数器没有任何递增。而当 counter-increment 属性值为 chapter-count 时，会如下图所示：

59f946fe74b07b7c1e4b3200112066b5.jpeg
03-06.png

如上图所示，当 counter-increment 属性值为 chapter-count 时，计数器每次递增为 1。与将 counter-increment 属性值设置为 chapter-count 1 是相同的。

如果将 counter-increment 属性值设置为 chapter-count 5 的话，则如下图所示：

0b2fb2f390463a2a60869a3eefe7fbd0.jpeg
03-07.png

如上图所示，当 counter-increment 属性值为 chapter-count 5 时，计数器每次递增为 5。

说明：如果将 counter-increment 属性值设置为 chapter-count -1 则表示递减。

如果 counter-increment 属性设置多个计数器的递增值的话，计数器之间使用空格进行分隔。如下示例代码展示了 counter-increment 属性设置多个计数器：

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

上述示例代码的含义是：

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

  • 将 section 计数器递增为 2。

counter() 函数

CSS counter() 函数用来简单地将计数器的内容显示在 HTML 页面中。counter() 函数返回一个字符串，该字符串表示指定的计数器的当前值。

counter() 函数的语法结构如下所示：

conter(custom-ident, counter-style)

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

  • custom-ident 参数：表示计数器的名称。

  • counter-style 参数：表示显示的样式。

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

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

<head>
  <meta charset="UTF-8">
  <title>counter()函数</title>
  <style>
    ol {
      counter-reset: listCounter;
    }

    li {
      counter-increment: listCounter;
    }

    li::after {
      content: "["counter(listCounter) "] == ["
        counter(listCounter, upper-roman) "]";
    }
  </style>
</head>

<body>
  <ol>
    <li></li>
    <li></li>
    <li></li>
  </ol>
</body>

</html>

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

9818869906dcaf4806b7f203530309a7.jpeg
03-08.png

counter() 函数经常与 ::before 和 ::after 伪元素选择器配合使用。

counters() 函数

CSS counters() 函数支持计数器的嵌套情况。counters() 函数返回一个字符串，该字符串表示指定的计数器的当前值。

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

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

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

  • custom-ident 参数：表示计数器的名称。

  • string 参数：表示计数器嵌套的分隔符，可以是任意数量的文本字符。

  • counter-style 参数：表示显示的样式。

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

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

<head>
  <meta charset="UTF-8">
  <title>counters()函数</title>
  <style>
    ol {
      counter-reset: listCounter;
    }

    li {
      counter-increment: listCounter;
    }

    li::marker {
      content: counters(listCounter, '.', upper-roman) ') ';
    }

    li::before {
      content: counters(listCounter, ".") " == "counters(listCounter, ".", lower-roman);
    }
  </style>
</head>

<body>
  <ol>
    <li>
      <ol>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </li>
    <li></li>
    <li></li>
    <li>
      <ol>
        <li></li>
        <li>
          <ol>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</body>

</html>

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

2f7829afea16e77450b5ad33846aaf23.jpeg
03-09.png

总结

本小节主要讲解了有关 CSS 中的计数器的内容，其中包含了 counter-reset 属性、counter-increment 属性、counter() 函数以及 counters() 函数，并且讲解了简单的计数器案例以及带有嵌套的计数器案例等内容。

预告：下一章，我们将讲解表格内容。

如要转载本文，请先加作者微信(2080954535，与 QQ 同号)，获得转载许可。原创不易，请尊重作者劳动！

216e4cbf85b9f634863291b44ca86a41.jpeg
作者二维码.png
HTML5 + CSS3 基础知识梳理
weixin_57334661的博客
05-05 2006
视频播放器需要的属性controls显示或隐藏用户控制界面autoplay媒体是否自动播放loop媒体是否循环播放pause媒体是否暂停（只读属性）ended媒体是否播放完毕（只读属性）当前的播放进度duration媒体播放总时间volume0.0到1.0的音量相对值muted是否静音3.2播放器需要的方法：视频播放器用到的方法play()媒体播放Pause()媒体暂停时间更新Canplay()可以播放。
HTML5与CSS3基础语法自学教程（二十）
大叔的私享课
12-23 123
本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注，第一时间看文章！导读：本小节主要讲解 HTML 中的列表元素，其中包含了什么是列表元素、有序列表、无序列表以及定义列表...
HTML5基础加强css样式篇（css过渡属性的隐式过渡问题）（二十二）
余正源的博客
03-16 633
1.隐式过渡属性： 使用火狐浏览器时会出现宽度高度随字体大小一起出现过渡：（原因主要是因为高度和宽度使用了em单位，em随字体大小改变而改变导致） 尚硅谷HTML5 初级阶段 .box { width: 5em; height: 5em; background-color:
打印样式设计
weixin_33851604的博客
01-18 735
如果你对许多从事网页开发的人提起打印样式，他们第一反映会想到使用打印CSS。当网页文档需要被打印时，我们已经习惯于创建一个打印样式表。这些样式表确保打印版本清晰并且保证用户不会打印出巨幅图像。然而，CSS也被用来排版图书，商品目录以及宣传册 - 这些内容在以前可能从来没有被设计成网页。 在这篇文章里，我们将探索一些已有的CSS模块，它们不是在网页浏览器中使用，而是为了解决打印和分页的问题。我将解...
[ HTML5 + CSS3 ] HTML基础 入门详细教程
weixin_62274638的博客
11-15 2373
HTML零基础入门教程附带案例教程，轻松了解网页结构
HTML5 + CSS3 + JavaScript 编程语言学习教程
孤客科技
10-31 2121
HTML5是超文本标记语言的最新版本，它为网页结构提供了更丰富的语义和功能。HTML5 使得网页不仅可以展示文本和图像，还可以处理音频、视频、图形和动画。CSS3（层叠样式表）是用于描述 HTML 文档外观的语言。它允许开发者控制网页的布局、颜色、字体以及其他视觉效果。JavaScript是一种高效的脚本语言，广泛用于网页开发。它可以实现网页的动态效果和交互功能，使网页更加生动和用户友好。通过本教程，你应该对HTML5CSS3和JavaScript的基本概念、语法和应用有了更深入的了解。
【零基础必看的前端教程】——HTML 5 & CSS 3
weixin_48916444的博客
07-16 1752
以零基础视角，带你循序渐进学习前端知识，一看就懂，小白也能转行做前端！这节主要分享关于HTML5和CSS3的新特性！
(前端开发入门必看)一口气读完HTML5与CSS3基础教程，快速建造前端思维(更新中)
upgrade_bro的博客
08-01 2299
要读的书是《HTML5与CSS3基础教程》(第9版)，是一本Web前端开发入门级别的书籍。作者是(美)乔·卡萨博纳(Joe Casabona)，译者是望以文。我们将学习如何编写含义明确、结构良好的HTML，以及如何编写正确、可维护的CSS让网站变得美观。
HTML5+CSS3学习总结(完结)
热门推荐
是日前端
06-14 3万+
一、HTML5的语义化 二、CSS3动画 三、CSS3阴影 四、CSS3过渡(非常重要) 五、弹性布局 六、栅格布局 七、渐变 八、媒体查询
【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
chen_nnn的博客
02-17 1696
笔者在哔哩哔哩弹幕网学习前端器件内所做的学习笔记，分享出来供大家参考。
精选资源
(完整版)《HTML5+CSS3网站设计基础教程》_教学大纲.pdf
11-07
《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容。本课程旨在让学生了解网页开发历程 及其未来方向，熟悉网页设计流程、掌握...
HTML+CSS基础教程-介绍HTML和CSS的基础知识 学习HTML基础语法、标签、CSS基础语法和选择器
09-26
CSS基础语法和选择器是让网页具有美观外观的关键。首先，要理解CSS规则的组成，即选择器加上声明块。声明块由一个或多个声明组成，每个声明用冒号分隔键和值，用分号结束。CSS选择器分为多种类型，如元素选择器、类...
【网页设计与制作】HTML5+CSS3基础教学方案：CSS3核心概念与实践应用详细介绍文档的主要内容
06-21
内容概要：本文档是《HTML5+CSS3网页设计与制作(第2版)》第三章的教学方案，详细介绍了CSS3的基础知识。随着网页制作技术的发展，HTML5属性样式的简单应用已无法满足需求，而CSS3能在不改变HTML结构的情况下提供更...
精选资源
html,css,js,h5,css3基础语法案例代码
03-06
CSS3和HTML5的结合，加上JavaScript的动态性，构成了现代前端开发的核心。学习这些基础知识，开发者可以构建功能丰富、交互性强、视觉效果优秀的网页应用。在实际练习中，可以从简单的页面布局开始，逐渐尝试更复杂...
HTML5+CSS3+JS入门教程 + 源代码 pdf
03-28
1. HTML5的基础语法和新特性：学习如何创建结构化的文档，使用新标签，以及处理多媒体。 2. CSS3的基本选择器、布局模型和动画效果：掌握如何定义样式，实现响应式布局，以及创建动态效果。 3. JavaScript基础：了解...
HTML5 表单属性详解
最新发布
csbysj2020的博客
12-28 159
输入类型属性：如type="tel"等。表单元素属性：如autofocusdisabled等。表单控件属性：如minmaxsteppattern等。表单验证属性：如requiredpatternminlengthmaxlength等。其他属性：如namevalue等。HTML5表单属性为开发者提供了丰富的功能，使得表单设计更加灵活和便捷。掌握这些属性，可以帮助开发者构建更高效、更安全的表单。在开发过程中，应根据实际需求选择合适的属性，以提高用户体验和网站质量。
用100行實現HTML5可存檔塗鴉版
csdn_aspnet的专栏，请点击博客主页右上角三个点中的私信联系
12-20 5107
这篇文章介绍了一个使用HTML5 Canvas实现的简易手绘涂鸦板。该程序分为四个部分：1) 通过彩色div元素创建调色盘；2) 用不同尺寸div实现画笔粗细选择；3) 利用Canvas API实现绘图功能；4) 通过toDataURL()将画作导出为PNG图片。该程序兼容IE9+及主流浏览器，代码简洁（不足100行），提供了基本的绘画、颜色选择、线条粗细调整等功能，并支持作品导出保存。
HTML5 浏览器支持
csbysj2020
12-23 378
HTML5的浏览器支持情况总体较好，但开发者仍需关注兼容性问题，并采取相应的优化措施。通过充分利用HTML5新特性、注意浏览器兼容性、使用polyfill技术和优化代码性能，可以确保网站在各大浏览器上的良好运行。
第一章 html5 第一节 HTML5入门基础
2401_84134448的博客
12-27 587
本文介绍了HTML5网页开发的基础知识。首先讲解了HTML5的定义及其优势，如语义化标签、多媒体支持等。接着详细拆解了HTML5的基本结构，包括DOCTYPE声明、html、head、body等核心标签。重点介绍了常用HTML标签的分类与用法，区分了双标签（如h1-h6、p）和单标签（如br、hr）的使用场景。最后通过一个个人简介网页案例，演示了如何运用所学知识搭建简单网页。本文为网页开发初学者提供了HTML5的入门指导，帮助掌握网页结构的基础构建方法。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值