必须完整嵌套在内，否则DOM结构断裂；正确路径为→→；语义上表顺序步骤，表并列子项；样式需CSS显式设置；嵌套超两层损害可访问性。

必须把

完整写在某个

标签内部，否则浏览器会直接破坏 DOM 结构——不是“显示错”，而是根本没嵌套成功。

嵌套位置错了，DOM 就已经断裂

浏览器只认一种合法嵌套路径：

→ 直接子元素只能是

→ 子

必须完整落在某个

的起始与结束标签之间。

• ✅ 正确：
  1. 第一步
     • 子操作A
• ❌ 错误：
  1. 第一步
  • 子操作A
  （
  并列在
  内，但不在
• 里）
• ❌ 错误：
  第一步
  • 子操作A
  （文本“第一步”没包在
• 里，内层
  会被浏览器自动移到
  外）

为什么用 ol + ul 组合？语义不能混

表示步骤、条款、流程顺序；

表示并列选项、补充说明、无序子集。两者混合是常见且合理的语义组合，比如安装步骤里的可选组件列表。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 别用
  或
  ：这些属性已废弃，对嵌套子列表完全无效
• 想让子
  显示空心圆？必须显式写：ul { list-style-type: circle; }，它不会继承父级
  的任何样式
• 如果 JS 动态插入子
  ，务必调用 liElement.appendChild(ulEl)，而不是往 olElement 上 append

缩进异常？八成是 padding-left 累加导致的

浏览器默认给每个

和

加约 40px 的 padding-left。嵌套一层就变成 80px，文字严重右偏——这不是 HTML 写错了，是盒模型叠加的结果。

• 别用 text-indent 试图修正：它只影响第一行，多行
• 会错位
• 推荐统一重置：ul, ol { padding-left: 1.5rem; }，再微调嵌套层：ol ul, ul ul { padding-left: 1.25rem; }
• 若需彻底清除默认符号和缩进：ul, ol { list-style: none; padding-left: 0; }（注意是 list-style，不是 list-style-type）

超过两层嵌套，可访问性就亮红灯

键盘 Tab 焦点、屏幕阅读器播报、移动端双指滑动读屏，都依赖清晰的父子关系。三层以上嵌套（如

）会让焦点顺序混乱，读屏器可能跳过中间层级。

• 真实项目中，两层足够：主步骤（
  ）→ 子选项（
  ）
• 真有三级需求？优先考虑用折叠交互（JS 控制 display 或 aria-expanded），而非纯 HTML 嵌套
• 验证是否嵌套成功：打开开发者工具，选中内层
  ，往上查父节点，必须能一路回溯到某个
• ，再回到外层

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！