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 类名或样式声明。牢记「列表只能嵌套在列表项中」这一黄金规则，即可彻底规避编号重置问题。