根据HTML标准和实践需求，小标题的数字排序可通过以下两种方式实现：

一、原生有序列表与标题结合方案

1. 基础结构搭建

html

1. 第一部分 核心概念

2. 第二部分 技术应用

3. 第三部分 案例分析

   

`标签包裹`

`元素，默认显示为数字序号列表。浏览器会自动生成1、2、3的连续编号。

2. 高级样式控制

可用CSS调整序号与标题的间距：

css

title-list {

list-style-position: inside; / 编号与标题对齐 /

padding-left: 0; / 去除默认缩进 /

title-list h2 {

display: inline-block; / 保持标题与编号同行 /

margin-left: 15px; / 设置编号与标题间距 /

二、CSS自动编号方案（更适合复杂排版）

1. 全局计数器配置

css

body {

counter-reset: section; / 初始化计数器 /

h2 {

counter-increment: section; / 每次出现h2时计数+1 /

h2::before {

content: counter(section) ". "; / 显示带点号的数字 /

color: 2c7be5; / 设置编号颜色 /

margin-right: 10px; / 编号与文字间距 /

2. 多级标题扩展

若需要二级标题（如2.1、2.2）可扩展为：

css

h3 {

counter-increment: subsection;

counter-reset: subsection; / 重置三级计数器 /

h3::before {

content: counter(section) "." counter(subsection) " ";

效果对比说明

| 方案 | 优点 | 适用场景 |

| 原生有序列表 | 代码简洁、兼容性好 | 简单列表型标题 |

| CSS计数器 | 样式灵活、支持多级嵌套 | 复杂文档结构 |

两种方案均可实现下图效果：

![演示效果：带数字编号的h2标题依次排列，左侧为黑色数字，标题文字加粗显示]

注意事项

1. 标题层级应遵循`

`到`

`的递进关系，不可跨级使用

2. 若需要生成目录，可通过JavaScript自动抓取带编号的h2标题

3. 移动端显示建议编号字号比正文小2pt，增强可读性

完整代码示例可通过[CodePen]在线测试，搜索"numbered-headings"获取预设模板。