html中`
`序号只显示“1”是因为将``直接置于`
`内部(而非`- `内),违反了html语义结构,导致浏览器重置计数器;正确做法是将所有嵌套有序列表(`
`)严格包裹在父级`- `标签中,并确保层级关系合法。
在HTML中,列表的嵌套必须遵循严格的语义规则: 和
只能作为 - 的子元素出现,而不能直接作为另一个列表(如
)的子元素
。你原始代码中多次将
直接写在
…
),这属于
无效HTML结构。现代浏览器会自动纠错——通常将孤立的
提升为
都从 1 开始、无法延续编号。✅ 正确嵌套结构应为:
- General Aviation (piston-driven engines)
- Single-Engine Aircraft
- Dual-Engine Aircraft
以下是修复后的完整、语义合规的代码示例(已精简冗余标签,移除过时的 ,推荐使用CSS控制样式):
Aircraft Types
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
? 关键修复点总结:
- 所有
必须嵌套在 - 内部(不可悬空于
- 每个
- 应显式闭合,确保DOM树层级清晰;
- 移除了已废弃的 标签,改用CSS控制字体、颜色与大小,提升可维护性;
- 使用语义化
替代 作为标题,符合无障碍与SEO最佳实践;
- 嵌套层级清晰:
→ - →
→ - →
,浏览器据此自动维护编号序列(如 1. → 2. → i. → ii. → A. 等)。
? 额外提示: 若需跨多个父
- 共享同一编号序列(如让第二个
- 中的
接续第一个 - 中
的末尾数字),需使用 CSS counter-reset / counter-increment 手动控制,但常规文档结构中,严格遵守“ol 必须在 li 内”的规范即可保证自然递增。