本文详解如何使用 HTML 的 type 属性与语义化嵌套结构，精准控制多级有序列表的编号类型（如 A. → 1. → a.），解决深层嵌套时字母重置、层级错位等常见问题。
本文详解如何使用 html 的 `type` 属性与语义化嵌套结构，精准控制多级有序列表的编号类型（如 a. → 1. → a.），解决深层嵌套时字母重置、层级错位等常见问题。
在构建专业文档（如医疗编码指南、法规手册或教学大纲）时，常需呈现严格层级的编号体系：第一级用大写字母（A.、B.、C.），第二级用阿拉伯数字（1.、2.、3.），第三级用小写字母（a.、b.、c.）。然而，许多开发者误将
- 直接并列书写，或脱离
- 容器嵌套子列表，导致浏览器自动重置计数（如 B. 后仍显示 A.）、样式错乱、语义失效，甚至影响可访问性与 SEO。
✅ 正确做法的核心原则只有一条：所有子列表（
- 或
- ）必须严格嵌套在父级
- 元素内部
- 外部。这是 HTML 规范的硬性要求，也是实现连续、可控编号的唯一可靠路径。
以下为符合你需求的标准化结构示例（A. → 1. → a. → i.）：
<ol type="A"> <li><strong>Human immunodeficiency virus (HIV) infections</strong> <ol> <li><strong>Code only confirmed cases</strong> <p>Code only confirmed cases of HIV infection/illness. This is an exception to the hospital inpatient guideline Section II, H.</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <div style="background-color: mediumpurple; padding: 8px 14px"> Patient being seen for hypothyroidism with possible HIV infection<br> <b>E03.9</b> Hypothyroidism, unspecified<br> <i>Explanation:</i> Only the hypothyroidism is coded... </div> </li> <li><strong>Selection and sequencing of HIV codes</strong> <ol type="a"> <li><strong>Patient admitted for HIV-related condition</strong> <p>If a patient is admitted for an HIV-related condition, the principal diagnosis should be B20...</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a> <p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p> </div> <a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <div style="background-color: mediumpurple; padding: 8px 14px"> HIV with CMV<br> <b>B20</b> Human immunodeficiency virus [HIV] disease<br> <b>B25.9</b> Cytomegaloviral disease, unspecified<br> <i>Explanation:</i> Cytomegaloviral infection is an HIV related condition... </div> </li> <li><strong>Patient with HIV disease admitted for unrelated condition</strong> <p>If a patient with HIV disease is admitted for an unrelated condition...</p> <!-- 其他 li 依此类推 --> </li> </ol> </li> </ol> </li> <li><strong>Next chapter topic</strong> <ol> <li>First subpoint under B.</li> <li>Second subpoint under B. <ol type="a"> <li>a. continues from previous section’s last letter</li> <li>b. no reset — browser honors nesting depth</li> </ol> </li> </ol> </li> </ol>? 关键要点说明：
- type 属性优先于 CSS：虽然 list-style-type: upper-alpha 等 CSS 可控样式，但 type 是原生、语义明确、兼容性极佳（支持所有现代及旧版浏览器）的首选方案；
-
层级对应关系固定：
- → A. B. C. …（一级大写）
- （无 type，默认）→ 1. 2. 3. …（二级数字）
- → a. b. c. …（三级小写）
- → i. ii. iii. …（四级小写罗马）
-
禁止“悬空”嵌套：❌ 错误写法：
<ol type="A"><li>A.</li></ol> <ol><li>1.</li></ol> <!-- ❌ 这是独立列表，不是 A. 的子项 -->
✅ 正确写法必须是：
<ol type="A"> <li>A. <ol><li>1.</li></ol> <!-- ✅ 在 li 内部 --> </li> </ol> -
自动续号，无需手动 start：只要结构合规，浏览器会自动按层级延续计数（A. → B. → C.；1. → 2. → 3.；a. → b. → c.），无需为每个
- 添加 start="2" 等冗余属性；
-
无障碍友好：正确嵌套的
- 结构能被屏幕阅读器准确识别层级与序号，显著提升残障用户可用性；
- 响应式与维护性：未来增删条目时，仅需增减
- ，编号自动调整，避免 Word 式手动更新风险。
? 进阶提示：若需更精细控制（如跳过某字母、自定义前缀），可结合 CSS counter-reset / counter-increment 实现，但对绝大多数医疗指南、标准文档场景，原生 type 属性已完全胜任且更轻量稳健。
你为母亲制作的在线编码手册，正需要这种清晰、可靠、可扩展的结构——22 章、1200+ 页的内容，一旦建立规范模板，后续章节只需复用
- →
- →
- 三层嵌套模式，即可保证全书编号逻辑统一、专业可信。告别 Word 复制粘贴的脆弱性，拥抱语义化 HTML 的长期可维护力量。
