HTML 嵌套列表中序号不连续？正确嵌套与语义化写法详解

html 中 `

` 的编号中断（始终显示为 1）通常源于非法嵌套：`
` 必须直接嵌套在 `
1. ` 内，而非并列于 `
   ` 或 `
   ` 外部；否则浏览器会重置计数器。本文详解合法嵌套结构、修复逻辑，并提供可运行示例。

   在 HTML 规范中，有序列表

   和无序列表
   只能作为
   • 元素的子元素进行嵌套
   ，而不能直接作为兄弟节点平级置于同一父容器（如

   ）下。你原始代码中将多个
   （如
   1. Single-Engine Aircraft
   后紧接一个独立
   ）直接写在
   内部，违反了 HTML 语义结构——这会导致浏览器将其视为「新列表起点」，强制重置序号为 1，因此所有 .f 列表都只显示 1.。

   ✅ 正确做法是：每个

   （或
   ）必须包裹在上一级
   • 标签内部
   ，形成清晰的父子层级关系。例如：

   General Aviation (piston-driven engines)
     
   
       
   Single-Engine Aircraft
         
   
           
   Tail wheel
           
   Tricycle
         
       
       
   Dual-Engine Aircraft
         
   
           
   Wing-mounted engines
           
   Push-pull fuselage-mounted engines
         
       
     
   

   ? 注意： 不再是 的直接子元素，而是 的子元素 —— 这样浏览器才能识别其为“同一有序列表的延续”，自动递增编号（1 → 2 → 3…）。

   此外，以下几点需特别注意：

   • ❌ 禁止使用 标签：已废弃多年，应改用 CSS 控制字体（如 font-family, color, font-size）；
   • ✅ 推荐语义化结构：外层用
     表示主分类（如 Aircraft Types），每项
     • 包含标题 + 子列表，子列表统一用
       表示带序号的层级；
     • ⚠️ 类名复用要谨慎：.f（decimal）多次出现时，只要嵌套合法，浏览器会自动维护各自独立的计数器（即每个
       是独立序列，但其内部
       1. 会连续编号）；
       2. ? 提升可访问性：避免纯视觉样式（如颜色/大小）传递结构信息，用

          、

          等语义标签辅助屏幕阅读器。

     完整修复后的精简示例（含现代写法）：

     立即学习“前端免费学习笔记（深入）”；

     

     社研通

     文科研究生的学术加速器

     下载

     
     
     
       
     
     
       
     
         
     Aircraft Types
         
     
           
     General Aviation (piston-driven engines)
             
     
               
     Single-Engine Aircraft
                 
     
                   
     Tail wheel
                   
     Tricycle
                 
               
               
     Dual-Engine Aircraft
                 
     
                   
     Wing-mounted engines
                   
     Push-pull fuselage-mounted engines
                 
               
             
           
           
     Commercial Aviation (jet engines)
             
     
               
     Dual Engine
                 
     
                   
     Wing-mounted engines
                   
     Fuselage-mounted engines
                 
               
               
     Tri-Engine
                 
     
                   
     Third engine in vertical stabilizer
                   
     Third engine in fuselage
                 
               
             
           
         
       
     
     

     ✅ 效果：.f 列表将正确显示 1., 2., 3., 4.…… 而非全部 1.；各罗马/拉丁字母列表也按预期嵌套递进。

     总结：HTML 列表序号是否连续，本质取决于DOM 结构合法性，而非 CSS 类名或样式声明。牢记「列表只能嵌套在列表项中」这一黄金规则，即可彻底规避编号重置问题。