html有序列表中禁止在内直接嵌套–，否则浏览器会自动闭合标题标签导致dom错乱、屏幕阅读器误读、seo权重分散；正确做法是用配合css计数器模拟序号，或用/实现视觉效果。
HTML 有序列表里不能直接用 <li> 包标题语义标签
HTML 标准中，<li> 是纯内容容器，不支持嵌套 <h1></h1>–<h6></h6> 作为“标题”——浏览器会自动闭合未预期的标题标签，导致 DOM 结构错乱、屏幕阅读器误读、SEO 权重分散。你看到的“标题效果”，大概率是 CSS 强行样式覆盖，而非语义正确。
真正可行的两种方式：语义优先 or 视觉模拟
取决于你要的是可访问性/SEO 正确的结构，还是仅视觉上像带标题的条目：
- 如果每个条目确实代表一个独立小节（比如 FAQ 列表、步骤说明），应改用
<section></section>+<h3></h3>+ 普通段落，外层不用<ol></ol>—— 序号靠 CSScounter-reset和::before生成 - 如果只是想让
<li>里某段文字加粗变大、看起来像标题，就用<strong></strong>或<span></span>配 CSS，别碰<h></h> - 切勿在
<li>内写<h3>步骤一：准备材料</h3> <p>需要螺丝刀和胶带...</p>—— 这会让 W3C 验证失败，且部分辅助技术跳过后续内容
CSS 计数器实现“带标题感”的有序列表（推荐）
用原生 HTML 语义 + CSS 补序号，兼顾结构与样式：
<section class="step-list"><section><h3>准备工具</h3>
<p>螺丝刀、胶带、说明书...</p>
</section><section><h3>拆卸外壳</h3>
<p>拧下四颗十字螺丝...</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img
src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a>
<p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p>
</div>
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</section></section>
对应 CSS：
.step-list {
counter-reset: step;
}
.step-list > section {
position: relative;
padding-left: 3em;
}
.step-list > section::before {
content: counters(step, ".") ". ";
counter-increment: step;
position: absolute;
left: 0;
font-weight: bold;
}
为什么不用 <ol></ol> 套 <h3></h3>？看这个实际后果
写成这样：
<ol> <li> <h3>第一步</h3>先通电</li> <li> <h3>第二步</h3>再开机</li> </ol>
浏览器解析后实际 DOM 相当于：
<ol> <li> </ol><h3>第一步</h3> 通电 <ol> <li> </ol><h3>第二步</h3> 再开机
序号丢失、语义断裂、打印样式错乱——这不是 bug，是规范强制行为。
真要保序号又需标题语义，就老实用 <section></section> + CSS 计数器。别省那几行代码，后期维护和无障碍支持的成本远高于初期多写十行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
