如何在HTML页面中正确使用有序列表-html教程-PHP中文网

的合法子元素仅有，混入或文本会导致编号失效、语义丢失；嵌套需在内置；start/type 属性功能有限且兼容性差，推荐用 css counters 实现多级编号。

如何在html页面中正确使用有序列表

直接用 <ol></ol> 包裹 <li>，别往里面塞 <p></p>、文本或其它非 <li> 元素——这是绝大多数“编号不显示”“样式错乱”“语义失效”的根源。

浏览器和屏幕阅读器只认 <ol></ol> 的直接子元素是 <li>。一旦你写成这样：

<ol>
<p>第一步：准备材料</p>
  <p>第二步：开始操作</p>
</ol>

那它就不是列表，只是个空容器套了两个段落——编号不会出现，CSS 的 list-style-type 失效，可访问性信息丢失。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

start="5" 确实能让编号从 5 开始，type="a" 能切到小写字母，但这些 HTML 属性有硬伤：只作用于当前层级，不继承，不支持嵌套自动递进（比如 “2.1” 这种），且现代项目中更推荐用 CSS 控制。

start 是整数，不接受字母或罗马数字；type="i" 和 type="I" 在部分旧浏览器中兼容性差
type 属性已被 W3C 标记为“过时但未弃用”，官方建议优先使用 list-style-type CSS 属性
如果需要多级编号（如 1 → 1.1 → 1.1.1），必须用 CSS counter-reset/counter-increment，HTML 属性做不到

子规则必须放在父 <li> 内部，再套一层 <ol></ol> ——不是套在外部，也不是用 <ul></ul> 混用。

<ol>
<li>主规则一</li>
  <li>主规则二</li>
  <li>主规则三
    <ol type="a">
<li>子规则 a</li>
      <li>子规则 b</li>
    </ol>
</li>
</ol>

设了 list-style-type: none 却发现编号还在？大概率是没重置 padding-left，或者用了 display: inline-block 导致 list-style-position: outside 失效。

list-style 是简写属性，设成 none 会同时清掉类型、位置和图片，但不会动 padding
默认 <ol></ol> 有约 40px 左侧 padding，清除符号后若不手动设 padding-left: 0，视觉上仍有空白
如果给 <li> 设了 float 或 display: flex，list-style 可能完全不渲染——此时得改用 CSS counters 手动编号