ol中直接在li外放p会破坏编号连续性，导致p被移出列表、不参与计数；正确做法是将所有内容（含p、h4、嵌套ol等）严格包裹在li标签内。
ol里直接放
会破坏编号连续性
浏览器允许<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>作为<li>的子元素（HTML5已放开限制），但很多人误把<p></p>写在<li>外面，比如：
<ol> <li>第一题</li> <p>这里是题干补充说明</p> <li>第二题</li> </ol>
这样会导致<p></p>被浏览器自动移到<ol></ol>外——编号变成“1. 第一题”、“2. 第二题”，而那段文字孤零零挂在列表下面，既不参与计数，也不受列表样式控制。
正确混排：所有内容必须包裹在<li>内部
只要结构合法，<li>内可以自由组合段落、标题、图片甚至嵌套列表。关键不是“能不能加”，而是“加在哪”。
立即学习“前端免费学习笔记（深入）”；
-
<li>是容器，不是文本占位符；它必须显式闭合，中间才能塞其他块级元素 - 题干用
<p></p>，小标题用<h4></h4>，答案段落再用一个<p></p>，全都可以 - 若需视觉缩进或分隔，优先用CSS（如
margin-top），别靠空<p></p>或<br>硬撑
示例：
<ol>
<li>
<h4>简述HTTP状态码分类</h4>
<p>状态码分为五类：1xx（信息响应）、2xx（成功）、3xx（重定向）……</p>
<p><strong>答：</strong>最常用的是200、404和500。</p>
</li>
<li>
<p>请写出GET与POST的核心区别</p>
</li>
</ol>
嵌套ol时，<div>是隐形杀手
<p>想在<code><li>里分组内容？别直接写<div>作子元素——虽然现代浏览器不会报错，但部分旧版解析器或屏幕阅读器可能忽略其语义，更严重的是：<code><div>一旦出现在<code><li>开头或结尾，极易触发DOM自动修复，导致后续嵌套<ol></ol>被踢出父<li>，子编号全部重置为(a)。
- 要分组，就用语义化标签：
<section></section>、<article></article>或干脆多个<p></p>
- 真需要
<div>，确保它完全在<code><li>标签对之内，且前后无非法换行或注释干扰
- 用DevTools检查：展开
<li>节点，确认子<ol></ol>是否真的挂在其下，而不是平级出现在<ol></ol>之后
多段文字+编号混合时，别碰start属性
start只适合跨文档续编（比如上一页最后一题是7，本页从8开始）。日常问答中编号跳变、断层、重复，99%不是start没设对，而是结构嵌套错了。
- 子问题用
<ol type="a"></ol>，必须嵌在对应<li>里，不能并列写在外部
- 三级编号（A → 1 → a）必须严格三层：
<ol><li> <ol><li> <ol><li></ol>
</li></ol>
</li></ol>
- 如果用了CSS
counter-reset，每个新层级的容器都得声明一次，漏一个，后面全乱
最稳的做法：先关掉所有自定义CSS，只用原生<ol></ol>嵌套跑通编号逻辑，再加样式。
<section></section>、<article></article>或干脆多个<p></p>
<div>，确保它完全在<code><li>标签对之内，且前后无非法换行或注释干扰
<li>节点，确认子<ol></ol>是否真的挂在其下，而不是平级出现在<ol></ol>之后多段文字+编号混合时，别碰start属性
start只适合跨文档续编（比如上一页最后一题是7，本页从8开始）。日常问答中编号跳变、断层、重复，99%不是start没设对，而是结构嵌套错了。
- 子问题用
<ol type="a"></ol>，必须嵌在对应<li>里，不能并列写在外部 - 三级编号（A → 1 → a）必须严格三层：
<ol><li> <ol><li> <ol><li></ol> </li></ol> </li></ol> - 如果用了CSS
counter-reset，每个新层级的容器都得声明一次，漏一个，后面全乱
最稳的做法：先关掉所有自定义CSS，只用原生<ol></ol>嵌套跑通编号逻辑，再加样式。
