HTML嵌套列表中序号不递增的解决方案：修复非法嵌套与重置计数逻辑

html中`

`序号只显示“1”是因为将`
`直接置于`

`内部（而非`
• `内），违反了html语义结构，导致浏览器重置计数器；正确做法是将所有嵌套有序列表（`
  `）严格包裹在父级`
  1. `标签中，并确保层级关系合法。

     在HTML中，列表的嵌套必须遵循严格的语义规则：

     和
     只能作为
     • 的子元素出现，而不能直接作为另一个列表（如
       或
       ）的子元素
     。你原始代码中多次将
     直接写在
     内部（例如
     • …
     …

提升为

的兄弟节点，或强制重置其计数器，结果就是所有顶层

都从 1 开始、无法延续编号。

✅ 正确嵌套结构应为：

  
General Aviation (piston-driven engines)
    
 
      
Single-Engine Aircraft
      
Dual-Engine Aircraft
 
    
  
 

以下是修复后的完整、语义合规的代码示例（已精简冗余标签，移除过时的 ，推荐使用CSS控制样式）：

  
  
  


  

    
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
            
          
        
      
    
  

? 关键修复点总结：


Dopamind
专为ADHD用户打造的AI伙伴，提升专注力与执行效率
下载

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

• 所有
  必须嵌套在
  1. 内部（不可悬空于
     下）；
  2. 每个
  3. 应显式闭合，确保DOM树层级清晰；
  4. 移除了已废弃的 标签，改用CSS控制字体、颜色与大小，提升可维护性；
  5. 使用语义化

     替代 作为标题，符合无障碍与SEO最佳实践；

  6. 嵌套层级清晰：
     →
     • →
       →
       1. →
          ，浏览器据此自动维护编号序列（如 1. → 2. → i. → ii. → A. 等）。

     ? 额外提示： 若需跨多个父

  7. 共享同一编号序列（如让第二个
  8. 中的
     接续第一个
     1. 中
        的末尾数字），需使用 CSS counter-reset / counter-increment 手动控制，但常规文档结构中，严格遵守“ol 必须在 li 内”的规范即可保证自然递增。