html中`
- `序号只显示“1”是因为将`
- `直接置于`
- `内部（而非`
- `内），违反了html语义结构，导致浏览器重置计数器；正确做法是将所有嵌套有序列表（`
- `）严格包裹在父级`
- `标签中，并确保层级关系合法。
在HTML中，列表的嵌套必须遵循严格的语义规则：
- 和
- 只能作为
- 的子元素出现，而不能直接作为另一个列表（如
- 或
- ）的子元素
- 直接写在
- 内部（例如
- …
- …
- 的子元素出现，而不能直接作为另一个列表（如
- `标签中，并确保层级关系合法。
- 提升为
- 的兄弟节点，或强制重置其计数器，结果就是所有顶层
- 都从 1 开始、无法延续编号。
✅ 正确嵌套结构应为：
<ul class="a">
<li>General Aviation (piston-driven engines)
<ol class="f"> <!-- ✅ 此ol是li的子元素 -->
<li>Single-Engine Aircraft</li>
<li>Dual-Engine Aircraft</li> <!-- ✅ 同一ol内连续项，自动编号为1、2 -->
</ol>
</li> <!-- ⚠️ 注意：li必须闭合，且ol必须在其内部 -->
</ul>以下是修复后的完整、语义合规的代码示例（已精简冗余标签，移除过时的 ，推荐使用CSS控制样式）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Aircraft Types</title>
<style>
div {
background-color: white;
width: 300px;
border: 2px solid red;
padding: 20px;
margin: 10px;
font-family: Arial, sans-serif;
color: lightblue;
font-size: 1.5em;
}
ul.a { list-style-type: disc; }
ol.f { list-style-type: decimal; }
ol.u { list-style-type: upper-roman; }
ol.t { list-style-type: upper-latin; }
ol.p { list-style-type: lower-latin; }
ol.q { list-style-type: lower-roman; }
</style>
</head>
<body>
<div>
<h2>Aircraft Types</h2>
<ul class="a">
<li>General Aviation (piston-driven engines)
<ol class="f">
<li>Single-Engine Aircraft
<ol class="u">
<li>Tail wheel</li>
<li>Tricycle</li>
</ol>
</li>
<li>Dual-Engine Aircraft
<ol class="t">
<li>Wing-mounted engines</li>
<li>Push-pull fuselage-mounted engines</li>
</ol>
</li>
</ol>
</li>
</ul>
<ul class="a">
<li>Commercial Aviation (jet engines)
<ol class="f">
<li>Dual Engine
<ol class="p">
<li>Wing-mounted engines</li>
<li>Fuselage-mounted engines</li>
</ol>
</li>
<li>Tri-Engine
<ol class="q">
<li>Third engine in vertical stabilizer</li>
<li>Third engine in fuselage</li>
</ol>
</li>
</ol>
</li>
</ul>
</div>
</body>
</html>? 关键修复点总结：
立即学习“前端免费学习笔记（深入）”；
- 所有
- 必须嵌套在
- 内部（不可悬空于
- 下）；
- 每个
- 应显式闭合，确保DOM树层级清晰；
- 移除了已废弃的 标签，改用CSS控制字体、颜色与大小，提升可维护性；
- 使用语义化
替代 作为标题，符合无障碍与SEO最佳实践；
- 嵌套层级清晰：
- →
- →
- →
- →
- ，浏览器据此自动维护编号序列（如 1. → 2. → i. → ii. → A. 等）。
- →
? 额外提示： 若需跨多个父
- →
- 共享同一编号序列（如让第二个
- 中的
- 接续第一个
- 中
- 的末尾数字），需使用 CSS counter-reset / counter-increment 手动控制，但常规文档结构中，严格遵守“ol 必须在 li 内”的规范即可保证自然递增。
- 中
- 内部（不可悬空于
