是语义化有序列表，明确表达不可交换的顺序关系，支持start、reversed等原生属性，保障可访问性、SEO和自动编号；手动编号或错误嵌套会破坏结构语义与技术兼容性。

用

而不是

或手动编号，页面结构才真正清晰——它不是“看起来像步骤”，而是浏览器、屏幕阅读器和搜索引擎都认得出来的顺序语义。

为什么

比手动写“1. 2. 3.”更可靠

手动编号（比如

1. 注册账号

）在视觉上能凑合，但会立刻丢失三类关键信息：顺序关系、层级归属、可访问性支持。屏幕阅读器读不出“这是第几步”，SEO 无法提取流程节点，JS 查询 document.querySelectorAll('ol > li') 也抓不到你手写的段落。

• 浏览器自动为
  提供原生计数逻辑，start、reversed、value 属性可精确控制编号起点与方向
• 辅助技术（如 NVDA、VoiceOver）会明确播报“列表，共 5 项，当前第 2 项”，而不是“段落，文字‘2. 完善信息’”
• 搜索引擎结构化数据工具（如 Google Rich Results Test）能识别
  并用于生成步骤型富摘要

嵌套必须满足的 DOM 结构硬约束

子

必须是父

的**直接子元素**，不能放在外面，也不能塞进

或

中间。否则 CSS 选择器（如 ol ol）、JS 遍历、键盘 Tab 流都会出错。

• ✅ 正确：
• 第三章
  1. 3.1 节
• ❌ 错误：
• 第三章
1. 3.1 节
（子
脱离父
• ）
• ❌ 错误：
• 1. 3.1 节
（
不在
• 直接子层）

嵌套

时编号样式怎么不乱套

多级

默认会继承上级编号类型（比如外层 type="1"，内层也显示数字），但实际需要的是“1 → 1.1 → 1.1.1”这类层级编号。纯靠 type 属性做不到，必须用 CSS counters。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 禁用默认编号：ol { list-style: none; }
• 用 counter-reset 和 counter-increment 手动建层级计数器
• 用 ::before 伪元素拼接编号，例如：li::before { content: counters(section, ".") ". "; }
• 注意：不要依赖 start 属性做多级起始值，它只作用于单层，跨层无效

响应式折叠目录里

的交互陷阱

把

当作可折叠目录使用时，很多人直接套

，但这个标签在 Safari 旧版、安卓 WebView 和 PDF 导出中行为不稳定。生产环境更稳的做法是纯 CSS + 极简 JS。

• 用 max-height 过渡控制展开/收起，避免用 height: auto（不支持过渡）
• JS 只做两件事：切换 aria-expanded 属性、管理焦点（el.focus()）
• 每级
• 加 role="heading" 和对应 aria-level，例如一级目录设 aria-level="1"，二级设 aria-level="2"
• 移动端快速点击可能触发两次，需监听 touchstart 并调用 preventDefault()

真正容易被忽略的点是：编号逻辑和 DOM 结构必须同步。哪怕 CSS counter 写得再漂亮，只要子

没包在正确的

里，屏幕阅读器就认不出层级，打印时编号也会断掉。结构合规不是“锦上添花”，而是所有后续功能成立的前提。