和原生支持自动编号，必须严格嵌套、仅含子元素；禁用手动编号，优先用css counter实现灵活控制；嵌套需包在内，样式重置须清空list-style和padding-left。
直接用 <ol></ol> 和 <li> 就能跑起来
不需要 JS、不用框架，浏览器原生支持。只要标签嵌套正确，<ol></ol> 会自动编号，<li> 是唯一合法子元素——错放 <p></p> 或文字直出会导致语义断裂，部分屏幕阅读器可能跳过或误读。
-
<ol></ol>必须只包含<li>（可嵌套其他列表，但必须包在<li>里） - 别手动写 “1.” “2.” —— 那是语义退化，破坏可访问性和 SEO
- 空
<li>不会渲染编号，但会占位；若要隐藏某项，用 CSSdisplay: none比删标签更安全
start 和 type 属性的实际效果有限
这两个 HTML 属性确实存在，但兼容性差、控制粒度粗：start="5" 能让编号从 5 开始，type="A" 切成大写字母，但仅影响当前层，不继承、不支持自定义分隔符（比如 “1.1”、“Step 1”）。更麻烦的是，某些旧版 Safari 对 reversed 或小写罗马数字 i 渲染异常。
- 真正需要灵活编号时，优先用 CSS
counter-reset+counter-increment -
type值如I（大写罗马数字）在 IE 和部分 Android WebView 中显示为阿拉伯数字 - 如果列表跨多个区块（比如分页步骤），
start很难动态对齐，不如后端/JS 控制起始值再输出 HTML
样式重置比属性更可靠
浏览器默认给 <ol></ol> 加了 padding-left 和外边距，直接加 CSS 很容易错位。想彻底接管样式，得先清掉默认行为。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须同时设
list-style: none和padding-left: 0，否则编号消失但缩进还在 - 用
list-style-position: inside时，长文本会换行顶到编号下方，视觉混乱；outside（默认）更稳 - 若要用图标或背景图替代编号，
<li>需设position: relative，再用::before伪元素注入内容，避免语义丢失
嵌套有序列表容易漏掉语义层级
嵌套本身合法，但 <ol></ol> 里不能直接放另一个 <ol></ol>，必须包在 <li> 中。否则解析失败，编号重置或中断。
- 错误写法：
<ol> <li>一级</li> <ol><li>二级</li></ol> </ol>—— 第二个<ol></ol>会被浏览器移到外面 - 正确写法：
<ol><li>一级<ol><li>二级</li></ol> </li></ol> - 多层嵌套时，编号类型不会自动降级（比如外层数字、内层字母），得靠 CSS
list-style-type逐层指定
最常被忽略的点：嵌套后，每个 <li> 的可访问性角色仍是 listitem，但父子关系需依赖 DOM 结构，不能靠缩进或 CSS 视觉暗示来传达顺序逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
