HTML怎么创建ol有序列表-html教程-PHP中文网

标签默认用阿拉伯数字编号，需正确嵌套且闭合完整；type和start属性可改编号类型与起始值；复杂场景用CSS计数器更灵活；语义上必须用表达真实顺序以保障无障碍访问。

html怎么创建ol有序列表

ol 标签的基本写法和默认行为

直接用 <ol></ol> 包裹 <li> 就能生成有序列表，浏览器默认用阿拉伯数字（1. 2. 3.）编号，不需要额外属性就能工作。

常见错误是把 <li> 写在 <ol></ol> 外面，或者漏掉闭合标签，导致渲染错乱或编号中断。

<ol> <li>第一项</li> <li>第二项</li> </ol> 是正确写法
不要写成 <ol></ol> <li>单独的li</li>，这会脱离列表上下文
嵌套时，内部 <ol></ol> 必须完整包裹在某个 <li> 内部，否则层级失效

用 type 和 start 属性控制编号样式和起始值

type 改变编号类型，start 指定从几开始计数——这两个属性只影响当前 <ol></ol>，不继承也不级联。

注意：HTML5 中 type="a"（小写字母）、type="I"（大写罗马数字）仍被支持，但 type="1" 是默认值，显式写上也没问题；start="3" 会让列表从 3 开始，不是“跳过前两项”。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

<ol type="a"> <li>apple</li> <li>banana</li> </ol> → a. apple，b. banana
<ol start="5"> <li>第五项</li> <li>第六项</li> </ol> → 5. 第五项，6. 第六项
type 对中文、自定义符号无效，想用「一、二、三」得靠 CSS 的 list-style-type

CSS 的 counter-reset / counter-increment 更灵活但容易漏 reset

当需要多级编号（如 1.1、1.2、2.1）、混合中英文序号、或跳过某些项时，CSS 计数器比 HTML 原生属性更可控。

关键点在于：必须对最外层容器设 counter-reset，每项 <li> 用 counter-increment，再用 ::before 插入内容。漏掉 counter-reset 就不会从头计数。

一级列表：ol { counter-reset: item; } li { counter-increment: item; } li::before { content: counters(item, ".") ". "; }
嵌套时，内层 ol 要加自己的 counter-reset，比如 ol ol { counter-reset: subitem; }
用 counters() 而不是 counter() 才能显示多级（如 "1.1"），否则只显示最后一级