为什么我的HTML代码无法显示有序列表的编号，也不渲染列表样式？

你写的列表结构完全不符合HTML规范，触发浏览器的自动容错解析，所有列表标记的渲染逻辑被直接跳过：

• <ul>（无序列表）、<ol>（有序列表）的合法直接子元素只能是<li>，不能直接嵌套其他列表标签、放置裸文本。遇到这种错位结构时，浏览器不会将内部内容识别为列表项，会剥离所有列表默认样式，按普通块级元素渲染。
• <li>元素不能脱离<ul>/<ol>的父容器单独存在，浏览器遇到没有合法父列表的裸<li>，同样会做容错处理，不渲染任何列表标记。

1. 初始代码问题：你将三个<ol>直接放在<ul>内部，既违反<ul>的子元素规则，也全程没有使用<li>做列表项包裹。浏览器不会给这种错位的<ol>生成有序编号，也不会给<ul>生成无序列表项目符号。
2. 修改后代码问题：你将外层替换为裸<li>，没有搭配<ul>/<ol>作为父容器，内部依然直接放置三个<ol>，结构依旧不合法，浏览器仍然会跳过所有列表渲染逻辑。

如果需要纯有序列表，标准结构为：

<p>Lorem ipsum dolor:</p>
<ol>
  <li>sit amet</li>
  <li>sit amet</li>
  <li>sit amet</li>
</ol>

如果需要嵌套列表（比如无序列表下包含有序子列表），需要将内层列表放到对应<li>的内部：

<p>Lorem ipsum dolor:</p>
<ul>
  <li>
    外层无序列表项
    <ol>
      <li>sit amet</li>
      <li>sit amet</li>
      <li>sit amet</li>
    </ol>
  </li>
</ul>

浏览器对不合规HTML的容错不会主动弹出报错，只会静默调整解析逻辑，遇到结构错误时会直接剥离列表元素的默认项目符号、序号样式，和你观察到的“什么标记都不显示”的表现完全一致。

内容的提问来源于stack exchange，提问作者ChimdumebiNebolisa