ol标签必须只嵌套li，否则浏览器忽略非li子节点；start控制起始数字（如start="5"显示5.6.），reversed仅对type="1"生效且不改变DOM顺序；嵌套需内层ol完整置于li内，编号连续需CSS counters实现。
ol 标签必须只嵌套 li，否则内容不显示
浏览器会直接忽略 <ol></ol> 里非 li 的子节点——比如写成 <ol>第一步</ol>，页面上什么都不会渲染出来，也不报错。这是最常被新手踩的坑。
-
ol的合法直接子元素只有li（以及script、template等极少数例外） - 想在列表项里换行或加段落？把
p、br写进li里面，而不是ol里面 - 错误示例：
<ol> <p>第一步</p> <p>第二步</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="overflowclass">Wechat Article Html</a> <p class="overflowclass">将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p> </div> <a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </ol>→ 编号消失，文字裸奔 - 正确写法：
<ol> <li><p>第一步</p></li> <li><p>第二步</p></li> </ol>
用 start 和 reversed 控制编号起始与方向
start 是整数，不是字符串；reversed 只对 type="1"（默认数字）生效，设了 type="a" 就失效。
-
start="5"：从 5 开始编号，但语义顺序仍是第 1 项、第 2 项（屏幕阅读器照读“第一项”） -
start="-2"或start="3.5"会被浏览器忽略，退化为start="1" -
reversed+start="10"→ 渲染为 10、9、8…，但仅当没设type或type="1"时才有效 - IE11 及更早版本不支持
start和reversed，需降级处理或用 CSS 计数器替代
type 属性值有限，样式控制优先用 CSS
type 只支持 "1"、"a"、"A"、"i"、"I" 五种，且语义不变。真正灵活的样式控制应交给 CSS。
-
type="1"是默认值，显式写出来纯属冗余 -
type="i"在长列表中易混淆（如viii和iii视觉接近），可读性差 - Safari 对
type="I"（大写罗马数字）支持不稳定，建议实机测试 - 要用希腊字母、方块符号等？必须用 CSS：
list-style-type: lower-greek、list-style-type: square
嵌套有序列表要保证结构合法
嵌套时，内层 ol 必须完整包裹在某个 li 中，不能悬空或跨级。
- 正确结构：
<ol><li>主步骤一<ol><li>子步骤</li></ol> </li></ol> - 错误结构：
<ol> <li>主步骤一</li> <ol><li>子步骤</li></ol> </ol>→ 内层ol脱离父li，语义断裂 - 嵌套后编号自动重置（外层 1.，内层又从 1. 开始），如需连续编号得用 CSS counters
- 多层嵌套影响可访问性：屏幕阅读器会播报“列表，2 项，嵌套列表，3 项”，信息密度高，慎用过深嵌套
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
