必须用的场景包括步骤说明、排名优先级、法律条文等有严格顺序语义的内容；无序内容如导航菜单、产品特性等一律用
用 <ul></ul> 还是 <ol></ol>，不是看要不要数字，而是看内容有没有顺序语义——这点错了，后面所有样式、无障碍、SEO 都得返工。
什么时候必须用 <ol></ol> 而不能用 <ul></ul>
浏览器加不加数字只是渲染结果，关键在语义。以下场景必须用 <ol></ol>：
- 步骤说明（如“1. 下载安装包 → 2. 双击运行 → 3. 完成配置”）
- 排名或优先级（如“Top 3 框架：1. React 2. Vue 3. Svelte”）
- 法律条文、合同条款编号（顺序不可交换，跳项会改变含义）
反例：导航菜单、产品特性罗列、标签云——这些项目调换位置不影响逻辑，一律用 <ul></ul>。强行用 <ol></ol> 不仅误导屏幕阅读器，还会让后续加 aria-orientation 或做 WCAG 测试时多绕三道弯。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
<dl></dl> 不是“高级 <ul></ul>”，它只适合术语+定义对
<dl></dl> 的语义非常窄：一个 <dt></dt> 必须对应至少一个 <dd></dd>，且二者构成“名词—解释”关系。常见误用：
立即学习“前端免费学习笔记（深入）”；
- 用
<dl></dl>做两栏布局（比如“姓名：张三｜邮箱：zhang@example.com”）→ 应该用<table> 或 CSS Grid<li>把 <code><dt></dt>当标题、<dd></dd>当内容块来塞段落和按钮 → 屏幕阅读器会连续读出“术语…定义…术语…定义”，完全丢失结构 - 漏写
<dd></dd>，只留<dt></dt>→ DOM 中出现孤立节点，部分 SSR 框架（如 Next.js）可能报 warning，SSR 渲染结果与 CSR 不一致
真要展示键值对，且不需要表格语义，优先考虑 <div role="group"> + <code>aria-labelledby，比硬套 <dl></dl> 更可控。
嵌套列表时，<li> 是唯一合法父容器
所有嵌套都必须发生在 <li> 内部，而不是直接写在 <ul></ul> 或 <ol></ol> 里。错误写法：
<ul> <li>一级项</li> <ul><li>二级项</li></ul> <!-- ❌ 错：ul 不能直接子于 ul --> </ul>
正确写法：
<ul>
<li>一级项
<ul><li>二级项</li></ul> <!-- ✅ 对：ul 是 li 的子元素 -->
</li>
</ul>三层以上嵌套虽语法合法，但人眼难分辨层级，辅助技术（如 VoiceOver）常把第三层开始的编号读成“1点1点1”，建议用 <details><summary></summary></details> 替代深层子列表，尤其当子项是解释性内容时。
CSS 移除默认符号后，别忘重置 padding 和 margin
只写 list-style-type: none 不够，浏览器默认给 <ul></ul> 和 <ol></ol> 设了 padding-left（通常 40px），移除符号后缩进还在，视觉上像“空了一格”。必须同步处理：
.clean-list {
list-style-type: none;
padding-left: 0; <!-- 关键！否则左边还留白 -->
margin: 0; <!-- 防止和上下文间距异常 -->
}如果列表项内含 <p></p> 或 <button></button>，还要注意 <li> 默认是 display: list-item，某些旧版 Safari 对块级子元素的垂直对齐有 bug，可显式加 display: block 避坑。
最常被跳过的一步：模板引擎里动态生成列表时，条件判断漏掉 <li> 开闭合（比如 v-if 或 {% if %} 只包内容不包标签），会导致 HTML 结构断裂——浏览器自动纠错后 DOM 和预期不一致，JS 拿 querySelectorAll('li') 可能少抓几个。语义选择和标签闭合，第一行就得写对。
